Draw.io Diagram Generator Skill: valid .drawio files, templates and validation

DemoReal run · claude-sonnet-5-5 · October 2026

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 渲染确认图是对的（开始、校验邮箱、无效回到表单、有效创建账号、发验证邮件、结束）。

What it does

Teaches the model to generate .drawio files (and .drawio.svg and .drawio.png) with valid mxGraph XML that open in the draw.io VS Code extension, the web app or the desktop app. It covers flowcharts, system architecture, sequence diagrams, ER diagrams, UML class diagrams and network topology, with layout strategy, shape libraries, style strings and the XML schema as reference files, plus five ready templates (flowchart, UML class, architecture, ER, sequence).

Helper scripts

add-shape.py inserts a new shape into an existing .drawio file at given coordinates; it has a --dry-run option.
validate-drawio.py checks a file's structure without changing it.

Good for

Documenting architecture, data models and flows as editable diagrams in a repository.

Notes & risks

Medium risk: `add-shape.py` rewrites the `.drawio` file you point it at (use `--dry-run` first and keep the file in version control), `validate-drawio.py` only reads. Both use only the Python standard library and make no network requests. The instructions suggest installing the draw.io VS Code extension (`hediet.vscode-drawio`), which is optional. Test-run: the model generated a sign-up flowchart from the instructions; the bundled validator passed it and the draw.io desktop app rendered it correctly (flow, branches and colors). I also tested adding a shape, `--dry-run`, a validator failure and a missing file. Limits: the script paths in the instructions are written as `.github/skills/draw-io-diagram-generator/scripts/...`, so change them if installed elsewhere; the bundled sequence-diagram template has a note overlapping the first message label.