mermaid-diagram

Installation
SKILL.md

Mermaid Diagram Creator

Generate .mmd files (or fenced ```mermaid blocks in .md files when embedding in docs).

Reference Files (load as needed)

File Load when...
references/types/<type>.md After choosing diagram type (Step 6). Full syntax, examples, layout tips, line-break rules, and pitfalls for that type.
references/syntax-pitfalls.md Render fails or you need to debug syntax. Covers quoting rules, <br> compatibility matrix (Section 9), reserved words, and common errors.
references/mermaid-theme.md The single theming file. Dark/light mode color guidelines, classDef semantic style recipes (trigger, success, error, ai, decision), and per-diagram-type support notes.
references/render_mermaid.sh The render script. Invoked via bash, not read. See Render & Validate below.
references/examples/ Validated .mmd examples (architecture.mmd, sequence-api.mmd). Review for inspiration or to verify your syntax against known-good patterns.

Customization

To customize brand styles, edit references/mermaid-theme.md — this is the single source of truth for all theming (semantic node styles and dark/light mode color guidelines).


Installs
27
GitHub Stars
9
First Seen
Apr 13, 2026
mermaid-diagram — mgranberry/mermaid-diagram-skill