diagram-mcp

diagram-as-codeのテキストを、ディスク上のPNGファイルにレンダリングするMCPサーバーです。ブラウザもネットワークも外部サービスも不要です。ドキュメントやチケット、READMEに貼り付けるフローチャートの生成に便利です。

ツール

• render_diagram: コードをPNGに変換し、ファイルパスを返します

• preview_diagram: ダイアグラムをテキストアートとして、そのまま会話内に描画します。ファイルは書き出しません

• validate_diagram: パースして行番号付きでエラーを報告します。何も書き出しません

• diagram_syntax: 言語リファレンス

Related MCP server: Vizdown-MCP

インストール

Node.js 20.12+ が必要です。

git clone https://github.com/JVmano/diagram-mcp.git
cd diagram-mcp
npm install
npm run build

次に、Claude Code に登録します：

claude mcp add diagram --scope user \
  --env DIAGRAM_MCP_OUTPUT_DIR=$HOME/Documents/diagram-renders \
  -- node "$(pwd)/dist/index.js"

または、手動で .mcp.json / ユーザー設定に追加します：

{
  "mcpServers": {
    "diagram": {
      "type": "stdio",
      "command": "node",
      "args": ["/absolute/path/to/diagram-mcp/dist/index.js"],
      "env": { "DIAGRAM_MCP_OUTPUT_DIR": "/absolute/path/to/renders" }
    }
  }
}

セッションを再起動してから、ダイアグラムを依頼してください。変更をプルした後は、再度 npm run build を実行してください。

言語

title "Reward approval flow"
direction TB

node event "Conversion recorded" shape=rounded
node auto "Auto-approve?" shape=diamond size=200x100
node queue "Manual review queue"

event -> auto
auto -> queue "no"

図形：rect、rounded、ellipse、diamond、hexagon。接続：from -> to ["label"] [style=solid|dashed]。at=x,y による位置指定は任意です。省略すると、レイアウトが図形を配置します。完全なリファレンスについては、diagram_syntax を呼び出してください。

設定

すべてオプションで、すべてにデフォルト値があります。.env.example を参照してください。レンダリング結果は DIAGRAM_MCP_OUTPUT_DIR（デフォルト：~/Documents/diagram-renders）に出力されます。明示的な outputPath は、DIAGRAM_MCP_ALLOW_ANY_OUTPUT_PATH=true でない限り、そのディレクトリまたは作業ディレクトリの内側にある必要があります。

開発

npm test          # unit tests
npm run test:e2e  # builds, then drives the server over stdio
npm run verify    # typecheck, test, build, e2e

src/core 内のパーサー、レイアウト、SVG生成は、ローカルのダイアグラムエディタープロジェクトと共有されています。npm run check:sync は、そのプロジェクトが隣のディレクトリにチェックアウトされている場合、それらとの差分をチェックします。

ライセンス

MIT