ci
Generate a CI/CD pipeline — build, test, security scan, deploy. Supports GitHub Actions, GitLab CI, Bitbucket Pipelines.
@khaitrang1995Install SkillDevelopment
Skill
/flowchart
Generate flowchart .drawio from a process description — start/end, process, decision, standard mxGraph, opens directly in draw.io.
Claude Code
$ npx -y skills add KhaiTrang1995/agentic-awesome-kits --skill flowchart --agent claude-code
Codex
$ npx skills add KhaiTrang1995/agentic-awesome-kits --skill flowchart -a codex -y
Cursor
$ npx skills add KhaiTrang1995/agentic-awesome-kits --skill flowchart -a cursor -y
Gemini CLI
$ npx skills add KhaiTrang1995/agentic-awesome-kits --skill flowchart -a gemini-cli -y
GitHub Copilot
$ npx skills add KhaiTrang1995/agentic-awesome-kits --skill flowchart -a github-copilot -y
OpenCode
$ npx skills add KhaiTrang1995/agentic-awesome-kits --skill flowchart -a opencode -y
Windsurf
$ npx skills add KhaiTrang1995/agentic-awesome-kits --skill flowchart -a windsurf -y
SKILL.md
flowchart.SKILL.mdname: 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`).
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`
Read more
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`).
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`
Stats
10
Stars
5
Forks
Maintained
Maintenance
Python
Language
Last commit
Created
Ships withagentic-awesome-kits
Reusable AI Skill Kits for coding agents (Claude Code and any other subagent/slash-command-compatible tool).
1032 skills
Stars on GitHub
Momentum
- stars in total
- 10
Other skills on agentic-awesome-kits.
@khaitrang1995Install Skillcompose
Generate docker-compose.yml — multi-service, network, volumes, healthcheck.
@khaitrang1995Install Skilldockerfile
Generate an optimized Dockerfile — multi-stage build, security hardening, small image size.
@khaitrang1995Install Skillsecret
Generate Swarm secret/config management — external secret references, versioned rotation, config mounts.
@khaitrang1995Install Skillservice
Generate or update a single Swarm service definition — scaling, resource limits, rolling update policy, health check.
@khaitrang1995Install Skillstack
Generate a Docker Swarm stack file — services, deploy policy (replicas, placement, rolling update/rollback), overlay network.
@khaitrang1995Install SkillMore skills from other plugins.
Auto-invoked
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…
@obraInstall Skillask-matt
Ask which skill or flow fits your situation. A router over the skills in this repo.
@mattpocockInstall SkillAuto-invoked
Questions about flowchart.
- Which coding agents can use flowchart?
- flowchart installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.