Mermaid的七种语法示例

以下内容由ChatGPT生成,本人修改。

Mermaid 是一种基于文本的图表和流程图绘制工具,常用于文档、Markdown 文件中快速生成图表。下面是 Mermaid 的基本语法介绍,适用于各种图类型,包括流程图、时序图、甘特图等。

📌 一、饼图(Pie Chart)

pie
    title 2024年全市各县区地区生产总值
"华龙区":457.94
"濮阳县":335.93
"范县":281.61
"清丰县":255.42
"经开区":250.88
"南乐县":210.94
"台前县":155
"工业园区":70.84
23%17%14%13%12%10%8%4%2024年全市各县区地区生产总值华龙区濮阳县范县清丰县经开区南乐县台前县工业园区

代码如下:


📌 二、流程图(Flowchart)

graph TD
    A[开始] --> B{条件判断}
    B -- 是 --> C[执行操作1]
    B -- 否 --> D[执行操作2]
    C --> E[结束]
    D --> E
开始
条件判断
执行操作1
执行操作2
结束
graph TD:表示图的方向是从上到下(Top Down)。你也可以写:
  • LR 左到右
  • RL 右到左
  • BT 下到上

📌 三、时序图(Sequence Diagram)

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: 你好吗?
    Bob-->>Alice: 我很好,谢谢!V
AliceBob你好吗?我很好,谢谢!VAliceBob

📌 四、甘特图(Gantt Chart)

gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 设计
    原型设计       :a1, 2025-06-01, 5d
    UI设计         :after a1, 3d
    section 开发
    前端开发       :2025-06-08, 5d
    后端开发       :2025-06-08, 5d
    联调测试       :2025-06-13, 3d
2025-06-012025-06-032025-06-052025-06-072025-06-092025-06-112025-06-132025-06-15原型设计 UI设计 前端开发 后端开发 联调测试 设计开发项目开发计划

📌 五、类图(Class Diagram)

classDiagram
    class Animal {
        +String name
        +int age
        +eat()
    }
    class Dog {
        +String breed
        +bark()
    }
    Animal <|-- Dog
Animal+String name+int age+eat()Dog+String breed+bark()

📌 六、状态图(State Diagram)

stateDiagram
    [*] --> 空闲
    空闲 --> 播放中 : 点击播放
    播放中 --> 暂停 : 点击暂停
    暂停 --> 播放中 : 点击播放
    播放中 --> [*] : 播放结束
空闲播放中暂停点击播放点击暂停点击播放播放结束

📌 七、实体关系图(ER图)

erDiagram
    HLQZF ||--o{ ZHONGYUANLUJIEDAOBAN : PAICHU

    HLQZF }|..|{ YUECUNXIANGZHENGFU : ZHIDAO
HLQZFZHONGYUANLUJIEDAOBANYUECUNXIANGZHENGFUPAICHUZHIDAO