演示真實執行紀錄 · 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.
试用方式：试用环境不能写文件，所以我让模型把完整的 .drawio 内容输出在回答里。模型说没法运行校验脚本，我事后把它的 XML 存成文件，用随包的校验脚本检查通过，并用本机 draw.io 渲染确认图是对的（开始、校验邮箱、无效回到表单、有效创建账号、发验证邮件、结束）。
它做什麼
教模型產生結構有效的 .drawio 檔（以及 .drawio.svg、.drawio.png），可在 draw.io 的 VS Code 擴充功能、網頁版或桌面版中直接開啟。涵蓋流程圖、系統架構、時序圖、ER 圖、UML 類別圖與網路拓樸，參考檔包括版面策略、形狀庫、樣式字串與 XML 結構說明，另有五個現成範本（流程圖、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/…`，裝在別處要自行修改路徑；內附的時序圖範本中有一個便箋與第一則訊息文字重疊。