| name | mermaid |
| description | **UTILITY SKILL** — Mermaid diagrams for inline markdown: flowcharts, sequence, Gantt, class, state, ER. WHEN: "mermaid flowchart", "sequence diagram", "Gantt chart", "state diagram", "ER diagram", "inline markdown diagram". DO NOT USE FOR: Azure-icon architecture diagrams (drawio), WAF/cost charts (python-diagrams). |
| compatibility | Works with VS Code Copilot, Claude Code, and any tool that renders Mermaid in markdown. |
| license | MIT |
| metadata | {"author":"apex","version":"1.0"} |
Mermaid Diagrams
Skill for generating Mermaid diagrams embedded in markdown fences. Mermaid is
used for inline documentation — flowcharts, sequences, state machines, ER
diagrams, Gantt charts. For architecture diagrams with Azure service icons,
use the drawio skill instead.
When to Use Mermaid
- Inline diagrams inside markdown (
.md, .mdx)
- Flowcharts for operational runbooks and process docs
- Sequence diagrams for auth flows and API interactions
- Gantt charts for project plans and maintenance schedules
- State diagrams for lifecycle documentation
- ER diagrams for data model overviews
- Azure resource relationship diagrams from live queries (via
azure-resources Mode B)
Rules
DO: fenced code blocks with mermaid language tag · include theme
directives for dark mode · graph TB (vertical) or graph LR (horizontal) ·
subgraphs for grouping · descriptive connection labels · validate syntax
before committing.
DON'T: use Mermaid for WAF/cost charts (use python-diagrams) · use
Mermaid for primary architecture diagrams with Azure icons (use drawio) ·
omit theme directives · embed Azure service icons.
Steps
- Pick the diagram type — see
references/syntax-cheatsheet.md
- Author inside a triple-backtick
mermaid fence in your markdown
- Add theming and node styles — see
references/styling.md
- Validate — render in VS Code preview or Starlight build
- Commit — the rendered Mermaid stays inline; no separate artifact
Reference Index
| File | When to Load |
|---|
references/syntax-cheatsheet.md | Authoring any diagram type (flowchart, sequence, Gantt, ER, state) |
references/styling.md | Adding theming, node classDef styling, or Astro/Starlight integration |
Scope Exclusions
Does NOT: generate Draw.io architecture diagrams · produce Python charts ·
generate Bicep/Terraform · create ADRs · deploy resources · embed Azure
service icons (use drawio).
