Skip to main content
小书匠

小书匠语法说明之mermaid

小书匠语法说明之mermaid相关疑问mermaid甘特图序列图自定义样式条件选择循环标注活动中消息文本连线别名参与者流程图跟 fontawesome 字体的集成结点样式自定义子图表结点间的连线带文字加粗的线加粗的线点状形式的线有箭头同时带上文字描述的线在线上有描述文字的线没有任何修饰的线带箭头的线节点形状带文字说明的菱形结点带文字说明的飘带结点带文字说明的圆形结点带圆角文字说明的结点带文字说明的结点默认结点图表方向使用效果示例概述

概述

Generation of diagram and flowchart from text in a similar manner as markdown

通过 mermaid 可以实现以纯文本的方式绘制流程图，序列图，甘特图等。

小书匠编辑器在 markdown 强大的优势下，更是无缝集成了 mermaid 的所有功能，用户不需要任何配置，只要打开了语法开关，就可以使用所有 mermaid 图例功能。再加上小书匠的实时预览功能，可以马上查看到输入的 mermaid 代码生成的效果图。大大提高了用户绘图的速度。

使用

元数据标识: grammar_mermaid

想要使用该语法，需要在设置>扩展语法 里把mermaid选项打开。或者在每篇文章的元数据里通过 grammar_mermaid 进行控制。系统默认关闭mermaid语法功能

mermaid 提供了流程图，序列图，甘特图等多种图形效果

mermaid的语法为代码块语法的执行功能，语言为 mermaid

示例

  1. 1```mermaid! 
  2. 2graph TD; 
  3. 3A-->B; 
  4. 4A-->C; 
  5. 5B-->D; 
  6. 6C-->D; 
  7. 7``` 

效果

A
B
C
D

mermaid

流程图

因为 mermaid 支持不同图表，所以所有的流程图需要以 graph 开头

图表方向

在 graph 的后方添加流程图的显示方向

  • TB -从上到下
  • BT - 从下到上
  • RL - 从右到左
  • LR - 从左到右
  • TD - 跟 TB 一样，从上到下
从左到右的图表    5行
  1. 1``` mermaid! 
  2. 2graph LR 
  3. 3 Start --> Stop 
  4. 4``` 
Start
Stop
从上到下的图表    5行
  1. 1``` mermaid! 
  2. 2graph TB 
  3. 3 Start --> Stop 
  4. 4``` 
Start
Stop

节点形状

默认结点

  1. 1``` mermaid! 
  2. 2graph TB 
  3. 3 id 
  4. 4``` 
id

带文字说明的结点

  1. 1``` mermaid! 
  2. 2graph LR 
  3. 3 id1[This is the text in the box] 
  4. 4``` 
This is the text in the box

带圆角文字说明的结点

  1. 1``` mermaid! 
  2. 2graph LR 
  3. 3 id1(This is the text in the box) 
  4. 4``` 
This is the text in the box

带文字说明的圆形结点

  1. 1``` mermaid! 
  2. 2graph LR 
  3. 3 id1((This is the text in the circle)) 
  4. 4``` 
This is the text in the circle

带文字说明的飘带结点

  1. 1``` mermaid! 
  2. 2graph LR 
  3. 3 id1>This is the text in the box] 
  4. 4``` 
This is the text in the box

带文字说明的菱形结点

  1. 1``` mermaid! 
  2. 2graph LR 
  3. 3 id1{This is the text in the box} 
  4. 4``` 
This is the text in the box

结点间的连线

结点间可以有不同形式的连接，比如实线，虚线，带箭头的线等

带箭头的线

  1. 1``` mermaid! 
  2. 2graph LR 
  3. 3 A-->B 
  4. 4``` 
A
B

没有任何修饰的线

  1. 1``` mermaid! 
  2. 2graph LR 
  3. 3 A --- B 
  4. 4``` 
A
B

在线上有描述文字的线

  1. 1``` mermaid! 
  2. 2graph LR 
  3. 3 A-- This is the text ---B 
  4. 4``` 
  5. 5或者 
  6. 6 
  7. 7``` mermaid! 
  8. 8graph LR 
  9. 9 A---|This is the text|B 
  10. 10``` 
This is the text
A
B
This is the text
A
B

有箭头同时带上文字描述的线

  1. 1``` mermaid! 
  2. 2graph LR 
  3. 3 A-->|text|B 
  4. 4``` 
  5. 5或者 
  6. 6``` mermaid! 
  7. 7graph LR 
  8. 8 A-- text -->B 
  9. 9``` 
text
A
B

或者

text
A
B

点状形式的线

  1. 1``` mermaid! 
  2. 2graph LR; 
  3. 3 A-.->B; 
  4. 4``` 
A
B

加粗的线

  1. 1``` mermaid! 
  2. 2graph LR 
  3. 3 A ==> B 
  4. 4``` 
A
B

带文字加粗的线

  1. 1``` mermaid! 
  2. 2graph LR 
  3. 3 A == text ==> B 
  4. 4``` 
text
A
B

子图表

  1. 1subgraph 子图表名称 
  2. 2 子图表中的描述语句... 
  3. 3end 

示例代码

  1. 1``` mermaid! 
  2. 2graph TB 
  3. 3 c1-->a2 
  4. 4 subgraph one 
  5. 5 a1-->a2 
  6. 6 end 
  7. 7 subgraph two 
  8. 8 b1-->b2 
  9. 9 end 
  10. 10 subgraph three 
  11. 11 c1-->c2 
  12. 12 end 
  13. 13``` 
three
two
one
c1
c2
b1
b2
a1
a2

结点样式自定义

  1. 1``` mermaid! 
  2. 2graph LR 
  3. 3 id1(Start)-->id2(Stop) 
  4. 4 style id1 fill:#f9f,stroke:#333,stroke-width:4px 
  5. 5 style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5 
  6. 6``` 
Start
Stop

跟 fontawesome 字体的集成

使用 fa: #图表名称# 的语法添加 fontawesome

  1. 1``` mermaid! 
  2. 2graph TD 
  3. 3 B["fa:fa-twitter for peace"] 
  4. 4 B-->C[fa:fa-ban forbidden] 
  5. 5 B-->D(fa:fa-spinner); 
  6. 6 B-->E(A fa:fa-camera-retro perhaps?); 
  7. 7``` 
for peace
forbidden