帮助文档

学习 Mermaid 语法，创建专业图表

支持的图表类型

流程图 (Flowchart)

展示流程和决策路径

语法关键字:graph TD
示例:
graph TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作]
    B -->|否| D[其他操作]
    C --> E[结束]
    D --> E

时序图 (Sequence Diagram)

展示对象间的交互时序

语法关键字:sequenceDiagram
示例:
sequenceDiagram
    participant A as 用户
    participant B as 系统
    A->>B: 发送请求
    B-->>A: 返回响应

类图 (Class Diagram)

展示类之间的关系

语法关键字:classDiagram
示例:
classDiagram
    class Animal {
        +String name
        +eat()
    }
    class Dog {
        +bark()
    }
    Animal <|-- Dog

状态图 (State Diagram)

展示状态转换

语法关键字:stateDiagram-v2
示例:
stateDiagram-v2
    [*] --> 待机
    待机 --> 运行: 启动
    运行 --> 待机: 停止
    运行 --> [*]: 关闭

甘特图 (Gantt Chart)

展示项目时间线

语法关键字:gantt
示例:
gantt
    title 项目计划
    dateFormat YYYY-MM-DD
    section 开发
    需求分析 :2024-01-01, 3d
    编码实现 :2024-01-04, 5d

饼图 (Pie Chart)

展示数据占比

语法关键字:pie
示例:
pie title 数据分布
    "A" : 45
    "B" : 35
    "C" : 20

语法指南

基本语法

A --> B

箭头连接

A --- B

直线连接

A -.-> B

虚线箭头

A ==> B

粗箭头

节点形状

A[矩形]

矩形节点

B(圆角矩形)

圆角矩形节点

C{菱形}

菱形节点

D((圆形))

圆形节点

标签和样式

A -->|标签| B

连接线标签

classDef className fill:#f9f,stroke:#333

定义样式类

class A className

应用样式类

click A "http://example.com"

添加链接

使用技巧

编辑技巧

  • 使用有意义的节点 ID，便于维护和理解
  • 适当使用空行分隔不同的逻辑块
  • 使用注释 (%% 注释内容) 说明复杂逻辑
  • 保持图表简洁，避免过于复杂的结构

导出建议

  • SVG 格式适合网页展示和打印
  • 根据用途选择合适的尺寸和背景色
  • 深色主题适合演示，浅色主题适合文档
  • 导出前检查预览效果，确保布局正确

常见问题

Q: 图表显示语法错误怎么办？

A: 请检查语法是否正确，特别注意关键字拼写、括号匹配和连接符号。可以参考示例模板或重新输入。

Q: 如何让图表更美观？

A: 尝试不同的主题，使用合适的节点形状，添加有意义的标签，保持布局简洁清晰。

Q: 导出的图片质量不好？

A: SVG 是矢量格式，可以无损缩放。如果需要位图，建议设置较大的尺寸再导出。