Dify-1.1.3からClaude 3.7 SonnetでSVG図解をする

# 1. はじめに

AnthropicのClaude 3.7 SonnetによるSVG画像出力が話題になっていますね。Claudeは会社で使用できるものの、個人環境でもいろいろ試してみたくなり、特にDifyからSVG出力ができるのかという点に興味を持ちました。AnthropicのClaudeのAPI契約をすればDifyのAnthropicプラグインで簡単に試せますが、LLMの契約をできるだけ集約したいと考え、今後はOpenRouterにまとめていく予定です。そこで、OpenRouterを契約している私が、DifyでAnthropic Claude 3.7 Sonnetを試すために実験を行った結果をこの記事にまとめます。

Dify 1.1.3の標準OpenRouterプラグイン（0.0.6）では、Anthropic社の最新モデルである**Claude 3.7 Sonnet**がサポートされていません。しかし、**OpenAI-API-compatibleプラグイン（0.0.11）**を使用することで、OpenRouter経由でClaude 3.7 Sonnetを利用できるようになります。

本記事では、DifyでClaude 3.7 Sonnetを使用してSVG図を生成する方法を、環境構築から実践的な使用例まで詳しく解説します。SVG図は視覚的に情報を伝える強力なツールです。Claude 3.7 Sonnetの高度な能力を活用することで、質の高い図を簡単に作成できます。

## ２. 環境構築
以下の図は、Dify 1.1.3、OpenAI-API-compatibleプラグイン、OpenRouter、Claude 3.7 Sonnetの連携関係を示しています。
![dify-openrouter-relationship.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764962/dd32d939-9551-46cc-be46-6c3e6b720d30.png)

### 2.1. OpenAI-API-compatibleプラグインのインストール

Difyに必要なプラグインをインストールする手順は以下の通りです：

1. **Difyの管理画面にアクセス**
    - [Dify]→[プラグイン]メニューを選択します
2. **プラグイン設定画面を開く**
    - [Dify]→[プラグイン]→[モデル]から「OpenAI-API-compatible」を選択します
3. **OpenAI-API-compatibleプラグイン（0.0.11）をインストール**
    - 下図を参照してください
    ![Dify-Admin-Screen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764962/9f822daa-df4a-4bfb-9b37-a170f62b5d64.png)
    
    青色枠：anthropic/claude-3.5までしかサポートされていない標準のOpenRouterプラグイン（0.0.6）
    
    赤色枠：今回インストールするOpenAI-API-compatibleプラグイン（0.0.11）
    

### 2.2. OpenRouter API Keyの取得

OpenRouterからAPI Keyを取得する手順は以下の通りです：

1. [**OpenRouter公式サイト](https://openrouter.ai/)にアクセス**
2. **アカウント作成とログイン**
    - 初めての方はアカウントを作成し、ログインします
3. **API Keyの生成**
    - [個人設定]→[Keys]メニューから[Create Key]ボタンをクリックします
    - 「Dify-OpenAI-Compatible」などの分かりやすい名前でキーを生成します
      ![OpenRouter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764962/85c1160c-4d60-451c-84ad-59c7e808787e.png)

    
4. **クレジットの購入**
    - OpenRouterでは、APIを使用するためにクレジットの購入が必要です
    - 料金プランに応じて適切なクレジット量を購入してください

### 2.3. プラグインの設定

Difyで以下の手順に従ってプラグインを設定します：

1. **設定画面へのアクセス**
    - [Dify]→[設定]→[モデルプロバイダー]→[OpenAI-API-Compatible]を選択します
2. **以下の設定値を入力**

| No. | 設定項目 | 設定値 | 説明 |
| --- | --- | --- | --- |
| 1 | Model Type | LLM | モデルタイプの指定 |
| 2 | Model Name | anthropic/claude-3.7-sonnet | 使用するモデル名 |
| 3 | Model display name | anthropic/claude-3.7-sonnet | UI上での表示名 |
| 4 | API Key | sk-or-************d6 | OpenRouterで取得したAPIキー |
| 5 | API endpoint URL | https://openrouter.ai/api/v1 | OpenRouterのAPIエンドポイント |
| 6 | model name for API endpoint | （空欄） | 空欄のままで問題ありません |
| 7 | Completion mode | Chat | チャットモードで使用 |
| 8 | Model context size | 4096 | コンテキストウィンドウのサイズ |
| 9 | Upper bound for max tokens | 4096 | 最大トークン数の上限 |
| 10 | Agent Thought | Not Support | エージェント思考はサポートなし |
| 11 | Function calling | Not Support | 関数呼び出しはサポートなし |
| 12 | Stream function calling | Not Support | ストリーム関数呼び出しはサポートなし |
| 13 | Vision Support | Not Support | 画像認識はサポートなし |
| 14 | Delimiter for streaming results | ¥n¥n | ストリーミング結果の区切り文字 |
| 15 | 負荷分散（Load balancing） | オフ（トグル未選択） | 負荷分散機能はオフに設定 |

## ３. SVG生成のチャットフロー

### 3.1. SVG生成用チャットフローの作成

OpenAI-API-Compatibleプラグインで接続したOpenRouterのanthropic/claude-3.7-sonnetを使用して、シンプルで効果的なチャットフローを作成します。以下の図はその構成を示しています。

![Dify-Chatflow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764962/634ffa0a-a4fe-4eeb-ad27-88219622babe.png)

<details>
<summary>作成したチャットフロー：OpenAI Compatible Claude-3.7-sonnet.yml（クリックして展開）</summary>

```
app:
  description: OpenAI-API-Compatibleプラグインで接続したOpenRouterのanthropic/claude-3.7-sonnetでSVG画像を生成するチャットフロー
  icon: 🖼️
  icon_background: '#D1E9FF'
  mode: advanced-chat
  name: OpenAI Compatible Claude-3.7-sonnet
  use_icon_as_answer_icon: false
dependencies:
- current_identifier: null
  type: marketplace
  value:
    marketplace_plugin_unique_identifier: langgenius/openai_api_compatible:0.0.11@410445eba2fa0f693d26dea2c3b9ffe51ad0777e021146ff877af6098412efc7
kind: app
version: 0.1.5
workflow:
  conversation_variables: []
  environment_variables: []
  features:
    file_upload:
      allowed_file_extensions: []
      allowed_file_types:
      - image
      allowed_file_upload_methods:
      - remote_url
      - local_file
      enabled: true
      fileUploadConfig:
        audio_file_size_limit: 50
        batch_count_limit: 5
        file_size_limit: 15
        image_file_size_limit: 10
        video_file_size_limit: 100
        workflow_file_upload_limit: 10
      image:
        enabled: false
        number_limits: 3
        transfer_methods:
        - local_file
        - remote_url
      number_limits: 1
    opening_statement: 以下のようなプロンプトからSVG画像を生成します。
    retriever_resource:
      enabled: true
    sensitive_word_avoidance:
      enabled: false
    speech_to_text:
      enabled: false
    suggested_questions:
    - 三権分立について図示してください
    - ターミネーター１の人物相関図を作成してください
    - かぐや姫の物語の構造を図示してください。
    - 桃太郎の物語の構造を図示して
    suggested_questions_after_answer:
      enabled: false
    text_to_speech:
      enabled: false
      language: ''
      voice: ''
  graph:
    edges:
    - data:
        sourceType: start
        targetType: llm
      id: 1743237879260-llm
      source: '1743237879260'
      sourceHandle: source
      target: llm
      targetHandle: target
      type: custom
    - data:
        isInLoop: false
        sourceType: llm
        targetType: answer
      id: llm-source-answer-target
      source: llm
      sourceHandle: source
      target: answer
      targetHandle: target
      type: custom
      zIndex: 0
    nodes:
    - data:
        desc: '以下のようなプロンプトからSVG画像を生成します。

          ・三権分立について図示してください

          ・ターミネーター１の人物相関図を作成してください

          ・かぐや姫の物語の構造を図示してください。'
        selected: false
        title: 開始
        type: start
        variables: []
      height: 178
      id: '1743237879260'
      position:
        x: 80
        y: 282
      positionAbsolute:
        x: 80
        y: 282
      selected: false
      sourcePosition: right
      targetPosition: left
      type: custom
      width: 244
    - data:
        context:
          enabled: false
          variable_selector: []
        desc: 'SYSTEM:

          以下の要件でユーザーからの要求をSVGとして生成してください。

          1. サイズ：指定しない

          2. スタイル：

             - パステルカラー

             - 角丸の四角形

             - 矢印による接続

          USER:

          sys.query'
        memory:
          query_prompt_template: '{{#sys.query#}}'
          role_prefix:
            assistant: ''
            user: ''
          window:
            enabled: false
            size: 10
        model:
          completion_params: {}
          mode: chat
          name: anthropic/claude-3.7-sonnet
          provider: langgenius/openai_api_compatible/openai_api_compatible
        prompt_template:
        - id: 487b5fb7-4b4c-4168-bc1b-7978f83d4a3d
          role: system
          text: '以下の要件でユーザーからの要求をSVGとして生成してください。

            # 要件

            1. サイズ：指定しない

            2. スタイル：

               - パステルカラー

               - 角丸の四角形

               - 矢印による接続'
        - id: ecb5dd07-4f38-4caf-be88-59c9bfba94de
          role: user
          text: '{{#sys.query#}}'
        selected: false
        title: LLM
        type: llm
        variables: []
        vision:
          enabled: false
      height: 278
      id: llm
      position:
        x: 380
        y: 282
      positionAbsolute:
        x: 380
        y: 282
      selected: false
      sourcePosition: right
      targetPosition: left
      type: custom
      width: 244
    - data:
        answer: '{{#llm.text#}}

          '
        desc: LLMの回答
        selected: false
        title: 回答
        type: answer
        variables: []
      height: 132
      id: answer
      position:
        x: 732
        y: 282
      positionAbsolute:
        x: 732
        y: 282
      selected: false
      sourcePosition: right
      targetPosition: left
      type: custom
      width: 244
    - data:
        author: Dify
        desc: ''
        height: 88
        selected: false
        showAuthor: true
        text: '{"root":{"children":[{"children":[{"detail":0,"format":1,"mode":"normal","style":"font-size:
          16px;","text":"Claude 3.7 SonnetでのSVG図生成","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1,"textFormat":1,"textStyle":"font-size:
          16px;"}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}'
        theme: blue
        title: ''
        type: ''
        width: 893
      height: 88
      id: '1743243291276'
      position:
        x: 80
        y: 174.45288694071004
      positionAbsolute:
        x: 80
        y: 174.45288694071004
      selected: true
      sourcePosition: right
      targetPosition: left
      type: custom-note
      width: 893
    viewport:
      x: 142.80893028962737
      y: -11.393744253277418
      zoom: 1.148698354997035

```

</details>

### 3.2. 実行結果

以下は、Claude 3.7 Sonnetを使用して生成したSVG図の実例です。

### 例1: 三権分立の図解

プロンプト: 「三権分立について図示してください」
![Dify-separation-of-powers.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764962/abb5c868-891b-43a7-99ac-ce12d6c0e586.png)

### 例2: ターミネーター1の人物相関図

プロンプト: 「ターミネーター１の人物相関図を作成してください」
![Dify-terminator1-fig.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764962/873343f6-128b-4b1b-baad-d75286af74a4.png)

### 例3: 桃太郎の物語構造

プロンプト: 「桃太郎の物語の構造を図示してください」
![Dify-momotaro-fig.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764962/b6f8238c-5455-4104-98ce-23f06158db2d.png)

## ４. 実践例：ブロック図

より実用的な例として、RAG（Retrieval-Augmented Generation）システムの構造図を生成してみました。

### RAGシステムの構造図

プロンプト: 「RAGの構造を初心者にも分かり易く図示してください」
![Dify-RAG-system.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764962/f6984854-ee27-4c6a-b656-0111bf08451c.png)

## ５. その他試したこと

**1.SVG画像のダウンロード**
　拡大した表示したときに「名前を付けて画像を保存」とするとSVG画像がダウンロードできます。
  ![Dify-Download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3764962/79baa621-f052-4b4b-81a6-71eeb41b79f0.png)

**2.プロンプトに画像を貼り付けてテキストで変更を指示**
OpenAI-API-compatibleを使用しているため、マルチモーダルでのプロンプト入力に不安がありましたが、アッサリできました。
実際に試したのはWindowsのスニッピングツールで画面から切り取った画像をそのまま、Ctrl+vでプロンプトに貼り付けて、「色をパステル調にしてください」などのプロンプトで指示できました。

## ６. まとめ

本記事では、Dify 1.1.3でOpenRouter経由でClaude 3.7 Sonnetを使用し、高品質なSVG図を生成する方法について解説しました。主なポイントは以下の通りです：

1. **OpenAI-API-compatibleプラグイン（0.0.11）** を使用することで、標準のOpenRouterプラグインではサポートされていないClaude 3.7 Sonnetを利用できます。
2. **適切なプロンプト設計**により、様々な種類の図（概念図、フローチャート、人物相関図など）を簡単に生成できます。
3. **パステルカラーや角丸の四角形**などのスタイル指定により、視覚的に美しく分かりやすい図を作成できます。

Claude 3.7 Sonnetの高度な能力を活用することで、プレゼンテーション資料、技術文書、教育コンテンツなど、様々な用途に活用できる質の高いSVG図を簡単に生成できます。

## ７. 参考リンク

- [Dify公式ドキュメント](https://docs.dify.ai/) - Difyの基本的な使い方や機能について
- [OpenRouter API Documentation](https://openrouter.ai/docs) - OpenRouterのAPI仕様と使用方法
- [Claude 3.7 Sonnet Documentation](https://docs.anthropic.com/claude/docs) - Claude 3.7 Sonnetの機能と特徴
- [SVG MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/SVG) - SVGの技術仕様とチュートリアル