AI 連携（MCP サーバー）

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

AI で何ができる？

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

要件

Diagrammix PRO（一回限りの購入）
MCP サーバーが有効な状態で Diagrammix が実行されていること
少なくとも1つのダイアグラムドキュメントが開いていること
AI クライアントと Diagrammix が同じマシン上にあること（localhost）
Claude Desktop の場合、Node.js 18+ が必要（mcp-remote ブリッジ用）

セットアップ

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

Diagrammix を開く
Diagrammix > 設定（または Cmd+,）に移動
AI 連携 タブに切り替え
AI 連携（MCP サーバー）を有効にする をオンにする

サーバーは http://localhost:8420/mcp で起動します。

2. Claude Desktop の設定

Claude Desktop は stdio トランスポートを使用するため、mcp-remote ブリッジ（Node.js 18+）が必要です。

Diagrammix の設定で 設定をコピー をクリックして設定をクリップボードにコピー
Claude Desktop の設定ファイルを開く： ~/Library/Application Support/Claude/claude_desktop_config.json
設定を貼り付けるか、手動で追加：

{
  "mcpServers": {
    "diagrammix": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "http://localhost:8420/mcp"]
    }
  }
}

注意: nvm を使用している場合、設定をコピー ボタンは Node.js のインストールを検出し、npx のフルパスと正しい PATH 環境変数を含む設定を生成します。

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 の設定 > MCP servers を開く
Connect to a custom MCP をクリック
Name を Diagrammix に設定
Streamable HTTP タブを選択
URL を入力: http://localhost:8420/mcp
Save をクリック

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 に色、ラベル、レイアウトの調整を依頼
自由に元に戻す — すべての AI 変更は Cmd+Z の元に戻しをサポート
記法シンボルを使用 — 一貫したスタイリングのために AI に特定の記法パックの使用を依頼
一括が最適 — 新しいダイアグラムでは、AI がすべてを1ステップで作成するため、元に戻すと全体が取り消されます