Sequence drawio

Skill MakhimKitov/claude-drawio-skills/skills/sequence-drawio

Generate UML sequence diagrams as native, editable draw.io (.drawio) files. Use when the user wants a sequence diagram, message-flow / interaction diagram, request flow, protocol handshake, or "who-calls-whom over time" diagram — e.g. "draw the login sequence", "sequence diagram for this API flow", "show the message flow between services as draw.io". Produces a .drawio (+ optional PNG/SVG/PDF), fully local. For box-and-arrow architecture / C4 diagrams use the `c4-drawio` skill instead.From its SKILL.md

Install

npx -y skills add MakhimKitov/claude-drawio-skills --skill sequence-drawio

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

3.4 KB, as published. Nobody here has run it

Sequence diagrams → draw.io

Sequence-diagram layout is deterministic (participants across the top, lifelines straight down, messages stacked top-to-bottom by order), so this skill computes coordinates directly — no layout engine needed — and emits native draw.io UML sequence shapes.

Workflow

Step 1 — Build the model as JSON

{
  "title": "User login flow",
  "participants": [
    { "id": "user", "name": "User", "type": "actor" },
    { "id": "web",  "name": "Web App" },
    { "id": "auth", "name": "Auth Service" },
    { "id": "db",   "name": "Sessions DB", "type": "database" },
    { "id": "idp",  "name": "Identity Provider", "type": "external" }
  ],
  "messages": [
    { "from": "user", "to": "web",  "label": "Click login" },
    { "from": "web",  "to": "auth", "label": "POST /login" },
    { "from": "auth", "to": "idp",  "label": "Verify credentials", "async": true },
    { "from": "auth", "to": "auth", "label": "Issue JWT" },
    { "from": "auth", "to": "db",   "label": "Store session", "note": "TTL 24h" },
    { "from": "auth", "to": "web",  "label": "200 OK (JWT)", "return": true },
    { "from": "web",  "to": "user", "label": "Logged in", "return": true }
  ]
}

participant type → header shape: actor (stick figure, dark blue), participant (blue box, default), database (cylinder), external (gray box).
message order = top-to-bottom. Each message is one row.
message kind: default is a solid filled arrow (sync call). Set "return": true for a dashed open arrow (reply), or "async": true for a solid open arrow (fire-and-forget / event). (Equivalently "kind": "sync" | "async" | "return".)
self-message: set from == to → renders a self-call loop on that lifeline.
note: optional yellow note attached under that message.
Participant ids are free-form (safe against reserved names).
Full details: references/model-schema.md. Worked example: examples/login.json.

Write the model to a file, e.g. flow.json.

Step 2 — Generate the .drawio

node <skill-dir>/scripts/seq-to-drawio.js flow.json flow.drawio

Pure Node.js, no other dependencies.

Step 3 — Render (optional)

bash <skill-dir>/scripts/render.sh flow.drawio png 2   # -> flow.drawio.png  (svg/pdf also work)

Then show the user the .drawio (editable in draw.io) and the rendered image.

Prerequisites

Node.js — for the generator (no layout engine, no Docker needed).
Rendering only: draw.io Desktop; render.sh runs it headless with --no-sandbox.

Notes

Sibling to c4-drawio (architecture/C4) — same "native editable .drawio + local render" approach, different diagram type. Column pitch auto-widens for long message labels; tune COL / ROW in scripts/seq-to-drawio.js if needed.
Not yet modeled: activation bars and alt/loop/opt fragments — say so if you need them and they can be added.