← ClaudeAtlas

flowchartlisted

Generate flowchart .drawio from a process description — start/end, process, decision, standard mxGraph, opens directly in draw.io.
KhaiTrang1995/agentic-awesome-kits · ★ 6 · DevOps & Infrastructure · score 71
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