Please enable Javascript to view the contents

mermaid绘图入门

 ·  ☕ 8 分钟

Mermaid

写这篇文章的时候 mermaid 为 v8.4 版本，文章内容书写于 Markdown 文件中。

初学者建议使用 Typora 编辑器 进行 mermaid 的练习。废话不用多说，把下面的示例动手敲一遍基本就都会了。

在markdown文件中创建一代码块，并标记为 mermaid 语言，如果要做流程图则代码块中第一行写上 graph ：

​```mermaid
graph
  
​```

另见 mermaid 官网

可以尝试切换网站主题，以达到更好的显示效果

Flowchart 流程图

示例一：

graph TB
  TB表示从上到下 -->
  LR表示从左到右 -->
  还可以BT或RL -->
  两短线加箭头连接两个节点 -->
  可以在 -- 连线中添加文字<br>并且可以在这里换行<br>这意味着 --> 可以写在一行以节省空间 -->可以使用别名加括号的形式来实现更多分支-见右边--> 可以使用别名加括号加引号的形式来支持特殊字符输入 ==> 加粗的线
  
  A(圆括号表示圆角)-->
  B{大括号为菱形}
  B-->C[默认为方括号]
  B-->D[以下为异形]
  C-->C1((两个圆括号为圆形))
  D-->D1>不同版本中可能会更改]
  C1-->C2{{两个大括号为六角形}} --> C3("可以在引号中输入特殊字符😘")--> C4("【更多特殊字符'，。; 】")
  D1-->D2[/梯形\] -->D3[\平行四边形\]

graph TB;
  TB表示从上到下 -->
  LR表示从左到右 -->
  还可以BT或RL -->
  两短线加箭头连接两个节点 -->
  可以在 -- 连线中添加文字<br>并且可以在这里换行 --> 可以写在一行以节省空间 -->可以使用别名加括号的形式来实现更多分支-见右边--> 可以使用别名加括号加引号的形式来支持特殊字符输入 ==> 加粗的线
  
  A(圆括号表示圆角)-->
  B{大括号为菱形}
  B-->C[默认为方括号]
  B-->D[以下为异形]
  C-->C1((两个圆括号为圆形))
  D-->D1>不同版本中可能会更改]
  C1-->C2{{两个大括号为六角形}} --> C3("可以在引号中输入特殊字符😘")--> C4("【更多特殊字符'，。; 】")
  D1-->D2[/梯形\] -->D3[\平行四边形\]

示例二：嵌套subgraphs

graph LR
  1(子图形示例) -->
  2("使用 'subgraph 标题' 开始")--> 3(使用end结束) --> 4(表示一个嵌套)
  A(家庭关系) --主人--> C1
  A--主人-->D1
  subgraph 小明家
  C1[小明] --> C2(小红)
  end
  subgraph 小胖家
  D1(小丽) --> D2[小胖]-->D3((小胖仔))
  end
  D3 --阿姨--> C2
  D3 --叔叔--> C1
  D2 --兄弟-->C1

graph LR
  1(子图形示例) -->
  2("使用 'subgraph 标题' 开始")--> 3(使用end结束) --> 4(表示一个嵌套)
  A(家庭关系) --主人--> C1
  A--主人-->D1
  subgraph 小明家
  C1[小明] --> C2(小红)
  end
  subgraph 小胖家
  D1(小丽) --> D2[小胖]-->D3((小胖仔))
  end
  D3 --阿姨--> C2
  D3 --叔叔--> C1
  D2 --兄弟-->C1

示例三：使用样式

graph LR
  样式一 --> 样式二
  style 样式一 fill:#f9f,stroke:#333,stroke-width:4px
    style 样式二 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
    C1(相关解释) --> C2("fill：填充颜色") -->C3("stroke：边框颜色") -->
    C4("stroke-width:边框宽度") --> C5("stroke-dasharray:虚线框")

graph LR
  样式一 --> 样式二
  style 样式一 fill:#f9f,stroke:#333,stroke-width:4px
    style 样式二 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
    C1(相关解释) --> C2("fill：填充颜色") -->C3("stroke：边框颜色") -->
    C4("stroke-width:边框宽度") --> C5("stroke-dasharray:虚线框")

如果想要为节点添加一些交互效果见官方手册

Sequence diagram时序图

示例一：

sequenceDiagram
  小雪 -->> Felix : 我想你了
  Felix ->> 小雪: 我也想你

源码

sequenceDiagram
  小雪 -->> Felix : 我想你了
  Felix ->> 小雪: 我也想你

sequenceDiagram
  participant A as 参与者A
  participant B as 参与者B
  participant C as 参与者C
  A ->> B : 使用participant可以实现排序和设置别名
  B -->> A : 别名示例： participant A as 参与者A
  C -> B : - 一个短线表示实线
  C --> B : -- 两个短线表示虚线
  C -> B: > 一个箭头表示没有箭头
  C ->> B: >> 两个箭头表示有箭头
  B -x A : -x 表示异步的实线
  A --x B : --x 表示异步的虚线
  
  B ->> C: 生效(activate C)
  activate C
  C -->> B: 无效(deactivate C)
  deactivate C
  B ->>+C: 使用 ->>+ 实现上述效果(箭头后添加+)
  C-->>-B: 使用 -->>- 实现上述效果(箭头后添加-)
  
  B -->> A : 在A左边添加注释 
  Note left of A: Note left of A: 注释
  A ->> B: 在A和B下方添加注释
  Note over A,B : Note over A,B : 注释内容，<br>内容太长可以使用 br 标签进行换行

  Note over B,C: 循环语法:<br>loop 每分钟<br>循环体(这里缩进)<br>end
  B ->> C : 开启循环
  loop 每分钟
    C -->> B : 开启重复模式
    B ->> C : 我想无限循环
  end
  
  Note over A,B : 条件语句 "alt else end" 语法，<br>还可以使用"opt end"表示可选操作<br>书写格式与loop相似
  A ->> B : 今天天气好吗？
  alt 晴天
    B -->> A : 天气很好
  else 下雨
    B -->> A : 天气不好
  end
  opt 可选回复
    B -->> A : 好与不好我都在家
  end
  
  rect rgb(191, 223, 255)
    Note over B,C: 背景高亮：<br>rect rgb(0, 255, 0)<br>内容<br>end
    B ->> C: 起床了
    rect rgba(200, 150, 255, .7)
          C -->> B : 十分钟后再说
        end
  end

sequenceDiagram
  participant A as 参与者A
  participant B as 参与者B
  participant C as 参与者C
  A ->> B : 使用participant可以实现排序和设置别名
  B -->> A : 别名示例： participant A as 参与者A
  C -> B : - 一个短线表示实线
  C --> B : -- 两个短线表示虚线
  C -> B: > 一个箭头表示没有箭头
  C ->> B: >> 两个箭头表示有箭头
  B -x A : -x 表示异步的实线
  A --x B : --x 表示异步的虚线
  
  B ->> C: 生效(activate C)
  activate C
  C -->> B: 无效(deactivate C)
  deactivate C
  B ->>+C: 使用 ->>+ 实现上述效果(箭头后添加+)
  C-->>-B: 使用 -->>- 实现上述效果(箭头后添加-)
  
  B -->> A : 在A左边添加注释 
  Note left of A: Note left of A: 注释
  A ->> B: 在A和B下方添加注释
  Note over A,B : Note over A,B : 注释内容，<br>内容太长可以使用 br 标签进行换行

  Note over B,C: 循环语法:<br>loop 每分钟<br>循环体(这里缩进)<br>end
  B ->> C : 开启循环
  loop 每分钟
    C -->> B : 开启重复模式
    B ->> C : 我想无限循环
  end
  
  Note over A,B : 条件语句 "alt else end" 语法，<br>还可以使用"opt end"表示可选操作<br>书写格式与loop相似
  A ->> B : 今天天气好吗？
  alt 晴天
    B -->> A : 天气很好
  else 下雨
    B -->> A : 天气不好
  end
  opt 可选回复
    B -->> A : 好与不好我都在家
  end
  
  rect rgb(191, 223, 255)
    Note over B,C: 背景高亮：<br>rect rgb(0, 255, 0)<br>内容<br>end
    B ->> C: 起床了
    rect rgba(200, 150, 255, .7)
          C -->> B : 十分钟后再说
        end
  end

Class Diagram 类图

  • + Public
  • - Private
  • # Protected
  • ~ Package
Type Description
<|-- Inheritance
*-- Composition
o-- Aggregation
--> Association
-- Link

为类添加注释，使用 << >> 包围即可，示例：

  • <<Interface>> 表示一个 Interface class
  • <<abstract>> 表示一个 abstract class
  • <<Service>> 表示一个 service class
  • <<enum>> 表示一个 enum
classDiagram
    class BankAccount{
      <<abstract>>
      +String owner
      +BigDecimal balance
      +deposit(amount)
      +withdrawl(amount)
    }
    
  classA <|-- classB :implements
    classC *-- classD: 文字说明
    classE o-- classF
    <<abstract>> classE
    classG <-- classH
    classI <.. classJ
    classK .. classL

classDiagram
    class BankAccount{
      <<abstract>>
      +String owner
      +BigDecimal balance
      +deposit(amount)
      +withdrawl(amount)
    }
    
  classA <|-- classB :implements
    classC *-- classD: 文字说明
    classE o-- classF
    <<abstract>> classE
    classG <-- classH
    classI <.. classJ
    classK .. classL

State Diagram状态图

mermaid状态图语法尝试与plantUml中使用的语法兼容

stateDiagram
    [*] --> 静止
    静止 --> [*]
    静止: 安逸(状态内的注释)

    静止 --> 移动 : 动起来
    note right of 移动 : 生命在于运动
    移动 --> 静止
    移动 --> 瘫痪
    瘫痪 --> [*]

stateDiagram
    [*] --> 静止
    静止 --> [*]
    静止: 安逸(状态内的注释)

    静止 --> 移动 : 动起来
    note right of 移动 : 生命在于运动
    移动 --> 静止
    移动 --> 瘫痪
    瘫痪 --> [*]

fork 和 join

stateDiagram
      state fork_state <<fork>>
      [*] --> fork_state
      fork_state --> State2
      fork_state --> State3

      state join_state <<join>>
      State2 --> join_state
      State3 --> join_state
      join_state --> State4
      State4 --> [*]

stateDiagram
      state fork_state <<fork>>
      [*] --> fork_state
      fork_state --> State2
      fork_state --> State3

      state join_state <<join>>
      State2 --> join_state
      State3 --> join_state
      join_state --> State4
      State4 --> [*]

Gantt 甘特图

甘特图以图示通过活动列表和时间刻度表示出特定项目的顺序与持续时间。

在甘特图中

  • 横轴(x轴) 表示时间，
  • 纵轴(y轴) 表示项目，
  • （中间的）线条表示期间计划和实际完成情况。

它可以直观表明计划何时进行，进展与要求的对比。便于管理者弄清项目的剩余任务，评估工作进度。

几个概念：

  • title ：标题
  • section：项目，纵坐标（Y轴）
  • 别名（比如第一个示例中的 a1，方便引用）
  • after ：在某个任务之后，after 后接某个任务别名
  • 起始时间
  • 持续时长
  • done ：表示已经完成的任务
  • active：正在进行的任务
gantt
    title 一个甘特图示例
    dateFormat  YYYY-MM-DD
    section 部门一(项目一)
    耕田             :a1, 2014-01-01, 30d
    插秧           :after a1  , 20d
    section 部门二(项目二)
    播种      :2014-01-05  , 20d
    施肥      : 24d

gantt
    title 一个甘特图示例
    dateFormat  YYYY-MM-DD
    section 部门一(项目一)
    耕田             :a1, 2014-01-01, 30d
    插秧           :after a1  , 20d
    section 部门二(项目二)
    播种      :2014-01-05  , 20d
    施肥      : 24d

示例二：

gantt
       dateFormat  YYYY-MM-DD
       title 为mermaid添加甘特图功能

       section A section
       Completed task            :done,    des1, 2014-01-06,2014-01-08
       Active task               :active,  des2, 2014-01-09, 3d
       Future task               :         des3, after des2, 5d
       Future task2              :         des4, after des3, 5d

       section Critical tasks
       Completed task in the critical line :crit, done, 2014-01-06,24h
       Implement parser and jison          :crit, done, after des1, 2d
       Create tests for parser             :crit, active, 3d
       Future task in critical line        :crit, 5d
       Create tests for renderer           :2d
       Add to mermaid                      :1d

       section Documentation
       Describe gantt syntax               :active, a1, after des1, 3d
       Add gantt diagram to demo page      :after a1  , 20h
       Add another diagram to demo page    :doc1, after a1  , 48h

       section Last section
       Describe gantt syntax               :after doc1, 3d
       Add gantt diagram to demo page      :20h
       Add another diagram to demo page    :48h

当文字显示不下时，会显示在节点的旁边

gantt
       dateFormat  YYYY-MM-DD
       title 为mermaid添加甘特图功能

       section A section
       Completed task            :done,    des1, 2014-01-06,2014-01-08
       Active task               :active,  des2, 2014-01-09, 3d
       Future task               :         des3, after des2, 5d
       Future task2              :         des4, after des3, 5d

       section Critical tasks
       Completed task in the critical line :crit, done, 2014-01-06,24h
       Implement parser and jison          :crit, done, after des1, 2d
       Create tests for parser             :crit, active, 3d
       Future task in critical line        :crit, 5d
       Create tests for renderer           :2d
       Add to mermaid                      :1d

       section Documentation
       Describe gantt syntax               :active, a1, after des1, 3d
       Add gantt diagram to demo page      :after a1  , 20h
       Add another diagram to demo page    :doc1, after a1  , 48h

       section Last section
       Describe gantt syntax               :after doc1, 3d
       Add gantt diagram to demo page      :20h
       Add another diagram to demo page    :48h

Pie Chart 饼图

pie 
    title 饼图标题
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

pie 
    title 饼图标题
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5
您的鼓励是我最大的动力
alipay QR Code
Felix
作者
Felix
如无必要，勿增实体。
3

目录