drawarch

DrawArch MCP

アーキテクチャのプロンプトや参照画像を、持ち運び可能でネイティブ編集可能な Draw.io ファイルに変換します。
視覚的な推論は MCP ホストが担当します。DrawArch は決定論的なレンダリング、アセットの埋め込み、検証、納品を行います。

クイックスタート · ワークフローを見る · アーキテクチャ · 貢献する

---

編集可能な要素を見る

これはスクリーンショットを図に貼り付けたものではありません。コンテナー、ラベル、アイコン、図形、コネクタの端点、ポート、ウェイポイントは、それぞれ独立したネイティブの mxCell オブジェクトとして保持されます。アセットは .drawio ファイル内に埋め込まれるため、オフラインでも持ち運び可能で、編集できます。

重要

DrawArch は別の LLM を呼び出さず、2つ目の LLM API キーも必要ありません。ChatGPT、Claude、Codex、Cursor、またはその他の視覚機能を備えた MCP ホストがリクエストや画像を分析し、シーングラフを提供します。

DrawArch でできること

	機能	内容
🧩	ネイティブ編集	diagrams.net で個々のオブジェクトを移動、スタイル変更、ラベル変更、再接続、削除できます。
🎯	参照画像の再現	絶対座標、レイヤー、z-order、ポート、ウェイポイントを使って、添付されたアーキテクチャ画像を再構築します。
🌐	実用的なアセット	バンドルされたアイコン、Iconify 対応アイコン、ユーザー画像、または承認済みの HTTPS 画像ソースを使用できます。
📦	持ち運び可能な成果物	画像アセットをすべて埋め込んだ生成済み .drawio ファイルを、MCP 経由で直接返します。
🔐	承認を考慮したレンダリング	不変のプラン改訂と改訂に紐づく承認トークンにより、古いレンダリングや未レビューのレンダリングを防止します。
✅	組み込みの検証	出力を受け入れる前に、Draw.io の構造、参照、アセットの安全性、構造的な網羅性を確認します。

参考画像の再現

アーキテクチャ画像を MCP ホストに添付して、次のように依頼します。

この画像を DrawArch で再現してください。レイアウト、ラベル、アイコン、グループ化、コネクタの経路を維持してください。表示されているオブジェクトはすべて編集可能にし、適切な場合は実際のアイコンを使用してください。

ホストと DrawArch は、レビュー可能な次の4段階のループに従います。

1. 準備 — ホストのビジョンモデルが、型付きの絶対シーングラフを指定して prepare_reference_recreation を呼び出します。
2. レビューと承認 — ユーザーまたはホストのポリシーがレイアウトとオンラインアセットのソースをレビューします。承認はその特定のリビジョンに紐付けられます。
3. 作成 — create_reference_drawio がアセットを安全に解決して埋め込み、ネイティブセルを描画し、ファイルを検証して、.drawio リソースを返します。
4. 比較と修正 — compare_reference_recreation が構造上のカバー率を測定します。ホストは必要に応じて計画を調整し、この手順を繰り返します。

flowchart LR
    A[Prompt or<br/>reference image] --> B[Vision-capable<br/>MCP host]
    B -->|typed scene graph| C{DrawArch MCP}
    C --> D[Plan revision<br/>& approval]
    D --> E[Safe asset<br/>resolver]
    E --> F[Native Draw.io<br/>renderer]
    F --> G[Validation &<br/>comparison]
    G -->|portable resource| H[Editable<br/>.drawio file]
    G -. revise .-> B

簡単に言うと、既存の AI が画像を分析し、DrawArch がその分析を、制御・検証可能な編集可能ファイルに変換します。完全な仕様は examples/reference-recreation.json で確認できます。

画像を生成するだけではだめなのですか？

要件	DrawArch	平面的な画像生成
個々のコンポーネントを編集する	✅	❌
コネクタを再接続して経路を変更する	✅	❌
明示的な ID と階層を維持する	✅	❌
生成後にオフラインで作業する	✅	通常は可能
構造を自動的に検証する	✅	❌
実際のアイコンを埋め込んで再現する	✅	一貫性がない
レビュー可能な計画に沿って反復する	✅	❌
ピクセル単位で完全に一致する出力を保証する	いいえ — ホストの指示による反復が必要	いいえ

DrawArch は、不透明なピクセル複製ではなく、高忠実度で編集可能な再構成を目指します。ホストのビジョンモデルは結果を確認し、ジオメトリやスタイルを更新して、別の変更不可なリビジョンを描画できます。

クイックスタート

Node.js 20+ または Docker が必要です。

npm から実行

npx -y [email protected]

DrawArch はデフォルトで stdio を使用します。診断情報は stderr に出力されるため、stdout は MCP メッセージ用に保持されます。

ローカルの MCP ホストに追加

{
  "mcpServers": {
    "drawarch": {
      "command": "npx",
      "args": ["-y", "[email protected]"],
      "env": {
        "DRAWARCH_OUTPUT_DIR": "/absolute/path/to/diagrams",
        "DRAWARCH_ONLINE_ASSETS": "false"
      }
    }
  }
}

npx を直接解決できない Windows ホストでは、command に npx.cmd を設定してください。ソースをチェックアウトして、絶対パスの dist/src/index.js を設定することもできます。

ソースから実行

git clone https://github.com/Ajey95/drawarch-mcp.git
cd drawarch-mcp
npm ci
npm test
npm run build

次に、ホストを設定します。

{
  "mcpServers": {
    "drawarch": {
      "command": "node",
      "args": ["/absolute/path/to/drawarch-mcp/dist/src/index.js"],
      "env": {
        "DRAWARCH_OUTPUT_DIR": "/absolute/path/to/diagrams"
      }
    }
  }
}

公開済みコンテナを実行

docker run --rm -p 3000:3000 \
  -e DRAWARCH_API_KEY=replace-with-a-long-random-secret \
  -e DRAWARCH_APPROVAL_SECRET=replace-with-another-random-secret \
  -e DRAWARCH_ALLOWED_HOSTS=localhost,127.0.0.1 \
  -e DRAWARCH_ALLOWED_ORIGINS=localhost,127.0.0.1 \
  -v drawarch-data:/data \
  ghcr.io/ajey95/drawarch-mcp:0.2.0

コンテナは http://localhost:3000/mcp で Streamable HTTP を実行します。公開ヘルスチェックは GET /health です。MCP とファイルのダウンロードには、設定済みのベアラートークンが必要です。

ローカルホストとリモートホスト

ホストの種類	推奨トランスポート	備考
Claude Desktop / Claude Code	stdio またはリモート HTTP	ローカルの stdio が最も簡単です。リモートコネクタでは /mcp を使用できます。
Codex / Cursor / VS Code	stdio またはリモート HTTP	開発者ごとの出力にはローカルの stdio を、共有する認証済みサービスにはリモート HTTP を使用します。
ChatGPT	リモート Streamable HTTP	ChatGPT はローカルの stdio プロセスを起動できません。まず HTTPS の背後にコンテナをデプロイしてください。
CI およびチームサービス	Streamable HTTP	ベアラー認証、安定した承認シークレット、厳密なホスト／オリジンの許可リスト、TLS、永続的な出力ボリュームを設定します。

DrawArch が現在提供しているのは、デプロイ可能なサーバーと公開コンテナであり、マネージドのホスト型エンドポイントではありません。HTTPS ドメインとインフラストラクチャは運用者が用意します。

MCP ツール

アーキテクチャ図の生成

ツール	用途
list_themes	組み込みの6種類のビジュアルテーマを一覧表示します。
list_assets	同梱された実世界のアイコンカタログを検索します。
resolve_asset	出所情報を付けて、同梱またはオプトインのオンライン SVG を解決します。
create_drawio	テーマを適用した決定論的なアーキテクチャ図を生成します。
validate_drawio	生成されたアーキテクチャファイルを検証します。

リファレンスの再現

ツール	目的
prepare_reference_recreation	編集可能な絶対配置のシーングラフを保存し、必要に応じてそのソースを承認します。
update_reference_plan	変更不可の次のリビジョンを作成し、以前の承認を無効にします。
get_reference_plan	確認用に最新のシーングラフのリビジョンを読み取ります。
create_reference_drawio	承認済みのプランをレンダリングし、ポータブルな .drawio 成果物を返します。
validate_reference_drawio	ネイティブ構造、参照、安全な埋め込み画像を検証します。
compare_reference_recreation	構造の網羅性を評価し、編集可能な要素の不足を報告します。

アセットとセキュリティモデル

リファレンスプランは、次の4つのアセットモードをサポートします。

モード	ソース	サーバーのオプトインが必要ですか？
bundled	MIT ライセンスの DrawArch SVG カタログ	いいえ
online	Iconify 互換のアイコン検索	はい
data	ユーザー提供の SVG、PNG、JPEG、または WebP データ URI	いいえ
remote	明示的に承認された HTTPS 画像 URL	はい

リモート画像の処理では、URL 認証情報、HTTPS 以外のプロトコル、カスタムポート、プライベートまたは予約済みの DNS 応答、安全でないリダイレクト、過大なバイト数／ピクセル数、およびアクティブな SVG コンテンツを拒否します。ラスター画像はデコード後、再エンコードしてから埋め込まれます。オンラインアセットにはプロバイダーとライセンスのメタデータが保持されます。第三者のライセンス条件を確認する責任はユーザーにあります。

HTTP デプロイでは、ベアラー認証、ホスト検証、オリジン検証、安全な出力パス、アトミックな書き込み、リビジョンに紐づく HMAC 承認トークンもサポートされます。デプロイに関するガイダンスと脆弱性の報告については、SECURITY.md を参照してください。

環境変数

変数	デフォルト	説明
DRAWARCH_TRANSPORT	stdio	stdio または http を選択します。
DRAWARCH_OUTPUT_DIR	.drawarch-output	出力とプランの保存先となる制限付きディレクトリです。
DRAWARCH_ONLINE_ASSETS	false	オプトイン方式のオンラインおよびリモート画像ソースを有効にします。
DRAWARCH_ICONIFY_BASE_URL	Iconify API	HTTPS の Iconify 互換プロバイダーのベース URL です。
HOST	127.0.0.1	HTTP のバインドホストです。
PORT	3000	HTTP リスナーのポートです。
DRAWARCH_API_KEY	未設定	/mcp および /files 用のベアラートークンです。インターネットに公開する場合は必須です。
DRAWARCH_APPROVAL_SECRET	プロセスごとにランダム	承認用の HMAC シークレットです。共有デプロイでは固定のシークレットを設定してください。
DRAWARCH_ALLOWED_HOSTS	ローカルホスト	許可する Host 値をカンマ区切りで指定します。
DRAWARCH_ALLOWED_ORIGINS	ローカルオリジン	許可する Origin ホストをカンマ区切りで指定します。
DRAWARCH_PUBLIC_BASE_URL	リスナー URL	サーバーが報告するパブリックベース URL です。

開発

npm ci
npm test                    # 83 tests at the 0.2.0 release
npm run build
npm run sample
npm audit --audit-level=high
npm pack --dry-run

CI マトリックスでは、Windows と Linux 上で Node 20 と 22 を検証し、本番用 Docker イメージをビルドします。コンポーネントの境界とセキュリティのフローについては、docs/ARCHITECTURE.md を参照してください。

プロジェクトのステータス

チャネル	ステータス
ソース	GitHub で公開中
リリース	v0.2.0
コンテナー	ghcr.io/ajey95/drawarch-mcp:0.2.0
npm	[email protected]
公式 MCP Registry	io.github.Ajey95/[email protected]
マネージドリモートサービス	現在提供していません

ロードマップ

• 厳選されたアーキテクチャアセットのカタログとプロバイダーのメタデータを拡充します。
• ホスト主導で視覚的に比較するサイクルをより短くできるよう、プレビュー描画を追加します。
• 構造的なスコアリングを補完する、ピクセル単位の比較を追加します。
• より多くの MCP ホストやコミュニティカタログ向けに、インストール手順を追加します。
• 一般的なコンテナプラットフォーム向けに、再現可能なデプロイ手順を提供します。

アイデアや目的を絞ったプルリクエストを歓迎します。大規模な動作変更や契約変更に着手する前に、issue を作成してください。

コントリビューション

CONTRIBUTING.md を読み、CODE_OF_CONDUCT.md に従ってください。また、生成された出力、認証情報、ライセンスのないサードパーティ製アセットをコミットに含めないでください。

セキュリティ上の懸念については、公開 issue を作成せず、SECURITY.md に記載された非公開の報告手順に従ってください。

ライセンス

DrawArch のソースコードと同梱アセットは、MIT License の下で利用できます。サードパーティ製アセットには、元のプロバイダーのライセンスと帰属表示が引き続き適用されます。

---

わかりやすく、持ち運びやすく、自分で編集できるアーキテクチャ作業のために作られています。