Loading...
Loading...
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).
npx skill4agent add markdown-viewer/skills mermaid```mermaidTDflowchartgraph❌ [1. Item] → "Unsupported markdown: list"
✅ [1.Item] → Remove space after period
✅ [① Item] → Use circled numbers ①②③④⑤⑥⑦⑧⑨⑩
✅ [(1) Item] → Use parentheses❌ subgraph AI Agent Core → Space without quotes
✅ subgraph agent["AI Agent Core"] → ID with display name
✅ subgraph agent → Simple ID only❌ Title --> AI Agent Core → Reference display name
✅ Title --> agent → Reference subgraph ID✅ ["Text with spaces"] → Quotes for spaces
✅ Use 『』 instead of "" → Avoid quotation marks
✅ Use 「」 instead of () → Avoid parentheses❌ graph TD → Outdated
✅ flowchart TD → Supports subgraph directions, more features| Issue | Solution |
|---|---|
| Diagram won't render | Check unmatched brackets, quotes |
| List syntax error | |
| Subgraph reference fails | Use ID not display name |
| Too crowded | Split into multiple diagrams |
| Crossing connections | Use different layout direction or invisible edges |
```mermaid
[diagram code]
```For diagram-specific syntax and advanced features, refer to references below: