AI連携(MCPサーバー)

Diagrammixには、ClaudeやCodexのようなAIアシスタントがダイアグラムを直接読み取り・変更できる、組み込みのMCP(Model Context Protocol)サーバーが搭載されています。必要なものを自然言語で説明するだけで、AIがキャンバス上にシンボル、コネクタ、レイアウトを配置します。

AIで何ができるか

  • 説明からダイアグラムを作成する — フローチャート、ネットワークトポロジー、組織図を依頼すると、すぐにキャンバスに表示されます
  • マインドマップを構築する — トピックを説明すると、構造化されたマインドマップが得られます
  • ドキュメントを読み取る — AIは現在のシェイプ、コネクタ、レイヤー、スタイルを認識します
  • 既存の要素を変更する — テキスト、色、位置、コネクタのルーティングを更新します
  • 一括操作を行う — シンボルとコネクタを含むダイアグラム全体を一度の操作で作成します
  • 自動レイアウトと整列 — 自然言語のコマンドで要素を整理します
  • 画像からルックを再現する — AIに参考画像を渡すと、一致するカスタムテンプレートとスタイルを作成します
  • 書き出す — SVG、PNG、Visio(.vsdx)、Mermaid形式の出力をオンデマンドで生成します

必要条件

  • Diagrammix PRO(一回限りの購入)
  • MCPサーバーが有効な状態でDiagrammixが実行されていること
  • ドキュメントが開かれていない場合、アシスタントが新規作成できます
  • AIクライアントとDiagrammixが同じマシン上にあること(localhost)

Node.js、npx、mcp-remoteは不要です — それらを必要とするクライアント向けに、Diagrammixにはネイティブヘルパーが同梱されています。

セットアップ

1. MCPサーバーを有効にする

  1. Diagrammixを開く
  2. Diagrammix > 設定(またはCmd+,)に移動
  3. AI連携 タブに切り替える
  4. MCPサーバー セクションで MCPサーバーを有効にする をオンにする

サーバーが起動すると ステータス に 実行中 と表示されます。サーバーはhttp://localhost:8420/mcpで待ち受けます。

2. Claude Desktopの設定

Claude Desktopはstdio経由で接続します。Diagrammixはアプリバンドル内に ネイティブのstdioヘルパー を同梱しているため、Node.js、npx、mcp-remoteは不要です。

  1. Diagrammixの設定で 設定をコピー をクリックします — お使いの環境に合わせて、同梱ヘルパーへの正確なパスが入力されます
  2. Claude Desktopの設定ファイルを開く: ~/Library/Application Support/Claude/claude_desktop_config.json
  3. 設定を貼り付けます。次のようになります — commandのパスは、Diagrammix.appがインストールされている場所内のヘルパーを指します:
{
  "mcpServers": {
    "diagrammix": {
      "command": "/Applications/Diagrammix.app/Contents/MacOS/diagrammix-mcp-stdio",
      "args": ["--url", "http://localhost:8420/mcp"]
    }
  }
}

注: パスを手入力するのではなく 設定をコピー を使用してください — 実際のアプリバンドル内のヘルパーを指しており、Diagrammixがそれを署名済みかつ最新の状態に保ちます。

  1. Claude Desktopを再起動します。チャットにDiagrammixのツールが表示されるようになります。

3. Claude Code(CLI)の設定

Claude CodeはStreamable HTTPをネイティブにサポートしており、ブリッジは不要です。次を指す HTTP タイプのMCPサーバーを追加してください:

http://localhost:8420/mcp

使用すべきコマンドや設定ファイルについては、Claude CodeのMCPドキュメントを参照してください。

4. Codexの設定

Codex(アプリ、CLI、IDE拡張機能は1つのMCP設定を共有します)はStreamable HTTPで接続します。次のいずれかの方法で設定できます:

オプションA — config.toml。 Diagrammixの設定のCodexセクションで 設定をコピー をクリックし、~/.codex/config.tomlに貼り付けます:

[mcp_servers.diagrammix]
url = "http://localhost:8420/mcp"
enabled = true
default_tools_approval_mode = "prompt"
startup_timeout_sec = 20
tool_timeout_sec = 60

オプションB — CLI。 Diagrammixの設定で コマンドをコピー をクリックするか、次を実行します:

codex mcp add diagrammix --url http://localhost:8420/mcp

5. その他のMCPクライアント

MCP対応のクライアントであれば、次の設定で接続できます:

  • トランスポート: Streamable HTTP
  • エンドポイント: http://localhost:8420/mcp
  • プロトコル: HTTP POST上のJSON-RPC 2.0

注: ChatGPT DesktopはHTTPSを必要とし、localhostへの直接接続には対応していません。

主なツール

Diagrammixは多数のMCPツールを公開しています。特に便利なものを紹介します:

ツールできること
batch_create多数のシンボルとコネクタを1回の取り消しステップで作成
apply_diagram_plan / preview_diagram_plan構造化されたダイアグラムプランを検証し、1つの取り消し可能なステップとして適用
get_elements / update_element既存の要素を読み取り、変更する
apply_layout自動レイアウトを実行する
create_mindmapネストされたツリーまたはMarkdownアウトラインからマインドマップを構築する
import_mermaidMermaidテキストからダイアグラムを挿入する
generate_radial_diagram放射状のインフォグラフィック — セグメント化されたリング、円、花びら — をラベルと色付きで生成する
combine_shapesブール演算(統合、削減、交差、除外)
create_artboard書き出し用のアートボードを追加する
set_document_palette / apply_paletteドキュメントのカラーパレットを保存し、それを使ってダイアグラムを再配色する
create_style / apply_styleカスタムスタイルを作成・適用する
export_svg、export_png、export_vsdx、export_mermaidダイアグラムまたは選択範囲を書き出す。export_vsdxは各アートボードをVisioページに変換する
undo / redo変更を前後にたどる

使用例

フローチャートを作成する

「Start、Decision、Process A、Process B、Endからなるフローチャートを作成してください。StartをDecisionに接続し、DecisionをProcess A(Yes)とProcess B(No)に接続し、両方のプロセスをEndに接続してください。」

AIはbatch_createを使い、すべてのシンボルとコネクタを1つの取り消しステップで配置します。

既存のダイアグラムを変更する

「すべての矩形の塗りつぶし色を青に変え、テキストを太字にしてください。」

AIはget_elementsで要素を読み取り、update_elementでそれぞれを更新します。

自動レイアウト

「行の間隔を60pxにして上から下へのレイアウトを適用してください。」

AIは希望する方向と間隔を指定してapply_layoutを呼び出します。

画像からルックを再現する

「これは私たちのブランドのダイアグラムスタイルのスクリーンショットです。このシェイプと色を、再利用できるカスタムテンプレートとスタイルとして再現してください。」

アシスタントに参考画像を渡すと、一致するSVGシェイプと矢印を生成し、カスタムテンプレートとしてまとめ、一致するカスタムスタイルを定義します。create_custom_template、add_custom_shape、add_custom_arrowhead、create_styleなどのツールを使うため、その場限りの描画ではなく、再利用可能なパックが結果として得られます。

ヒント

  • 説明から始める — 具体的であるほど、結果も良くなります
  • 繰り返し調整する — 最初の作成後に、色やラベル、レイアウトの調整をAIに依頼する
  • 自由に元に戻す — AIによるすべての変更はCmd+Zの取り消しに対応しています
  • 記法シンボルを使う — 一貫したスタイリングのために、特定の記法パックを使うようAIに依頼する
  • 一括のほうが良い — 新しいダイアグラムでは、AIがすべてを1ステップで作成するため、元に戻すとすべてがまとめて取り消されます