flowchartlisted
Install: claude install-skill KhaiTrang1995/agentic-awesome-kits
# /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).
- E