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.

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).

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.

SKILL.md original14 files in this package