mermaid

Original：🇺🇸 English
Translated

Create flowcharts, sequence diagrams, state machines, class diagrams, Gantt charts, and mindmaps using simple text-based syntax. Best for process flows, API interactions, and technical documentation. NOT for data-driven charts (use vega), quick KPI visuals (use infographic), or layered system architecture (use architecture).

154installs
Sourcemarkdown-viewer/skills
Added on

NPX Install

npx skill4agent add markdown-viewer/skills mermaid

Tags

Translated version includes tags in frontmatter
mermaid-diagramssyntax-guidelinediagram-creationtechnical-documentationflowchart-design

SKILL.md Content

View Translation Comparison →

Mermaid Diagram Visualizer

Quick Start: Identify diagram type (flowchart/sequence/state/class/ER/gantt/mindmap) → Define nodes with shapes → Connect with arrows → Wrap in 
```mermaid
fence. Default: top-to-bottom (
TD
), use 
flowchart
over 
graph
, Unicode supported.

Critical Syntax Rules

Rule 1: List Syntax Conflicts

❌ [1. Item]     → "Unsupported markdown: list"
✅ [1.Item]      → Remove space after period
✅ [① Item]      → Use circled numbers ①②③④⑤⑥⑦⑧⑨⑩
✅ [(1) Item]    → Use parentheses

Rule 2: Subgraph Naming

❌ subgraph AI Agent Core    → Space without quotes
✅ subgraph agent["AI Agent Core"]  → ID with display name
✅ subgraph agent            → Simple ID only

Rule 3: Node References in Subgraphs

❌ Title --> AI Agent Core   → Reference display name
✅ Title --> agent           → Reference subgraph ID

Rule 4: Special Characters in Node Text

✅ ["Text with spaces"]       → Quotes for spaces
✅ Use 『』 instead of ""     → Avoid quotation marks
✅ Use 「」 instead of ()     → Avoid parentheses

Rule 5: Use flowchart over graph

❌ graph TD      → Outdated
✅ flowchart TD  → Supports subgraph directions, more features

Common Pitfalls

IssueSolution
Diagram won't renderCheck unmatched brackets, quotes
List syntax error
[1.Item]
not 
[1. Item]
Subgraph reference failsUse ID not display name
Too crowdedSplit into multiple diagrams
Crossing connectionsUse different layout direction or invisible edges 
~~~

Output Format

markdown
```mermaid
[diagram code]
```

Related Files

For diagram-specific syntax and advanced features, refer to references below:
  • syntax.md — Detailed syntax for all 14+ diagram types: flowchart shapes, sequence actors, class relationships, state transitions, ER cardinality, Gantt tasks, and more