| name | flowchart |
| description | Generate flowchart .drawio from a process description — start/end, process, decision, standard mxGraph, opens directly in draw.io. |
| user-invocable | true |
| argument-hint | <process description> [--direction top-down|left-right] |
/flowchart — Generate Flowchart (draw.io)
When to use
Visualize a business process or control flow (business process, algorithm, approval flow) as a professional diagram editable in draw.io.
Input examples
/flowchart leave request approval: submit request → manager approve → HR approve → confirm
/flowchart container search flow: enter keyword → validate → query DB → results? → display / empty state
/flowchart --direction left-right CI/CD process: push code → build → test → deploy
Workflow
Phase 1 — Analyze steps
Identify steps by type:
- Start/End: start/end points (ellipse)
- Process: action (rounded rectangle)
- Decision: Yes/No or multi-branch (rhombus)
- Input/Output: data in/out (parallelogram, if any)
Phase 2 — Layout (L3 preview)
Print node list + planned positions as a table before generating XML:
# | Type | Content | Position (x,y)
1 | Start | Start | (360, 40)
2 | Process | Enter keyword | (360, 140)
3 | Decision | Keyword valid? | (360, 260)
...
User reviews layout → Phase 3.
Phase 3 — Generate XML
Use _templates/flowchart.drawio as the frame, apply:
- Core shapes + colors per
drawio-conventions.md sections 2–3
- Grid 20px, standard spacing section 4
- Orthogonal edges with explicit
exitX/exitY/entryX/entryY, Yes/No labels on decision branches
Phase 4 — Approval L1 → Write
Mandatory rules
- Always exactly 1 Start and at least 1 End (multiple Ends allowed for different outcomes).
- Every Decision MUST label all outgoing branches (Yes/No, or specific case names).
- NO more than 15 nodes in one diagram — if the process is longer, split into child flowcharts + references (
docs/diagrams/{feature}/flowchart-{sub-slug}.drawio).
- Consistent flow direction (
--direction default top-down).
Output
docs/diagrams/{feature}/flowchart-{slug}.drawio
See also
Need sequence diagram, ERD, UML class, C4 model, or processes >15 steps that need auto-layout instead of manual child-flowchart splits → use /diagram (more powerful, requires draw.io desktop CLI).
References
- @.claude/rules/drawio-conventions.md
- @.claude/rules/naming-conventions.md
- @.claude/rules/approval-gate.md
- @_templates/flowchart.drawio
- Brain:
DRAWIO-BRAIN.md