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の連携関係を示しています。

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

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

Difyの管理画面にアクセス
- [Dify]→[プラグイン]メニューを選択します
プラグイン設定画面を開く
- [Dify]→[プラグイン]→[モデル]から「OpenAI-API-compatible」を選択します
OpenAI-API-compatibleプラグイン（0.0.11）をインストール
- 下図を参照してください
青色枠：anthropic/claude-3.5までしかサポートされていない標準のOpenRouterプラグイン（0.0.6）

赤色枠：今回インストールするOpenAI-API-compatibleプラグイン（0.0.11）

2.2. OpenRouter API Keyの取得

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

**OpenRouter公式サイトにアクセス**
アカウント作成とログイン
- 初めての方はアカウントを作成し、ログインします
API Keyの生成
- [個人設定]→[Keys]メニューから[Create Key]ボタンをクリックします
- 「Dify-OpenAI-Compatible」などの分かりやすい名前でキーを生成します
クレジットの購入
- OpenRouterでは、APIを使用するためにクレジットの購入が必要です
- 料金プランに応じて適切なクレジット量を購入してください

2.3. プラグインの設定

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

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

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を使用して、シンプルで効果的なチャットフローを作成します。以下の図はその構成を示しています。

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

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

3.2. 実行結果

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

例1: 三権分立の図解

プロンプト: 「三権分立について図示してください」

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

プロンプト: 「ターミネーター１の人物相関図を作成してください」

例3: 桃太郎の物語構造

プロンプト: 「桃太郎の物語の構造を図示してください」

４. 実践例：ブロック図

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

RAGシステムの構造図

プロンプト: 「RAGの構造を初心者にも分かり易く図示してください」

５. その他試したこと

1.SVG画像のダウンロード
　拡大した表示したときに「名前を付けて画像を保存」とするとSVG画像がダウンロードできます。

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

６. まとめ

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

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

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

７. 参考リンク

Dify公式ドキュメント - Difyの基本的な使い方や機能について
OpenRouter API Documentation - OpenRouterのAPI仕様と使用方法
Claude 3.7 Sonnet Documentation - Claude 3.7 Sonnetの機能と特徴
SVG MDN Documentation - SVGの技術仕様とチュートリアル