Diagrammo (dgmo)

@diagrammo/dgmo-mcp

会話から実際の図を作成 — AI ツールを離れる必要はありません。

この MCP サーバーを使うと、Claude（および MCP 互換のあらゆる AI ツール）で、簡潔なテキストマークアップからシーケンス図、フローチャート、ER 図、C4 アーキテクチャ図、ガントチャート、その他 40 種類以上の図を描画し、その結果を本格的なエディターに渡して調整できます。チャットで図を依頼すれば、実際の図が返ってきます。

できること

自然な言葉で、たとえば「認証フローをシーケンス図にして」「第 3 四半期の計画をガントチャートにして」「サービスを C4 図で描いて」と頼むと、Claude がマークアップを作成して描画します。マークアップは読みやすく、差分も確認できます。

flowchart Mutiny Resolution
direction-tb

[Sail]     Set sail under the captain
{Trouble?} Discontent in the crew?
{Vote}     Crew vote called
[Mutiny]   Seize the ship

(Sail) -> (Trouble?)
(Trouble?) -Yes-> (Vote)
(Vote) -Mutiny-> (Mutiny)

→ 上記のフローチャートとして描画されます。描画処理はすべてローカルで行われ、図のデータがマシンの外に送信されることはありません。

ツール

ツール	機能	HTTP 経由
render_diagram	DGMO マークアップを SVG または PNG としてレンダリングします	はい
validate_diagram	マークアップをチェックし、レンダリングせずに解析エラーを報告します	はい
suggest_chart_type	説明に適したチャートの種類を提案します	はい
list_chart_types	サポートされているすべてのチャートの種類を、ベータ版を示して一覧表示します	はい
get_language_reference	正確な生成に役立つ DGMO 構文のドキュメントを取得します	はい
get_examples	チャートの種類に応じた実用例を取得します	はい
share_diagram	共有可能な diagrammo.app の URL を取得します — 図をウェブエディターに渡せます	はい
open_in_app	編集するために、図を Diagrammo デスクトップアプリに直接 開きます	いいえ
check_app_installed	デスクトップアプリがインストールされているかどうかを報告します	いいえ
preview_diagram	1 つ以上の図をレンダリングし、ブラウザーで HTML プレビュー を開きます	いいえ
generate_report	目次と任意のソースを含む、洗練された 複数セクションの HTML レポート を作成します	いいえ
put_space_diagram	フォルダーとタイトルを指定して、図を Diagrammo Cloud のスペース に書き込みます	はい
get_space_diagram	ID、またはフォルダーとタイトルを指定して、Cloud のスペースから図を読み込みます	はい
list_space_diagrams	Cloud のスペースにあるすべての図を一覧表示します	はい

3 つのスペース用ツールは、図を Diagrammo Cloud に送信します。Diagrammo アカウントページで発行したスペース API キーを、サーバーの環境変数 DGMO_API_KEY として設定する必要があります。ツールの引数として渡すことはありません。これにより、キーが会話ログに残らないようにします。

share_diagram と open_in_app は、チャットの外につなぐための機能です。Claude が生成した図を、調整やスタイルの変更、埋め込みができるものにします — 詳細は以下をご覧ください。

いいえと表示されている 4 つのツールは、ブラウザーを開くか、デスクトップアプリを起動します。HTTP 経由では、あなたのマシンではなくサーバーを実行しているマシン上で動作するため、HTTP 経由では提供されません — HTTP 経由での提供をご覧ください。

MCP サーバーのその先へ

MCP サーバーは、DGMO マークアップを基盤とするエコシステム全体である Diagrammo へのエントリーポイントの 1 つです。チャットで生成し、本格的なエディターで調整して、どこにでも埋め込めます。

• diagrammo.app — デスクトップアプリです。open_in_app を使うと、AI が生成した図をライブプレビュー、パレット、エクスポート機能とともに、アプリに直接取り込めます。
• online.diagrammo.app — インストール不要で、ブラウザー上で使えるフル機能のエディターです。share_diagram の URL を開くと、ここに表示されます。
• ドキュメント連携 — DGMO のフェンス付きコードブロックをドキュメントサイトに追加できます： remark-dgmo、 astro-dgmo、 docusaurus-plugin-dgmo、 fumadocs-dgmo。
• Obsidian — コミュニティプラグイン Diagrammo Diagrams を使うと、ボルト内で DGMO をレンダリングできます。
• CLI — npx @diagrammo/dgmo-cli file.dgmo -o out.png を実行するか、npm install -g @diagrammo/dgmo-cli でインストールできます（macOS および Linux）。

1 つのマークアップを、どこでも。 ここで生成した図は、アプリでも、ドキュメントでも、Obsidian でも同じようにレンダリングされます。どれも DGMO に対応しているためです。

→ diagrammo.app で無料で試す

セットアップ

最も簡単 — 1 つのコマンド

dgmo CLI をインストールして、すべての設定を任せます。

npm install -g @diagrammo/dgmo-cli   # macOS and Linux
dgmo install                         # auto-detects Claude Code, Codex, Claude Desktop, Cursor, …

Homebrew または pacman を使いたい場合は、diagrammo.app/dev をご覧ください。

dgmo install は検出した各アシスタントを対話なしで設定し、dgmo mcp を指定します。そのため、別途パッケージをインストールしたり、プロンプトに回答したりする必要はありません。対象を 1 つに絞るには、dgmo install claude-code（または codex、claude-desktop など）を実行します。

手動での設定

自分で設定を編集したい場合は、npx を使って任意の MCP クライアントからサーバーを指定します（グローバルインストールは不要です）。

Claude Code — .claude/settings.local.json；Claude Desktop — ~/Library/Application Support/Claude/claude_desktop_config.json：

{
  "mcpServers": {
    "dgmo": {
      "command": "npx",
      "args": ["-y", "@diagrammo/dgmo-mcp"]
    }
  }
}

dgmo CLI がインストール済みの場合は、{ "command": "dgmo", "args": ["mcp"] } も使用できます。保存後にクライアントを再起動すると、ツールが自動的に表示されます。

HTTP での提供

上記の設定では、サーバーを子プロセスとして起動し、標準入力と標準出力を介して通信します。そのため、サーバーとクライアントが同じマシン上にある必要があります。ホスト型エージェントプラットフォームやコンテナーを利用する場合、あるいは複数の人で 1 台のサーバーを共有する場合など、同じマシン上にないときは、代わりに HTTP エンドポイントとして起動します。

npx -y @diagrammo/dgmo-mcp --http            # http://127.0.0.1:3333/mcp
MCP_TRANSPORT=http MCP_PORT=8080 npx -y @diagrammo/dgmo-mcp

どのオプションも、設定に合わせてフラグまたは環境変数のいずれかを指定できます。

フラグ	変数	デフォルト	説明
--http	MCP_TRANSPORT=http	オフ	stdio の代わりにストリーム可能な HTTP を提供します
--port <n>	MCP_PORT	3333	接続を待ち受けるポート
--host <addr>	MCP_HOST	127.0.0.1	バインドするインターフェイス
--path <path>	MCP_PATH	/mcp	エンドポイントが応答するパス
--allow-host <h>	MCP_ALLOWED_HOSTS	ループバック	追加で許可する Host ヘッダー。繰り返し指定できます
--allow-origin <o>	MCP_ALLOWED_ORIGINS	自身のオリジン	許可する Origin ヘッダー。繰り返し指定できます

各リクエストは個別に処理されます。セッションはなく、呼び出し間で保持される情報もありません。そのため、1 つのエンドポイントで複数のクライアントに同時に対応できます。

サーバー自体には認証機能がありません。 デフォルトではループバックにバインドされ、想定するよう指定されていない Host ヘッダーを含むリクエストや、--allow-origin で指定されていない、自身以外の Origin ヘッダーを含むリクエストを拒否します。これで、同じマシン上または同じコンテナー内のクライアントには十分です。より広いネットワークからアクセスできるようにする場合は、手前に独自の認証を設け、アクセスに使用するホスト名を --allow-host で指定する必要があります。ホスト名を指定せずにループバック以外のインターフェイスへバインドすると、その旨を示す警告が表示されます。

--help を実行すると、インストール済みバージョンの内容がすべて表示されます。

プライバシー

すべてのレンダリングはローカルで行われます。図のマークアップと生成された画像がマシンから外部に送信されることはありません。ただし、明示的に share_diagram を呼び出した場合を除きます（図が diagrammo.app の URL にエンコードされます）。プライバシー規約をご覧ください。

開発ハブ（AI チューニングツール）

pnpm hub

1 つのコマンド、1 つのサーバー、1 つのブラウザータブ。ハブを開くと、3 つの AI チューニング開発ツールをタブ付きシェルで利用できます。上部のタブで切り替えられるため、別々のポートやコマンドを覚える必要はありません。

• トリガーのチューニング — suggest_chart_type を動かすフレーズ／概念の語彙を編集し、プロンプトをリアルタイムで採点して、triggers.json に保存します。
• LLM ジャッジ — claude -p で、プロンプトに対するチャートタイプの説明を判定します。
• ガイダンススタジオ — サーバーが提供するタイプ別のスタイリングガイダンス（dgmo の language-reference.md にある `` ブロックを get_language_reference 用に切り出したもの）を作成します。タイプを選び、AI にスタイリングを指示する方法を編集し、コミット済みのデータセットフィクスチャに対してプロンプトを実行して（実行ごとに入力が変わることはありません）、生成された DGMO とレンダリング画像を並べて確認できます。タイプ選択欄はカバレッジバーも兼ねています。「3×で比較」すると、ガイダンスなしの場合と入力したヒントを適用した場合をレンダリングして目視で確認できます。「保存」すると検証後、language-reference.md に書き戻されます。

これらのツールは開発専用であり、公開されるサーバーには含まれません。（単独で実行したい場合は、スタンドアロンの pnpm harness スクリプトと pnpm studio スクリプトを引き続き利用できます。それぞれ 1 つのツールだけを実行します。）

貢献とリリース

開発環境のセットアップとリリースワークフローについては、CONTRIBUTING.md をご覧ください。

ライセンス

MIT