テキストから編集可能な.drawio図へ、アーキテクチャダイアグラムやフローチャートを自動生成する
中辛 の解説
自然言語入力またはソースコード、インフラストラクチャ設定から、編集可能で保守しやすい.drawio形式のアーキテクチャモデルを生成するツールです。テキストプロンプトから図を作成する際、レイアウト計画→XML生成→PNG出力→自動チェック→修正のフローを実行し、最大2ラウンドまで重なりやラベル問題を解決します。Terraform・Kubernetes・docker-composeなどのIaC設定、Python/JavaScript/Go/Rustコードベース、SQLスキーマ、OpenAPI、AsyncAPI、Protocol Buffers、GraphQL、GitHub Actionsなど16種類のソースから図を自動抽出できます。マーメイド記法にも対応し、マインドマップ・ガント・タイムライン・カンバンなど28種類のダイアグラムタイプをネイティブ.drawio形式に変換します。draw.ioデスクトップCLI(バージョン30以上推奨)とドロー・アイオスキルをインストール後、Claude Code・Cursor・Copilot・OpenClawなどのAIエージェントから利用できます。
こんなリポジトリです
こんなときに便利です
- 開発チームがテキスト説明からマイクロサービスアーキテクチャ図を自動生成し、ドキュメント化時間を短縮する
- DevOpsエンジニアがTerraformまたはKubernetesのライブ設定から現在のインフラストラクチャ図を自動抽出し、ドリフト検出や運用管理に利用する
- 開発者が既存Pythonコードベースから継承階層図を生成し、リファクタリングや設計レビュー時の参照資料として活用する
主な機能
ほかとの違い
手動レイアウト調整を保持しながらソース変更を同期するincremental sync機能、実行中のインフラから自動生成可能な点、13カテゴリ・複数ダイアグラムタイプ対応と豊富な実装支援機能(アーキテクチャルール検証・故障伝播シミュレーション・ストーリーウォークスルー生成)で他の図自動生成ツールと差別化される
このリポジトリの作り方
はじめてですか? むずかしくありません — 上から順にたどれば、自分の環境で動かして味見できます。
準備するもの
- draw.ioデスクトップCLI バージョン30以上(マーメイド変換とELKレイアウト機能に必須)
- Graphviz(自動レイアウト機能に必須、オプション)
すぐに始める
- draw.ioデスクトップCLIをインストール(macOSの場合)
brew install --cask drawio
- インストール確認
drawio --version
- ドロー・アイオスキルを追加
npx skills add Agents365-ai/drawio-skill -g
- Claude Code、CursorなどのAIエージェントで、図を生成したいテキストを入力
Draw a microservices e-commerce architecture with Mobile/Web/Admin clients,
API Gateway, Auth/User/Order/Product/Payment services, Kafka, and databases.
- スキルが.drawio XMLを生成し、PNG出力をチェック、修正を実行します。フィードバックに応じて最大5ラウンド反復できます。
ギット飯トライで味見
入れるのが面倒で少し不安だったなら — 安全スキャンからインストールまで、ターミナル一行で終わります。
ターミナルに貼り付ければ、ギット飯の安全スキャン → 隔離フォルダへ clone → インストール → 実行方法の案内まで自動です。はじめてでも大丈夫 — この一行だけです。
npx gitbap-try Agents365-ai/drawio-skill
Node.js さえあれば、インストールなしで動きます · ギット飯トライとは? →
スター推移 · 7日
確認日時
使いやすさ · まねしやすいか
- ゆるいライセンス
- テストあり
- サンプル集
- 最近の更新
- AGENTS.md
- llms.txt
- テンプレート
最近の更新あり · 2026 年に作成
「企画・設計」 こういうリポジトリを毎週受け取りませんか?
毎週月曜の朝、選んだ一膳だけ。広告なし · いつでも解除。
自分のリポジトリですか? README にギット飯バッジを貼る
[](https://www.gitbap.com/r/Agents365-ai/drawio-skill)Claude からそのまま使う — ギット飯のつなぎ方
ギット飯を Claude につなぐと、こうしたリポジトリを Claude・Cursor・Codex から直接さがして試せます。
Claude の設定 → コネクタにこのアドレスを貼り付け。
https://www.gitbap.com/api/mcpプラグインを入れると /gitbap-trending·/gitbap-try のスラッシュコマンドで、その場でリポジトリを試せます。Claude Code で下の 2 行を順に実行してください。
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI が README をもとに要約しました · 原文を見る