演示真实运行记录 · 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/…`，装到别处要自己改路径；自带的时序图模板里有一个便签与第一条消息文字重叠。