
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 mermaidAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 3 |
|---|---|
| repo stars | ★ 19 |
| Last updated | March 1, 2026 |
| Repository | haowjy/orchestrate ↗ |
What it does
Enforces Mermaid syntax rules and validates diagrams with a bundled check script when writing diagrams in documentation.
Files
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)| B3. 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 ✓] --> B6. 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:#fffFor 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
end7. 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=falseQuick Reference: When to Quote
| Context | Needs quotes? | Example |
|---|---|---|
| Simple text only | No | A[Hello World] |
Contains () | Yes | A["Config (optional)"] |
Contains [] | Yes | A["items list"] (avoid [] entirely) |
Contains <br/> | Avoid | Use \n instead |
| Contains emoji | Yes | A["Done ✓"] |
Contains " | Escape | A["Say 'hello'"] |
| Edge with specials | Yes | `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/#!/usr/bin/env bash
# Validate Mermaid diagrams in markdown files.
# Usage:
# check-mermaid.sh # all .md files recursively from cwd
# check-mermaid.sh path/to/file.md # specific file(s)
# check-mermaid.sh docs/features/ # specific directory
#
# Requires: npx @mermaid-js/mermaid-cli (auto-installed on first run)
set -euo pipefail
# Use current working directory as root for relative paths
ROOT_DIR="$(pwd)"
# Colors
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[0;33m'
NC='\033[0m' # No Color
# Temp directory for extracted diagrams
WORK_DIR=$(mktemp -d)
trap 'rm -rf "$WORK_DIR"' EXIT
# Collect files to check
files=()
if [ $# -eq 0 ]; then
# Default: all .md files recursively from cwd
while IFS= read -r -d '' f; do
files+=("$f")
done < <(find "$ROOT_DIR" -name '*.md' -not -path '*/node_modules/*' -not -path '*/.git/*' -print0 2>/dev/null || true)
else
for arg in "$@"; do
if [ -d "$arg" ]; then
while IFS= read -r -d '' f; do
files+=("$f")
done < <(find "$arg" -name '*.md' -not -path '*/node_modules/*' -print0)
elif [ -f "$arg" ]; then
files+=("$arg")
else
echo -e "${YELLOW}WARN: skipping '$arg' (not found)${NC}"
fi
done
fi
if [ ${#files[@]} -eq 0 ]; then
echo "No markdown files found."
exit 0
fi
# Extract mermaid blocks from a file.
# Outputs: one temp file per block, prints the temp file path + source line number.
extract_mermaid_blocks() {
local file="$1"
local in_block=false
local block_start=0
local block_num=0
local block_file=""
local line_num=0
while IFS= read -r line || [[ -n "$line" ]]; do
line_num=$((line_num + 1))
if [[ "$line" =~ ^'```mermaid' ]] && [ "$in_block" = false ]; then
in_block=true
block_start=$line_num
block_num=$((block_num + 1))
block_file="$WORK_DIR/block_${block_num}.mmd"
> "$block_file"
continue
fi
if [[ "$line" =~ ^'```' ]] && [ "$in_block" = true ]; then
in_block=false
echo "${block_file}:${block_start}"
continue
fi
if [ "$in_block" = true ]; then
echo "$line" >> "$block_file"
fi
done < "$file"
}
total=0
passed=0
failed=0
failed_details=()
for file in "${files[@]}"; do
rel_path="${file#"$ROOT_DIR"/}"
# Extract blocks
while IFS= read -r block_info; do
[ -z "$block_info" ] && continue
block_file="${block_info%%:*}"
block_line="${block_info##*:}"
total=$((total + 1))
# Validate with mmdc — render to svg to confirm parse succeeds
if npx --yes @mermaid-js/mermaid-cli -q -i "$block_file" -o "$WORK_DIR/out.svg" 2>"$WORK_DIR/err.txt"; then
passed=$((passed + 1))
else
failed=$((failed + 1))
# Extract the useful error lines (skip npx boilerplate)
err_msg=$(grep -v "^npm warn" "$WORK_DIR/err.txt" | head -5)
failed_details+=("${RED}FAIL${NC}: ${rel_path}:${block_line}")
if [ -n "$err_msg" ]; then
failed_details+=(" $err_msg")
fi
fi
# Clean up per-block files
rm -f "$block_file" "$WORK_DIR/out.svg"
done < <(extract_mermaid_blocks "$file")
done
echo ""
if [ $total -eq 0 ]; then
echo "No Mermaid diagrams found."
exit 0
fi
# Print failures
for detail in "${failed_details[@]}"; do
echo -e "$detail"
done
if [ $failed -gt 0 ]; then
echo ""
fi
if [ $failed -eq 0 ]; then
echo -e "${GREEN}OK${NC}: all $total Mermaid diagrams valid"
else
echo -e "${RED}FAILED${NC}: $failed/$total diagrams have errors"
exit 1
fi