xiaopixuan/drawio-diagram-skill

Draw.io ダイアグラム スキル

概要

.drawio XML ファイルを生成し、ネイティブの draw.io デスクトップアプリ CLI を使用してローカルで PNG / SVG / PDF / JPG にエクスポートします。

対応フォーマット: PNG、SVG、PDF、JPG — ブラウザ自動化は不要です。

PNG、SVG、PDF エクスポートでは --embed-diagram (-e) をサポートしています。エクスポートされたファイルには図の完全な XML が含まれているため、draw.io で開くと編集可能な図が復元されます。埋め込み XML を示すために、二重拡張子 (name.drawio.png) を使用してください。

共有時のインストール注意事項

このスキルを他のユーザーと共有する場合、SKILL.md だけでなく、drawio-diagram-skill/ フォルダ全体を含めてください。参照される scripts/、references/、スタイル、バンドルヘルパーはワークフローの一部です。

このスキルでは、ローカルでの PNG / SVG / PDF エクスポートに draw.io デスクトップが必要です。diagrams.net ウェブアプリだけではローカル CLI エクスポートには十分ではありません。

推奨インストール方法:

brew install --cask drawio
drawio --version

Homebrew またはコマンドラインからのダウンロードが遅い場合は、draw.io デスクトップを GitHub Releases から手動でダウンロードしてください:

https://github.com/jgraph/drawio-desktop/releases

お使いの OS に適したインストーラを選択してください:

• macOS: .dmg
• Windows: .exe
• Linux: .deb または .rpm (可能な限り snap は避けてください)

インストール後、CLI を確認します:

drawio --version

macOS で drawio が PATH にない場合は、以下を試してください:

/Applications/draw.io.app/Contents/MacOS/draw.io --version

Graphviz はオプションであり、一部の自動レイアウトワークフローでのみ必要です:

brew install graphviz

サンドボックス環境で draw.io CLI が利用できない、またはクラッシュする場合でも、このスキルは .drawio XML と diagrams.net 編集リンクを生成できますが、ローカルでの画像 / PDF エクスポートはサンドボックス外で行う必要があります。

draw.io が欠落している場合のユーザープロンプト

依存関係チェックで draw.io デスクトップがインストールされていない、または drawio / draw.io コマンドが見つからないことが示された場合、「エクスポート不可」とだけ言うのではなく、ユーザーに明確に伝えてください:

你现在没有安装 draw.io Desktop，或当前环境找不到 drawio 命令。我可以给你的 Agent 发送安装命令来安装，也可以由你手动安装。

次に、以下の選択肢を提示します:

• エージェントインストールコマンド: macOS では brew install --cask drawio。
• 手動インストール: draw.io デスクトップを https://github.com/jgraph/drawio-desktop/releases からダウンロードし、.dmg、.exe、.deb、または .rpm をお使いの OS にインストールしてください。
• エクスポートなしで続行: .drawio XML と diagrams.net 編集リンクを生成し、draw.io インストール後にユーザーが PNG / SVG / PDF をエクスポートできるようにします。

期待される出力

保存された .drawio ソースパスと、エクスポートされたすべてのアーティファクトパスを返します。エクスポートが利用できない場合は、.drawio XML パスと使用された特定のフォールバックを返します。ユーザー向けレビューの場合は、図の種類、主要なレイアウト選択、およびエクスポートや検証の制限に関する短いメモを含めてください。

使用すべき場合 / 使用すべきでない場合

このスキルを使用すべき場合: 洗練された正確な図（アーキテクチャ、ネットワーク、厳密な UML、ER 図）、不透明な塗りつぶしが必要なもの、10,000 以上のストック/ブランドシェイプ、スイムレーン、カスタムジオメトリが必要なもの、または編集可能な PNG / SVG / PDF としてエクスポートする場合。

使用せず、他の場所にルーティングすべき場合:

• カジュアルな手書き / ホワイトボードスタイル → excalidraw または tldraw。
• Git で管理され Markdown でレンダリングされるコードとしての図 → mermaid (汎用) または plantuml (UML)。
• 自由形式の無限キャンバススケッチやフリーハンドストローク → tldraw。

レポート形式 / エグゼクティブダイアグラム

ユーザーが 汇报型流程架构图、方案图、管理闭环图、领导汇报图、または組織 / 役割 / メカニズムを説明する図（リテラルなシステムやデータフローではない）を要求した場合、このモードを使用します。

ルール:

• 図をプレーンなフローチャートではなく、セクション化されたナラティブとして扱います。
• 描画前に 2〜4 の水平バンドを計画します（例: 概要、ロールフロー、共有基盤、メカニズム）。
• 各バンド内で統一されたカードサイズを使用し、カードの x / y 位置を揃え、間隔を一定に保ちます。
• カードのタイトル、説明、箇条書きドット、箇条書きテキストを、1 つの大きな段落ではなく、整列したセルに分割します。
• カードを配置する前に、行と列の間に明示的な矢印の通路を確保します。
• 行間の矢印は、行間の空のバンドを通り、ラベルやカードの内容から線が離れるようにウェイポイントを設定します。
• エクスポート前に視覚的階層を検証します: ページタイトル > セクションタイトル > カードタイトル > 本文 > 箇条書き。
• 控えめなレポートスタイルを優先: クリーンな塗りつぶし、明確なセクションマーカー、大きく読みやすいテキスト、装飾的な乱雑さは避けます。

バンドルリソース

ワークフローが以下のいずれかを参照する場合、オンデマンドで読み取ります — いずれも事前にコンテキストに入れておく必要はありません。

ファイル	読み取るタイミング
references/toolbox.md	どのバンドルスクリプトがリクエストに適合するか わからない 場合、または複数のスクリプトを連鎖させたい場合 — 31 のスクリプトすべてをユースケース別にグループ化したマップ（オーサリング / コードインポート / IaC インポート / API スペックインポート / ライブインフラ / 比較 / 注釈 / 逆エクスポート / ユーティリティ）と「私は X を持っている、Y が欲しい → Z を使用」ガイド
references/xml-authoring.md	.drawio XML を手書き しようとしている場合（ワークフローステップ 3） — ファイルスケルトン、シェイプ/エッジセル、コンテナ、接続分散、パレット、スペーシング/グリッドルール。バンドルジェネレーターが XML を書き込む場合は不要
references/mermaid-authoring.md	図が カスタムスタイリング/アイコン不要の標準タイプ（フローチャート、ステート、ガント、マインドマップ、タイムライン、ジャーニー、円グラフなど）で CLI が ≥ v30 の場合 — Mermaid テキストとしてオーサリングし、CLI でネイティブ .drawio に変換（構造のみ、レイアウトは自由）。CLI の ELK --layout パスについても文書化
references/diagram-types.md	ユーザーが特定の図タイプ（ERD、UML クラス、シーケンス、C4、アーキテクチャ、ML/DL、フローチャート、SysML、BPMN、ネットワークトポロジ、スイムレーン）を指定した場合
references/shapes.md + scripts/shapesearch.py	図が 特定のシェイプ を必要とする場合 — クラウドアイコン（AWS / Azure / GCP）、Cisco / Kubernetes / ネットワークシンボル、UML / BPMN / ER / 電気 / P&ID 要素 — または style= 文字列を推測するような場合。shapesearch.py "<keywords>" は 10,000 以上のシェイプの正確な公式スタイルを返します
scripts/aiicons.py	図に AI / LLM ブランド（OpenAI、Claude、Gemini、Mistral、Llama、HuggingFace、Ollama、LangChain など）が含まれる場合 — aiicons.py "<brand>" はブランドロゴの draw.io image スタイルを返します（CDN 経由の lobe-icons、--embed でインライン化）。draw.io には AI ロゴが組み込まれていません。references/shapes.md → 「AI / LLM ブランドロゴ」を参照
references/style-presets.md	ユーザーがスタイルプリセットの学習/保存/一覧表示/デフォルト設定/削除を要求した場合、またはアクティブなプリセットを解決して適用ルールが必要な場合
references/style-extraction.md	学習フロー内にいて、抽出手順が必要な場合（style-presets.md から呼び出される）
references/troubleshooting.md	エクスポートが失敗した、ビジョンが PNG を拒否した、またはレンダリングがおかしい場合
scripts/repair_png.py	-e PNG エクスポートのたびに — draw.io の切り詰められた IEND チャンクを修正します（問題 #8）
scripts/encode_drawio_url.py	CLI が利用できず、ブラウザフォールバックの diagrams.net URL が必要な場合（--edit で編集可能なエディタ URL）
references/autolayout.md	図が大きい、またはレイアウトが重い（依存関係/コールグラフ、コード構造、>〜15 ノード）場合、手動で座標を配置する代わりに Graphviz にノード配置とエッジルーティングを任せたい場合
scripts/pyimports.py · jsimports.py · goimports.py · rustimports.py	ユーザーが Python、JS/TS、Go、または Rust プロジェクト の構造を可視化したい場合 — インポートグラフを抽出（推移削減、オプションの --group コンテナ、サブパッケージでネスト）し、自動レイアウトに使用
scripts/pyclasses.py	ユーザーが Python クラス階層 / クラス図 を必要とする場合 — クラス + 継承エッジを抽出（--group でモジュールごとにボックス化）し、自動レイアウトに使用
scripts/tfimports.py · k8simports.py · composeimports.py	ユーザーが 宣言された インフラ（Terraform .tf、Kubernetes マニフェスト、docker-compose）を可視化したい場合 — リソース/サービス参照グラフを抽出（tf / k8s には公式 AWS / Azure / GCP / K8s アイコン、compose にはサービスボックス + ボリュームシリンダー）し、自動レイアウトに使用
scripts/tfstate.py · dockerimports.py (+ k8simports.py)	ユーザーが 実際に実行/デプロイされているもの を描画したい場合 — terraform show -json（デプロイ状態）、docker inspect $(docker ps -q)（実行中のコンテナ）、または kubectl get all,ing,cm,secret,pvc -o json（実行中のクラスター、k8simports 経由）をパイプし、同じ公式アイコンで実際のトポロジを取得します。references/live-infra.md を参照
scripts/drawiodiff.py	ユーザーが 2 つの図または 2 つのスナップショットを比較/差分 したい場合（「何が変わったか」、インフラのドリフト） — drawiodiff.py old.drawio new.drawio -o diff.json は色分けされたグラフ（追加=緑、削除=赤、変更=オレンジ、同じ=灰色）を出力し、自動レイアウトに使用。セル ID（インポーター/ライブスナップショット出力）または --by-label（手書き）で照合
scripts/timelapse.py	ユーザーが アーキテクチャのタイムラプス / git 履歴を通じてコードベースの構造がどのように進化したか を確認したい場合 — timelapse.py <dir> --importer pyimports は、サンプリングされた各コミットでインポーターを再実行し、自己完結型の HTML プレーヤー（埋め込みフレーム、再生/ステップコントロール）を組み立てます。実際のインポートエッジを持つパッケージに最適（<dir> をモジュールルートに指定）
scripts/explain.py	ユーザーが既存の .drawio を 説明/文書化/要約 したい場合（生成の逆） — explain.py diagram.drawio は構造化された Markdown を出力します: コンポーネントをコンテナ/ティアごとにグループ化、関係（A —label→ B）、マルチページ / C4 の場合はページごとのセクション。README / PR サマリーやテキストのみの読み上げに適しています
scripts/drawio2pptx.py	ユーザーが図から PowerPoint デッキ / スライド を必要とする場合 — drawio2pptx.py diagram.drawio -o deck.pptx は各ページを独自の 16:9 スライド（ページ名がタイトル）に配置するため、マルチページの C4 モデル がすぐにプレゼンテーション可能なデッキになります。python-pptx（pip install python-pptx）+ draw.io CLI が必要
scripts/drawiohtml.py	ユーザーが図の 共有可能なインタラクティブビューア を必要とする場合（パン / ズーム / 検索、draw.io 不要） — drawiohtml.py diagram.drawio -o viewer.html は各ページの SVG を 1 つの自己完結型 HTML にインライン化し、ページタブ、ドラッグパン、ホイールズーム、ノード検索（Enter でサイクル + 中央にマッチ）および 動作するドリルダウンリンク（C4 モデルの data:page/id リンクがタブを切り替える）を備えます。サーバー不要、外部リクエスト不要 — ファイルを誰にでも送信可能
scripts/svgflow.py	ユーザーが アニメーション/「フロー」図（データフロー、移動エッジ）を必要とする場合 — svgflow.py diagram.drawio -o flow.svg は SVG にエクスポートし、すべてのエッジを行進アニメーション（ダッシュが矢印に沿って移動）にします。GitHub / 任意のブラウザでレンダリングされる自己完結型ループ .svg、--speed / --dash / --reverse
scripts/drawio2mermaid.py	ユーザーが .drawio を Mermaid テキストに変換 したい場合（GitHub でレンダリングされる Markdown ファイル用のコードとしての図） — drawio2mermaid.py diagram.drawio は flowchart を出力します（コンテナ → subgraph、エッジラベル保持、シリンダー/菱形シェイプマッピング）、--fenced は ```mermaid でラップ、マルチページ → ページごとに 1 グラフ。構造のみ（スタイル/アイコンは保持されません）
scripts/sqlerd.py	ユーザーが SQL DDL からの ER 図 を必要とする場合 — CREATE TABLE ステートメントを解析し、テーブルごとのノード（PK / FK マーカー付き列）とカラス足 FK エッジを自動レイアウト用に生成
scripts/ciimports.py	ユーザーが CI パイプラインダイアグラム（GitHub Actions ワークフローまたは GitLab CI）を必要とする場合 — ciimports.py <repo-root> は .github/workflows/*.yml + .gitlab-ci.yml を読み取り、ジョブ（ランナー、マトリックスサイズ、再利用可能ワークフロー呼び出し）、needs: 依存関係エッジ、ワークフローごとのトリガーノード、およびステージ/ワークフローコンテナを自動レイアウト用に出力します。PyYAML が必要
scripts/openapiimports.py	ユーザーが OpenAPI / Swagger スペックからの API 図 を必要とする場合 — openapiimports.py spec.yaml は各オペレーションを HTTP メソッドで色分け されたノード（GET 青、POST 緑、PUT/PATCH オレンジ、DELETE 赤）にマッピングし、コンポーネントスキーマごとに 1 ノード、およびオペレーションから使用するスキーマへのエッジ、ネストされたスキーマ間のエッジを追加。--group はタグでボックス化、--no-schemas はエンドポイント面のみ表示、自動レイアウトに供給
scripts/heatmap.py	ユーザーが既存の .drawio を データで色付け したい場合（コスト / レイテンシ / トラフィック / エラー率のヒートマップ） — heatmap.py diagram.drawio -m metrics.csv は各メトリック（CSV key,value または JSON {key:value}）を ID またはラベルでノードにマッチングし、グラデーションに沿って再色付け（`--palette heat
scripts/seqlayout.py	ユーザーが シーケンス図 を必要とする場合 — 参加者 + メッセージを JSON として記述すると、スクリプトがすべてのライフライン/アクティベーション/矢印ジオメトリを決定論的に計算します（手動座標配置不要、Graphviz 不要）
scripts/c4.py	ユーザーが C4 モデル（システムコンテキスト / コンテナ / コンポーネント）を必要とする場合 — レベル JSON を入力として、公式 C4 シェイプ/色とレベル間の クリックでドリルダウン可能なリンク を備えた 1 つのマルチページ .drawio を出力
scripts/relabel.py	ユーザーが既存の .drawio の 言語バリアントまたは一括テキスト置換 を必要とする場合（例: 英語の図をバイリンガル README 用に中国語でラベル付け） — relabel.py diagram.drawio --extract -o labels.json はすべてのラベルを ID 付き JSON マップとしてダンプ、値を翻訳（キーは保持）、その後 relabel.py diagram.drawio --map labels.json -o diagram_cn.drawio でレイアウト/スタイル/ID をそのままにラベルを置換
scripts/restyle.py	ユーザーが 既存の .drawio を再テーマ化 したい場合（「これをダークにする」「この図にコーポレートスタイルを適用する」） — restyle.py diagram.drawio --preset <name> は、すべての頂点塗りつぶし/ストロークを色相によってプリセットパレットに再マッピングし、フォント/追加要素（dark fontColor、エッジ色、背景）を適用し、レイアウト、シェイプ、エッジルーティングはそのままにします。プリセットはステップ 0 と同様に解決されます（ユーザーディレクトリ、次に組み込み）
scripts/validate.py	.drawio を生成した後（特に自動レイアウト後または大規模な手動配置図の場合）、エクスポート前に高速な決定論的構造リント（ぶら下がりエッジ、重複/予約済み ID、壊れた親、重なり）を実行したい場合。