How do I install the Flowchart skill?

Run npx skillmds@latest add khaitrang1995/flowchart in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Flowchart safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Flowchart?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Flowchart free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Flowchart?

KhaiTrang1995 (@khaitrang1995) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Flowchart by khaitrang1995 — Agent Skill

Name: Flowchart
Author: KhaiTrang1995

File contents

/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

References

@.claude/rules/drawio-conventions.md
@.claude/rules/naming-conventions.md
@.claude/rules/approval-gate.md
@_templates/flowchart.drawio
Brain: DRAWIO-BRAIN.md

---name: flowchartdescription: Generate flowchart .drawio from a process description — start/end, process, decision, standard mxGraph, opens directly in draw.io.---# /flowchart — Generate Flowchart (draw.io)## When to useVisualize 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 stepsIdentify 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 XMLUse `_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 alsoNeed 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`

Frequently asked questions

Flowchart