ホームSkillsSkillpeek について
ホーム / Skills / 開発効率化 / Draw.io 図ジェネレーター
開発効率化

Draw.io 図ジェネレーター

awesome-copilot communityMITSkill の言語: 英語
ライセンス確認済みスクリプトを含む中リスク
デモ実行記録 · claude-sonnet-5-5 · 2026年10月
Create a draw.io flowchart for our user sign-up process: the user submits the form, we validate the email, if it is invalid we show an error and go back to the form, if valid we create the account, send a verification email, and finish when the user clicks the link. In this environment I cannot give you file-writing tools, so output the complete .drawio file content in one XML code block, then a short summary of the diagram.
Skill: draw-io-diagram-generator
<mxfile host="Electron" modified="2026-10-07T00:00:00.000Z" version="26.0.0">
  <diagram id="signup-flow" name="User Sign-Up">
    <mxGraphModel dx="1422" dy="762" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="title" value="User Sign-Up Process" style="text;strokeColor=none;fillColor=none;fontSize=18;fontStyle=1;align=center;verticalAlign=middle;html=1;" vertex="1" parent="1">
          <mxGeometry x="260" y="10" width="200" height="30" as="geometry" />
        </mxCell>
        <mxCell id="start" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
          <mxGeometry x="300" y="60" width="120" height="50" as="geometry" />
        </mxCell>
        <mxCell id="form" value="User submits sign-up form" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
          <mxGeometry x="280" y="150" width="160" height="60" as="geometry" />
        </mxCell>
        <mxCell id="validate" value="Email valid?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
          <mxGeometry x="280" y="250" width="160" height="100" as="geometry" />
        </mxCell>
        <mxCell id="error" value="Show error message" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
          <mxGeometry x="540" y="270" width="140" height="60" as="geometry" />
        </mxCell>
        <mxCell id="create" value="Create account" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
          <mxGeometry x="280" y="410" width="160" height="60" as="geometry" />
        </mxCell>
        <mxCell id="send" value="Send verification email" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
          <mxGeometry x="280" y="510" width="160" height="60" as="geometry" />
        </mxCell>
        <mxCell id="click" value="User clicks verification link" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
          <mxGeometry x="280" y="610" width="160" height="60" as="geometry" />
        </mxCell>
        <mxCell id="end" value="End" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
          <mxGeometry x="300" y="710" width="120" height="50" as="geometry" />
        </mxCell>
        <mxCell id="e1" value="" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;" edge="1" source="start" target="form" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e2" value="" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;" edge="1" source="form" target="validate" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e3" value="No" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;" edge="1" source="validate" target="error" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e4" value="Back to form" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" source="error" target="form" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e5" value="Yes" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;" edge="1" source="validate" target="create" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e6" value="" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;" edge="1" source="create" target="send" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e7" value="" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;" edge="1" source="send" target="click" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e8" value="" style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;endFill=1;" edge="1" source="click" target="end" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Summary: The flowchart runs top to bottom. It starts at Start, then User submits sign-up form, then an Email valid? decision.

  • No: Show error message, then an arrow labeled "Back to form" returns to the form step.
  • Yes: Create account, then Send verification email, then User clicks verification link, then End.

Colors: green for start and end, blue for process steps, yellow for the decision, red for the error.

To use it, save the XML as user-signup-flow.drawio. You can open it in VS Code with the draw.io extension, or in the draw.io web or desktop app.

I couldn't run the validator script because I have no file-writing or shell access here. I checked the XML by hand against the skill's checklist:

  • The root cells and ids are correct.
  • Every edge's source and target exist.
  • Every vertex has a geometry.

How it was tried: the trial environment cannot write files, so I had the model output the complete .drawio content in its answer. The model said it could not run the validation script, so afterwards I saved its XML to a file, ran the bundled validation script (it passed) and rendered it with the local draw.io app to confirm the diagram is correct (start, validate email, invalid goes back to the form, valid creates the account, send verification email, end).

できること

draw.io の VS Code 拡張機能、Web 版、デスクトップ版でそのまま開ける、構造的に正しい .drawio ファイル（および .drawio.svg、.drawio.png）の生成をモデルに教えます。フローチャート、システム構成図、シーケンス図、ER 図、UML クラス図、ネットワーク構成図を扱い、レイアウトの方針、図形ライブラリ、スタイル文字列、XML スキーマを参考ファイルとして備え、すぐ使えるテンプレートが 5 つ（フローチャート、UML クラス、構成図、ER、シーケンス）あります。

補助スクリプト

  • add-shape.py：既存の .drawio ファイルに、指定座標で新しい図形を挿入します。--dry-run に対応。
  • validate-drawio.py：ファイルの構造を確認するだけで、変更はしません。

向いている場面

構成、データモデル、フローを編集可能な図としてリポジトリに残すとき。

補足とリスク

中リスク：`add-shape.py` は指定した `.drawio` ファイルを書き換えます（先に `--dry-run` を使い、ファイルをバージョン管理下に置いてください）。`validate-drawio.py` は読み取りのみです。どちらも Python 標準ライブラリだけを使い、ネットワークリクエストは行いません。指示では draw.io の VS Code 拡張機能（`hediet.vscode-drawio`）のインストールが勧められていますが、任意です。試用済み：説明に従ってモデルがサインアップのフローチャートを生成し、同梱の検証スクリプトで問題なく、draw.io デスクトップ版で描画して流れ・分岐・色が正しいことを確認しました。図形の追加、`--dry-run`、検証エラー、ファイルが無い場合も試しました。制限：説明内のスクリプトのパスは `.github/skills/draw-io-diagram-generator/scripts/…` と書かれているため、別の場所に入れた場合は自分で直す必要があります。同梱のシーケンス図テンプレートでは、付箋が最初のメッセージの文字と重なります。

SKILL.md 原文パッケージ内 14 ファイル