diagonaldiagrams

diagonaldiagrams

diagonaldiagrams は、AI エージェントが図やチャートを SVG として描画し、表示する前にテキストの重なり、ボックスを貫通する矢印、はみ出したテキストをチェックできる Python ライブラリ兼 MCP サーバーです。

サイト：動画のサンプル、ベンチマーク、ギャラリーをご覧いただけます。

仕組み

1. 説明する。 エージェントが図の簡単な説明を Mermaid、JSON、または CSV で記述します。
2. 描画する。 diagonaldiagrams がレイアウトを作成し、SVG として保存します。
3. チェックする。 描画を監査し、問題がないこと、または問題点と修正方法を示す JSON を1行出力します。エージェントはスクリーンショットではなく、その行を読み取ります。

$ diagonaldiagrams mermaid flow.mmd -o flow.svg
{"ok": true, "svg": "flow.svg", ..., "items": 3,
 "layout": ["row 1: Start", "row 2: Ready? (decision)", "row 3: Done"]}

ok が false の場合、各エラーには fix が付いています。

インストール

Python 3.11 以降が必要です。

コマンドライン

pip install diagonaldiagrams

MCP（Cursor、Claude Desktop、その他の MCP アプリ）。アプリの MCP 設定に以下を追加してください。uv が必要です。このサーバーは、io.github.lucas19919/diagonaldiagrams として公式 MCP レジストリに登録されています。

{
  "mcpServers": {
    "diagonaldiagrams": { "command": "uvx", "args": ["diagonaldiagrams", "mcp"] }
  }
}

Claude Desktop では、最新リリースの .mcpb ファイルを開くこともできます。

Claude Code

/plugin marketplace add lucas19919/diagonaldiagrams
/plugin install diagonaldiagrams@diagonaldiagrams

その他のエージェント： Install diagonaldiagrams from https://github.com/lucas19919/diagonaldiagrams と伝えてください。インストールスキルに従ってインストールし、その後描画スキルで描画します。モデル向けの簡易版は llms.txt です。

描画できるもの

コマンド	入力	描画内容
mermaid	flowchart、sequenceDiagram、erDiagram	フロー、シーケンス、またはスキーマ
flow、arch、seq、schema	JSON	仕様に基づく同じ4種類
iso	JSON	レイヤー間をリンクでつないだ、等角投影3Dのレイヤースタック
bar、line、scatter	CSV	比較、傾向、関係
geo	CSV または GeoJSON	組み込みの海岸線上の地点
chart <type>	CSV または JSON	さらに約60種類

• describe <type> は、あらゆる図の種類の仕様形式を出力します。
• --fit column は、README やドキュメントページに合わせて図のサイズを調整します。デフォルトは slide で、印刷には page を指定します。
• story は1つの図を1ページ内の複数のビューに変換し、ffmpeg がインストールされていれば --gif で動画にできます。
• apply は JSON パッチで仕様を編集し、export は PNG、PDF、draw.io、または Excalidraw ファイルを書き出します。

比較

2026-10-19 に、バージョン 0.8.0 で、5～40 ステップの同じ 4 つのフローチャートを使い、Mermaid CLI および Pele と比較して測定しました。

• 速度。 20 ステップのフローチャートの処理時間は 152 ms で、Mermaid CLI（2,340 ms）より約 15 倍高速、Pele（101 ms）より約 1.5 倍遅い結果でした。
• トークン数。 エージェントが図ごとに使用したトークン数は、どのサイズでも 4.4k～6.4k でした。5～20 ステップでは、Pele と Mermaid CLI のほうが少ないトークン数でした（1.3k～4.0k）。40 ステップでは、diagonaldiagrams は 6.4k、Pele は 6.3k、Mermaid CLI は 15.4k でした。これは 2 回の実行による結果なので、小規模なサンプルとして扱ってください。
• 品質。 スライドサイズの図を使ったブラインド比較では、diagonaldiagrams は Pele より 85% の割合で、Mermaid CLI より 97% の割合で、より明瞭だと評価されました。Mermaid から変換したアーキテクチャ図を狭いカラム向けにサイズ調整したケースでは、Pele に対して 8 件中 0 件の評価となりました。

全表、手法、再実行用のスクリプトは bench/ にあります。

開発

python -m unittest discover tests/unit   # unit tests
python tests_smoke.py                    # the command-line contract
python scripts/golden.py                 # the reference figures, byte for byte

エンジンの構成については、docs/ARCHITECTURE.md をご覧ください。リリースの作成方法については、PUBLISHING.md をご覧ください。

ライセンス

MIT。詳細は LICENSE をご覧ください。