drawio-generator

Draw.io 図生成ツール

ユーザーがブラウザーで開いて編集できる、インタラクティブな draw.io 図を生成します。

対応する図の種類

Draw.io は、ほぼあらゆる種類の図に対応しています。

• 標準：フローチャート、組織図、マインドマップ、タイムライン、ベン図
• ソフトウェア：UML（クラス図、シーケンス図、アクティビティ図、ユースケース図）、ERD、アーキテクチャ図
• クラウド／インフラストラクチャ：AWS、Azure、GCP、Kubernetes、ネットワークトポロジ
• エンジニアリング：電気回路、デジタルロジック、P&ID、フロアプラン
• ビジネス：BPMN、バリューストリーム、カスタマージャーニー、SWOT
• UI/UX：ワイヤーフレーム、モックアップ、サイトマップ
• その他：インフォグラフィック、データフロー、決定木など

フォーマット選択ガイド

フォーマット	最適な用途
Mermaid	フローチャート、シーケンス図、ERD、ガントチャート、状態図、クラス図
CSV	階層データ（組織図）、スプレッドシートからの一括インポート
XML	複雑なレイアウト、正確な配置、カスタムスタイル、アイコン、図形

使用方法

ステップ 1：図に最適なフォーマットを決める

• 標準的な図（フローチャート、シーケンス図、ERD）の多くには Mermaid を使用します
• 組織図のような階層データには CSV を使用します
• 配置を正確に制御する必要がある場合や、カスタム図形を使う場合は XML を使用します

ステップ 2：図のコードを生成する

選択したフォーマットで図のコードを記述します（以下の例を参照）。

ステップ 3：Python スクリプトを実行する

スクリプト scripts/generate_drawio_url.py（この SKILL.md ファイルからの相対パス）を実行して、Markdown リンクを作成します。

フォーマットテンプレート

Mermaid

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]

XML（draw.io ネイティブ形式）

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="2" value="Box" style="rounded=1;fillColor=#d5e8d4;" vertex="1" parent="1">
      <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>

CSV（階層データ）

# label: %name%
# style: rounded=1;whiteSpace=wrap;html=1;
# connect: {"from":"manager","to":"name","invert":true}
# layout: auto
name,manager
CEO,
CTO,CEO
CFO,CEO

重要：XML の整形式性

draw.io XML を生成する場合、出力は整形式の XML でなければなりません。

• **XML コメント内では、二重ハイフン（--）を絶対に使用しないでください。**単一のハイフンを使うか、別の表現にしてください（例：not）
• 属性値内の特殊文字をエスケープしてください（&、<、>、"）

スクリプトの使用方法

スクリプト generate_drawio_url.py は、この SKILL.md ファイルからの相対パスで scripts/ サブディレクトリにあります。コマンドライン引数を指定して実行します。

python scripts/generate_drawio_url.py -t mermaid -c "graph TD\n    A --> B"
python scripts/generate_drawio_url.py --type xml --code "<mxGraphModel>...</mxGraphModel>"
python scripts/generate_drawio_url.py -t csv -c "name,manager\nCEO,\nCTO,CEO"

引数：

• -t, --type：図の種類（必須）。選択肢：mermaid、xml、csv
• -c, --code：図のコード内容（必須）

スクリプトは Markdown リンクを出力します：[図を表示](<URL>)

Markdown リンクをそのままユーザーに提示してください。