AI 連携（MCP サーバー）

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

AI で何ができる？

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

要件

  • Diagrammix PRO（一回限りの購入）
  • MCP サーバーが有効な状態で Diagrammix が実行されていること
  • 少なくとも1つのダイアグラムドキュメントが開いていること
  • AI クライアントと Diagrammix が同じマシン上にあること（localhost）

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

セットアップ

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

  1. Diagrammix を開く
  2. Diagrammix > 設定（または Cmd+,）に移動
  3. AI 連携 タブに切り替え
  4. AI 連携（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）の設定

プロジェクトの .mcp.json またはグローバルに ~/.claude/mcp.json に追加：

{
  "mcpServers": {
    "diagrammix": {
      "type": "url",
      "url": "http://localhost:8420/mcp"
    }
  }
}

Claude Code は Streamable HTTP をネイティブにサポートしており、ブリッジは不要です。

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 への直接接続はサポートしていません。

使用例

フローチャートの作成

「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 を呼び出します。

画像からスタイルを再現

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

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

ヒント

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