Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
haowjy avatar

Mermaid

  • 3 installs
  • 19 repo stars
  • Updated March 1, 2026
  • haowjy/orchestrate

Enforces Mermaid syntax rules and validates diagrams with a bundled check script when writing diagrams in documentation.

About

Provides syntax rules for writing valid Mermaid diagrams, such as quoting labels with special characters, plus a co-located validation script. A developer uses it when creating or editing Mermaid diagrams to avoid parse errors.

  • Rules for quoting labels and edge labels with special characters
  • Validates blocks with scripts/check-mermaid.sh

Mermaid by the numbers

  • 3 all-time installs (skills.sh)
  • Ranked #1,268 of 1,879 Documentation skills by installs in the Skillselion catalog
  • Data as of Aug 2, 2026 (Skillselion catalog sync)
npx skills add https://github.com/haowjy/orchestrate --skill mermaid

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs3
repo stars19
Last updatedMarch 1, 2026
Repositoryhaowjy/orchestrate

What it does

Enforces Mermaid syntax rules and validates diagrams with a bundled check script when writing diagrams in documentation.

Files

SKILL.mdMarkdownGitHub ↗

Mermaid Diagram Rules

Always follow these rules when writing Mermaid diagrams. After writing or editing any Mermaid block, validate with the co-located script: scripts/check-mermaid.sh <file>.

Syntax Rules (Critical)

1. Always quote labels that contain special characters

Any label with (), [], <>, ", ,, <br/>, or emoji must be wrapped in ["..."]:

%% ✅ GOOD — quoted labels
A["Turn 1: user"] --> B["blocks list"]
C["UI Panels (Thread, Tool)"]

%% ❌ BAD — unquoted special chars cause parse errors
A[Turn 1: user<br/>"Write a story"] --> B[blocks[]]
C[UI Panels (Thread, Tool)]

2. Quote edge labels that contain special characters

Edge labels with (), <>, <br/>, or [] must be quoted with |"..."|:

%% ✅ GOOD
A -->|"StreamEvents (Delta, Block)"| B
A -->|"JSON DTOs"| B

%% ❌ BAD — parentheses in edge labels
A -->|StreamEvents<br/>(Delta, Block)| B
A -->|JSON (DTOs)| B

3. Never use <br/> inside labels — use multiline with \n or separate lines

%% ✅ GOOD — no <br/>
A["Turn 1\nuser message"]

%% ❌ BAD — <br/> inside labels often breaks
A["Turn 1<br/>user message"]

Note: <br/> works in some Mermaid versions but not all. \n is safer.

4. Escape or avoid [] inside node text

%% ✅ GOOD
Store -->|"blocks list"| UI["Chat UI"]

%% ❌ BAD — nested [] conflicts with node shape syntax
Store -->|blocks[]| UI[Chat UI]

5. No emoji in node IDs or unquoted labels

%% ✅ GOOD
A["Step complete ✓"] --> B

%% ❌ BAD — emoji in unquoted context
A[Step ✓] --> B

6. Do not hardcode colors — rely on Mermaid's built-in themes

Hardcoded style / classDef colors override Mermaid's theme engine and break when switching between light and dark mode. Let the built-in dark / default themes handle node colors.

%% ✅ GOOD — no hardcoded colors, theme handles it
A[Service] --> B[Database]

%% ❌ BAD — hardcoded fill/color overrides theme
style A fill:#2d7d2d,color:#fff
classDef foo fill:#1a5276,color:#fff

For sequence diagram rect grouping, use near-transparent fills so they work in both themes:

rect rgba(128, 128, 128, 0.08)
    Note over A,B: Phase label
end

7. Semicolons in sequence diagrams

Sequence diagram statements must end with a newline, not a semicolon followed by more statements on the same line:

%% ✅ GOOD
Note over A: First
Note over A: Second

%% ❌ BAD — multiple statements on one line with semicolons
Note over A: First; isLoading=false

Quick Reference: When to Quote

ContextNeeds quotes?Example
Simple text onlyNoA[Hello World]
Contains ()YesA["Config (optional)"]
Contains []YesA["items list"] (avoid [] entirely)
Contains <br/>AvoidUse \n instead
Contains emojiYesA["Done ✓"]
Contains "EscapeA["Say 'hello'"]
Edge with specialsYes`A -->\

Validation

The validation script lives at scripts/check-mermaid.sh within this skill directory. It extracts each `mermaid block, validates it with mmdc, and reports file + line number for failures.

# Validate specific file
scripts/check-mermaid.sh path/to/file.md

# Validate all .md files recursively from cwd
scripts/check-mermaid.sh

# Validate a directory
scripts/check-mermaid.sh docs/features/

Related skills

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.