| name | mermaid |
| description | **UTILITY SKILL** — Mermaid diagrams for inline flow, sequence, state, ER, Gantt, class, and compact documentation. WHEN: "mermaid flowchart", "sequence diagram", "state diagram", "ER diagram", "inline markdown diagram". DO NOT USE FOR: standalone architecture, network, runtime, as-built, WAF, cost, or compliance outputs (use 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 standalone architecture diagrams, use the
python-diagrams 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 standalone architecture diagrams (use python-diagrams) ·
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 GitHub Markdown preview
- 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 Markdown rendering integration |
Scope Exclusions
Does NOT: generate standalone architecture diagrams · produce Python charts ·
generate Bicep/Terraform · create ADRs · deploy resources · embed Azure
service icons (use python-diagrams).
