mcp-server-diagramai

mcp-server-diagramai

AI エージェントがリアルタイムで図を作成、読み取り、編集、削除できるようにする、DiagramAI 統合用の MCP サーバー実装です。

特長

リソース

• 図の一覧とプロジェクト構造を公開します
• 図の状態にリアルタイムでアクセスできます
• プロジェクト単位で整理できます

ツール

• create_diagram：指定した内容で新しい図を作成します
• get_diagram：ID で図を取得します
• update_diagram：既存の図を変更します
• delete_diagram：図を削除します
• add_node：図にノードを追加します
• add_edge：ノード間の接続を追加します
• list_diagrams：アクセス可能なすべての図を取得します
• get_diagram_status：図の状態とメタデータを確認します

インストール

npm から（推奨）

npm install -g mcp-server-diagramai

ソースから

git clone https://github.com/PadsterH2012/mcp-server-diagramai.git
cd mcp-server-diagramai
npm install
npm run build

Claude Desktop での使用

設定ファイル

Claude Desktop の設定ファイルのパス：

• MacOS：~/Library/Application Support/Claude/claude_desktop_config.json
• Windows：%APPDATA%\Claude\claude_desktop_config.json

公開パッケージの設定

{
  "mcpServers": {
    "diagramai": {
      "command": "npx",
      "args": [
        "mcp-server-diagramai",
        "--api-url", "${DIAGRAMAI_API_URL}",
        "--api-key", "${DIAGRAMAI_API_KEY}"
      ]
    }
  }
}

開発用の設定

{
  "mcpServers": {
    "diagramai": {
      "command": "/PATH/TO/node",
      "args": [
        "/PATH/TO/mcp-server-diagramai/dist/index.js"
      ],
      "env": {
        "DIAGRAMAI_API_URL": "http://localhost:3000",
        "DIAGRAMAI_API_KEY": "your-api-key-here"
      }
    }
  }
}

環境変数

.env ファイルを作成するか、環境変数を設定します：

# DiagramAI API Configuration
DIAGRAMAI_API_URL=http://localhost:3000
DIAGRAMAI_API_KEY=your-api-key-here

# Optional: WebSocket URL (if different from API URL)
DIAGRAMAI_WS_URL=ws://localhost:3000

# Optional: Request timeout (milliseconds)
REQUEST_TIMEOUT=30000

# Optional: Enable debug logging
DEBUG=false

API キーの設定

1. DiagramAI の設定にアクセス：DiagramAI インスタンスの設定に移動します
2. API キーを生成：適切な権限を持つ新しい API キーを作成します
3. MCP を設定：API キーを Claude Desktop の設定に追加します

必要な権限

• diagrams:create - 新しい図を作成します
• diagrams:read - 図の内容を読み取ります
• diagrams:update - 図を変更します
• diagrams:delete - 図を削除します
• projects:read - プロジェクト情報にアクセスします

利用可能なツール

図の管理

// Create a new diagram
create_diagram({
  title: "My Flowchart",
  type: "reactflow", // or "mermaid"
  content: {...}, // Diagram content
  projectId?: "project-uuid"
})

// Get diagram by ID
get_diagram({
  diagramId: "diagram-uuid"
})

// Update existing diagram
update_diagram({
  diagramId: "diagram-uuid",
  title?: "New Title",
  content?: {...}
})

// Delete diagram
delete_diagram({
  diagramId: "diagram-uuid"
})

// List all diagrams
list_diagrams({
  projectId?: "project-uuid",
  limit?: 10
})

ノードとエッジの操作

// Add node to diagram
add_node({
  diagramId: "diagram-uuid",
  node: {
    id: "node-1",
    type: "process",
    position: { x: 100, y: 100 },
    data: { label: "Process Step" }
  }
})

// Add edge between nodes
add_edge({
  diagramId: "diagram-uuid",
  edge: {
    id: "edge-1",
    source: "node-1",
    target: "node-2"
  }
})

開発

ビルド

npm run build

開発環境での実行

npm run dev

テスト

npm test

トラブルシューティング

よくある問題

接続に失敗する

• DiagramAI が実行中で、アクセス可能であることを確認してください
• API URL とポートの設定を確認してください
• API キーが有効で、必要な権限を持っていることを確認してください

認証エラー

• API キーの形式を確認してください（da_ で始まる必要があります）
• DiagramAI の設定で API キーの権限を確認してください
• API キーの有効期限が切れていないことを確認してください

ツールの実行エラー

• 図の ID の形式を確認してください（有効な UUID である必要があります）
• 指定した図へのアクセス権がユーザーにあることを確認してください
• DiagramAI インスタンスへのネットワーク接続を確認してください

デバッグモード

環境変数に DEBUG=true を設定すると、デバッグログを有効にできます。

ライセンス

このプロジェクトは MIT ライセンスの下でライセンスされています。詳細については、LICENSE ファイルを参照してください。

貢献

1. リポジトリをフォークします
2. フィーチャーブランチを作成します（git checkout -b feature/amazing-feature）
3. 変更をコミットします（git commit -m 'Add some amazing feature'）
4. ブランチにプッシュします（git push origin feature/amazing-feature）
5. プルリクエストを作成します

サポート

• GitHub の課題
• DiagramAI のドキュメント
• Model Context Protocol