Back to Details

mermaid-syntax

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Mermaid Syntax Reference

Mermaid语法参考

A comprehensive reference for all 23 Mermaid diagram types plus configuration and theming. This skill provides official Mermaid syntax documentation sourced from the mermaid-skill project (auto-synced from upstream Mermaid docs).
This skill ships reference material, not runnable scripts. Read the relevant reference file with 
Read
, apply the syntax, and write the diagram into the user's artefact. Do not 
Bash
-execute anything from 
references/
— they are Mermaid syntax docs, not commands.
To look up syntax for a specific diagram type, identify the type from the table below and read the corresponding reference file.
本参考涵盖了全部23种Mermaid图表类型以及配置和主题相关内容。本Skill提供官方Mermaid语法文档，内容源自mermaid-skill项目（自动同步自上游Mermaid文档）。
本Skill仅提供参考资料，不包含可运行脚本。 使用
Read
命令读取相关参考文件，应用语法规则，将图表写入用户的工件中。请勿对
references/
目录下的内容执行
Bash
命令——这些是Mermaid语法文档，而非命令。
如需查询特定图表类型的语法，请从下表中确定类型并读取对应的参考文件。

Supported Diagram Types

支持的图表类型

Select the appropriate diagram type and read the corresponding reference file:
TypeReferenceArcKit Commands Using It
Flowchartflowchart.md
/arckit.diagram
, 
/arckit.dfd
, 
/arckit.roadmap
, 
/arckit.plan
, 
/arckit.backlog
, 
/arckit.strategy
, 
/arckit.story
, 
/arckit.jsp-936
Sequence DiagramsequenceDiagram.md
/arckit.diagram
Class DiagramclassDiagram.md—
State DiagramstateDiagram.md—
ER DiagramentityRelationshipDiagram.md
/arckit.data-model
Gantt Chartgantt.md
/arckit.roadmap
, 
/arckit.plan
, 
/arckit.strategy
, 
/arckit.story
, 
/arckit.presentation
Pie Chartpie.md
/arckit.story
, 
/arckit.presentation
Mindmapmindmap.md
/arckit.story
Timelinetimeline.md
/arckit.story
Git Graphgitgraph.md—
Quadrant ChartquadrantChart.md
/arckit.presentation
Requirement DiagramrequirementDiagram.md—
C4 Diagramc4.md
/arckit.diagram
, 
/arckit.presentation
Sankey Diagramsankey.md—
XY ChartxyChart.md—
Block Diagramblock.md—
Packet Diagrampacket.md—
Kanbankanban.md—
Architecture Diagramarchitecture.md—
Radar Chartradar.md—
Treemaptreemap.md—
User JourneyuserJourney.md—
ZenUMLzenuml.md—
选择合适的图表类型并读取对应的参考文件：
类型参考文件使用该类型的Arckit命令
流程图flowchart.md
/arckit.diagram
, 
/arckit.dfd
, 
/arckit.roadmap
, 
/arckit.plan
, 
/arckit.backlog
, 
/arckit.strategy
, 
/arckit.story
, 
/arckit.jsp-936
序列图sequenceDiagram.md
/arckit.diagram
类图classDiagram.md—
状态图stateDiagram.md—
ER图entityRelationshipDiagram.md
/arckit.data-model
甘特图gantt.md
/arckit.roadmap
, 
/arckit.plan
, 
/arckit.strategy
, 
/arckit.story
, 
/arckit.presentation
饼图pie.md
/arckit.story
, 
/arckit.presentation
思维导图mindmap.md
/arckit.story
时间线timeline.md
/arckit.story
Git图gitgraph.md—
象限图quadrantChart.md
/arckit.presentation
需求图requirementDiagram.md—
C4图c4.md
/arckit.diagram
, 
/arckit.presentation
桑基图sankey.md—
XY图xyChart.md—
块图block.md—
数据包图packet.md—
看板图kanban.md—
架构图architecture.md—
雷达图radar.md—
树形图treemap.md—
用户旅程图userJourney.md—
ZenUML图zenuml.md—

Configuration & Theming

配置与主题

TopicReference
Themingconfig-theming.md
Directivesconfig-directives.md
Layoutsconfig-layouts.md
Configurationconfig-configuration.md
Mathconfig-math.md
Tidy Treeconfig-tidy-tree.md
Examplesexamples.md
主题参考文件
主题设置config-theming.md
指令config-directives.md
布局config-layouts.md
配置config-configuration.md
数学公式config-math.md
整洁树config-tidy-tree.md
示例examples.md

C4 Layout Science

C4布局科学

For research-backed C4 diagram layout guidance (declaration ordering, edge crossing targets, colour standards, PlantUML directional hints), see c4-layout-science.md. This ArcKit-specific reference supplements the upstream C4 syntax reference with graph drawing science and layout optimisation techniques.
如需基于研究的C4图布局指导（声明顺序、边缘交叉目标、颜色标准、PlantUML方向提示），请查看c4-layout-science.md。这份Arckit专属参考资料在C4语法参考的基础上，补充了图形绘制科学和布局优化技巧。

Common Syntax Gotchas

常见语法陷阱

These are the most common Mermaid syntax errors encountered when generating diagrams:
GotchaProblemFix
<br/>
in flowchart edge labels		Mermaid flowchart parser rejects HTML in edge labelsUse comma-separated text: 
-->|"Uses, HTTPS"|
end
as node ID
end
is a reserved keyword in Mermaid		Use a different ID: 
EndNode["End"]
Gantt date formatsGantt requires specific date formatUse 
YYYY-MM-DD
(e.g., 
2025-01-15
)
Gantt task statusInvalid task status keywordsValid: 
done
, 
active
, 
crit
, 
milestone
Parentheses in labelsUnescaped 
()
breaks node parsing		Wrap in quotes: 
Node["Label (with parens)"]
Special chars in IDsHyphens, dots, spaces in node IDsUse camelCase or underscores: 
apiGateway
, 
api_gateway
Missing semicolons in ERER diagram attributes need specific syntaxFollow 
entity { type name }
pattern
Subgraph namingSubgraph IDs with spaces need quotes
subgraph "My Group"
以下是生成图表时最常遇到的Mermaid语法错误：
陷阱问题修复方案
流程图边缘标签中的
<br/>
Mermaid流程图解析器拒绝边缘标签中的HTML使用逗号分隔文本：
-->|"Uses, HTTPS"|
将
end
作为节点ID
end
是Mermaid中的保留关键字		使用其他ID：
EndNode["End"]
甘特图日期格式甘特图要求特定的日期格式使用
YYYY-MM-DD
格式（例如：
2025-01-15
）
甘特图任务状态无效的任务状态关键字有效值：
done
, 
active
, 
crit
, 
milestone
标签中的括号未转义的
()
会破坏节点解析		用引号包裹：
Node["Label (with parens)"]
ID中的特殊字符节点ID中的连字符、点号、空格使用驼峰式或下划线：
apiGateway
, 
api_gateway
ER图中缺少分号ER图属性需要特定语法遵循
entity { type name }
格式
子图命名包含空格的子图ID需要加引号
subgraph "My Group"

ArcKit Integration

Arckit集成

This skill handles conversational Mermaid syntax questions — quick lookups, syntax examples, troubleshooting rendering issues, and learning about diagram types.
For formal architecture diagram generation with document control, project integration, C4 layout science, and governance compliance, use the 
/arckit:diagram
command instead. It generates versioned diagram artifacts saved to your project directory with full traceability to requirements and architecture principles.
本Skill处理对话式Mermaid语法问题——快速查询、语法示例、渲染问题排查以及图表类型学习。
如需具备文档管控、项目集成、C4布局科学和合规治理的正式架构图生成功能，请使用
/arckit:diagram
命令。该命令会生成带版本的图表工件并保存到项目目录，同时具备与需求和架构原则的完整可追溯性。