Mermaid图表工具：Markdown流程图、时序图、类图、甘特图、思维导图绘制指南

mermaid by markdown-viewer/skills

160 周安装量

6 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/markdown-viewer/skills --skill mermaid

数据可视化图表工具技术文档

🇨🇳中文介绍

Mermaid 图表可视化工具

快速开始： 识别图表类型（流程图/时序图/状态图/类图/实体关系图/甘特图/思维导图）→ 用形状定义节点 → 用箭头连接 → 用 ````mermaid 代码块包裹。默认方向：从上到下（TD），使用 flowchart而非graph`，支持 Unicode。

关键语法规则

规则 1：列表语法冲突

❌ [1. Item]     → "不支持的 Markdown：列表"
✅ [1.Item]      → 移除点号后的空格
✅ [① Item]      → 使用带圈数字 ①②③④⑤⑥⑦⑧⑨⑩
✅ [(1) Item]    → 使用括号

规则 2：子图命名

❌ subgraph AI Agent Core    → 名称含空格但未加引号
✅ subgraph agent["AI Agent Core"]  → 使用 ID 并指定显示名称
✅ subgraph agent            → 仅使用简单 ID

规则 3：子图中的节点引用

❌ Title --> AI Agent Core   → 引用了显示名称
✅ Title --> agent           → 引用子图 ID

规则 4：节点文本中的特殊字符

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

问题	解决方案
图表无法渲染	检查未匹配的括号、引号
列表语法错误	使用 `[1.Item]` 而非 `[1. Item]`
子图引用失败	使用 ID 而非显示名称
图表过于拥挤	拆分为多个图表
连线交叉	使用不同的布局方向或不可见边 `~~~`

🇺🇸English

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

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

Issue	Solution
Diagram won't render	Check unmatched brackets, quotes
List syntax error	`[1.Item]` not `[1. Item]`
Subgraph reference fails	Use ID not display name
Too crowded	Split into multiple diagrams
Crossing connections	Use different layout direction or invisible edges `~~~`

Output Format

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

Weekly Installs

127

Repository

markdown-viewer/skills

GitHub Stars

First Seen

Jan 31, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

gemini-cli119

github-copilot119

opencode119

codex118

kimi-cli115

amp115