<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.
试用方式：试用环境不能写文件，所以我让模型把完整的 .drawio 内容输出在回答里。模型说没法运行校验脚本，我事后把它的 XML 存成文件，用随包的校验脚本检查通过，并用本机 draw.io 渲染确认图是对的（开始、校验邮箱、无效回到表单、有效创建账号、发验证邮件、结束）。
できること
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/…` と書かれているため、別の場所に入れた場合は自分で直す必要があります。同梱のシーケンス図テンプレートでは、付箋が最初のメッセージの文字と重なります。