/flowchart

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

Boost this skill

khaitrang1995@khaitrang1995

GitHub

From plugin

agentic-awesome-kits

932 skills

Install

$ npx -y skills add KhaiTrang1995/agentic-awesome-kits --skill flowchart --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/flowchart

Context preview

The summary Claude sees to decide when to auto-load this skill.

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

SKILL.md

flowchart.SKILL.md

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`).