drawio

drawio — テキストからプロ品質の図を作成

drawio-skill（Agents365-ai、 MIT）は、自然言語の説明を編集可能な .drawio XML に変換し、 draw.io のネイティブデスクトップ CLI を通じて PNG／SVG／PDF／JPG に エクスポートします。MCP サーバーもバックグラウンドデーモンも不要です。 既存のコードベースを、自動レイアウトされた構造図に変換することもできます。 このスキルは jeo-skills のラッパーであり、draw.io を使う場面や、 CLI とスキルのインストール方法（プラグインとしての導入を含む）、 そして計画 → 生成 → 自己チェック → 反復 → エクスポートのループの 進め方を説明します。

このスキルを使う場面

• ユーザーが洗練された正確な図（アーキテクチャ、ネットワーク トポロジー、マイクロサービス、クラウド（AWS／Azure／GCP）、厳密な UML クラス図／シーケンス図、ER 図、フローチャート、マインドマップ、 組織図、ML／DL モデル）を求めている
• ユーザーが既存のコードベースを可視化したい（Python／JS-TS／Go／Rust の インポートグラフや Python のクラス継承階層を、手動で座標を指定せずに作成）
• ユーザーが、推測した shape=mxgraph.* の空のボックスではなく、 ベンダー公式の実際のアイコン（AWS Lambda、Kubernetes のポッド、 Cisco、BPMN など）を必要としている
• ユーザーが draw.io に搭載されていない AI／LLM ブランドのロゴ （OpenAI、Claude、Gemini、Mistral、Llama、Ollama、LangChain など）を 必要としている
• ユーザーが、出力を PNG／SVG／PDF にエクスポートし、編集可能な状態で保ち 必要に応じて数回にわたって自己チェックと改善を行いたい
• ユーザーが draw.io／.drawio ファイルを明示的に求めている

このスキルを使わない場面

• ユーザーがカジュアルな手描き風／ホワイトボード風の見た目を求めている → excalidraw-skill または tldraw-skill（同系列の上流スキル）を使用します
• ユーザーが git で管理し、Markdown でレンダリングされる コードとして管理する図を求めている → mermaid（汎用）または plantuml（CI での UML）を使用します
• ユーザーがスライドデッキ／プレゼンテーション資料を求めている → presentation-builder を使用します
• ユーザーが Claude プラグイン全般の閲覧／インストールだけを求めている → ccpi-marketplace を使用します
• ユーザーがAI による画像／動画生成（図ではなく）を必要としている → god-tibo-imagen／video-production を使用します

前提条件

要件	備考
draw.io デスクトップ CLI	エクスポートに必要です。drawio --version が動作する必要があります
画像認識に対応したエージェント	自己チェックの手順では、レンダリングされた PNG を読み取り、レイアウトを自動修正します
Graphviz（任意）	コードベースの自動レイアウトでのみ使用します（brew install graphviz／apt install graphviz）
Node.js（任意）	npx skills インストーラーにのみ必要です。スキル自体には不要です

手順

ステップ 1 — draw.io デスクトップ CLI をインストールする

プラットフォーム	コマンド
macOS	brew install --cask drawio
Windows	drawio-desktop のリリースからインストーラーをダウンロードします
Linux	リリースから .deb／.rpm を取得します。ヘッドレス環境では sudo apt install xvfb を実行します

drawio --version で確認します。WSL2 では、CLI は /mnt/c 経由で 呼び出される Windows デスクトップの exe です。スキルがこれを自動検出します。

ステップ 2 — スキルをインストールする

# Any agent (Claude Code, Cursor, Copilot, …) — upstream bundle
npx skills add Agents365-ai/365-skills -g

# Claude Code plugin marketplace (upstream)
> /plugin marketplace add Agents365-ai/365-skills
> /plugin install drawio

# Manual install
git clone https://github.com/Agents365-ai/drawio-skill.git \
  ~/.claude/skills/drawio-skill

このラッパーの jeo-skills プラグインとしてのインストールについては、 ステップ 8 を参照してください。

ステップ 3 — テキストから図を生成する

インストール後は、作成したい図を説明するだけです。スキルがレイアウトを 計画し、.drawio XML を生成して下書きをエクスポートし、自己チェックと 反復を行います。

Create a microservices e-commerce architecture with Mobile/Web/Admin
clients, an API Gateway (auth + rate limiting + routing), Auth/User/Order/
Product/Payment services, a Kafka queue, a Notification service, and
User DB / Order DB / Product DB / Redis Cache / Stripe API.

Draw a Transformer encoder-decoder: 6-layer encoder with self-attention,
6-layer decoder with cross-attention, input embeddings (batch × 512 × 768),
positional encoding, final output projection. Annotate tensor shapes and
color-code by layer type.

ステップ 4 — 既存のコードベースを可視化する

同梱の抽出 → 自動レイアウト → 検証パイプラインを使って、コードから構造図を 作成します（手動で座標を指定する必要はありません）。

# Import graph — Python / JS-TS / Go / Rust
python3 scripts/pyimports.py   myproject --group -o graph.json
python3 scripts/jsimports.py   ./src     --group -o graph.json
python3 scripts/goimports.py   ./module  --group -o graph.json
python3 scripts/rustimports.py ./crate   --group -o graph.json

# Python class-inheritance hierarchy
python3 scripts/pyclasses.py   mypackage --group -o graph.json

# any extractor → auto-layout → editable .drawio
python3 scripts/autolayout.py  graph.json -o diagram.drawio

自動レイアウトでは、Graphviz の配置と直交ルーティング、 推移的簡約（より長い経路から推測できるエッジを削除）、 ネストされたモジュールコンテナー向けの --group を使用します。 ビジュアルによる自己チェックの前に、validate.py が .drawio の リンティング（未接続のエッジ、重複 ID、重なり）を行います。

ステップ 5 — 実際の図形と AI／LLM ロゴを解決する

# Search 10,000+ official AWS/Azure/GCP/Cisco/K8s/UML/BPMN shapes
python3 scripts/shapesearch.py "aws lambda" --limit 5

# Resolve one of 321 AI/LLM brand logos (lobe-icons, MIT)
python3 scripts/aiicons.py "claude" --json      # CDN-referenced (default)
python3 scripts/aiicons.py "openai" --embed     # self-contained data URI

shape= 文字列を推測する代わりにこれらを使用すると、ベンダーアイコンが 空のボックスに置き換わることなく、正しく表示されます。

ステップ 6 — セルフチェック、反復、スタイル

ワークフローは、依存関係の確認 → レイアウトの計画 → XML の生成 → 下書き PNG のエクスポート → セルフチェック＋自動修正（最大 2 ラウンド） → ユーザーへの提示 → 5 ラウンドのフィードバックループ → 最終エクスポートの順に進みます。組み込みのスタイルプリセットは default、corporate、handdrawn です。また、このスキルは .drawio ファイルまたはフラット画像から新しいスタイルを学習できます（承認後にのみ保存されます）。

Draw a microservices architecture using my "corporate" style
Learn my style from ~/diagrams/brand.drawio as "mybrand"

ステップ 7 — 適切な図の種類を選ぶ

カテゴリ	例	主な機能
アーキテクチャ	マイクロサービス、クラウド、ネットワーク、デプロイメント	階層ごとのスイムレーン、ハブ中心の戦略
ML／ディープラーニング	Transformer、CNN、LSTM、GRU	テンソル形状の注釈、レイヤーの色分け
フローチャート	プロセス、ワークフロー、決定木、状態機械	意味に応じた図形（判断を表すひし形）
UML	クラス、シーケンス	継承／コンポジションの矢印、ライフライン
データ	ER、データフロー（DFD）	テーブルコンテナ、PK／FK 表記
その他	組織図、マインドマップ、ワイヤーフレーム	—

ステップ 8 — jeo-skills と並行してプラグイン形式でインストール

このラッパーフォルダーは、標準の jeo-skills フローを通じてプラグインとしてインストールできます。これにより、サポートされている任意のエージェントランタイムで、ルーティングガイド、リファレンス、インストーラーがディスクに配置されます。

# Project install (writes into .agents/skills/drawio/)
npx skills add https://github.com/akillness/jeo-skills --skill drawio

# Global install for every detected agent
npx skills add -g https://github.com/akillness/jeo-skills --skill drawio

# Target specific agents
npx skills add -g https://github.com/akillness/jeo-skills --skill drawio -a claude-code -a codex -y

このスキルには scripts/install.sh も含まれています。これは、プラットフォームに応じて draw.io CLI を検出／インストールし、上流の drawio-skill バンドルを取得するワンショットヘルパーです。コマンドとフラグの完全なリファレンスについては、references/usage.md を参照してください。

出力形式

ユーザーが drawio の使い方を尋ねた場合は、簡潔な概要を返します。

# drawio Routing Brief

## Scope
- Task: text-to-diagram | visualize-codebase | shape/logo-resolve | restyle
- Diagram type: architecture | uml | sequence | flowchart | erd | ml-dl | other
- Export target: png | svg | pdf | jpg | drawio-only

## Recommended next move
- install-cli | install-skill | generate | extract+autolayout | shapesearch | aiicons | refine

## Why
- 2-3 bullets grounded in the user's request

## Route-outs
- `mermaid` / `plantuml` for diagrams-as-code in git
- `excalidraw` / `tldraw` for hand-drawn/whiteboard looks
- `presentation-builder` for slide decks

ベストプラクティス

1. まず CLI を確認する — エクスポートを約束する前に drawio --version を実行します。CLI がなければ、出力できるのは .drawio XML のみで、PNG／SVG／PDF は出力できません。
2. 推測せず図形を検索する — shapesearch.py を使うと、正確な公式スタイル文字列を特定できます。shape=mxgraph.* の名前を推測すると、描画結果が空白になります。
3. LLM アプリの図には aiicons.py を使う — draw.io には最新の AI／LLM ロゴが含まれていません。--embed を指定すると、オフラインでの描画用にアイコンがインライン化されます。
4. セルフチェックを実行する — 描画された PNG を読み取り、重なりやラベルのクリッピングを自動修正することが、このスキルの品質を高める主な手段です。
5. 整理してからレイアウトする — コードベースでは、推移的縮約により、密集した複雑なグラフを自動レイアウト前に追跡可能なグラフへ変換できます。
6. 適切なファミリーを選ぶ — Git で追跡し、Markdown に埋め込める図には mermaid／plantuml を選びます。draw.io は、見栄えがよく、エクスポート可能で、アイコンを豊富に使った成果物に適しています。

リファレンス

• 上流リポジトリ：https://github.com/Agents365-ai/drawio-skill
• オンラインドキュメント：https://agents365-ai.github.io/drawio-skill/
• 使用方法の解説：docs/USAGE.md
• CLI インストール手順：docs/INSTALL_CLI.md
• 自動レイアウトのリファレンス：references/autolayout.md
• 図形チートシート：references/shapes.md
• トラブルシューティング（WSL2 を含む）：references/troubleshooting.md
• ローカルインストーラー：scripts/install.sh
• ローカルの使用方法／フラグのリファレンス：references/usage.md
• 関連する図作成スキル：excalidraw-skill、mermaid、plantuml、tldraw-skill
• 関連する jeo-skills：../presentation-builder/SKILL.md、../cli-anything/SKILL.md、../ccpi-marketplace/SKILL.md
• ライセンス：MIT（上流の LICENSE を参照）