# Flowchart

> Generate flowchart .drawio from a process description — start/end, process, decision, standard mxGraph, opens directly in draw.io.

- Skill: `khaitrang1995/flowchart` (Agent Skill)
- Install (CLI): `npx skillmds@latest add khaitrang1995/flowchart`
- Raw SKILL.md: https://api.skillmd.com/api/skills/khaitrang1995/flowchart/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: KhaiTrang1995 (https://skillmd.com/u/khaitrang1995)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/khaitrang1995/flowchart

---


# /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`