AI Skills
mermaid

mermaid

Popular

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).

3.4Kstars
190forks
Updated 9/25/2026
Get SkillSource Code

Related Skills

scope-creep-detector141Kxurl385Kx402115K
SKILL.md
read-only
name
mermaid
description

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).

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 flowchartovergraph`, 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