由 匿名 (未验证) 提交于 2019-12-02 22:56:40

在 VS code 中安装插件 Markdown Preview Mermaid Support，则便可支持 Mermaid

流程图

flowchart

graph LR; A-->B; A-->C; B-->D; C-->D;

时序图

sequence diagram

sequenceDiagram 　　　participant Alice 　　　participant Bob 　　　Alice->John:Hello John, how are you? 　　　loop Healthcheck 　　　　　John->John:Fight against hypochondria 　　　end 　　　Note right of John:Rational thoughts
prevail... 　　　John-->Alice:Great! 　　　John->Bob: How about you? 　　　Bob-->John: Jolly good!

甘特图

gantt diagram

gantt 　　　dateFormat　YYYY-MM-DD 　　　title Adding GANTT diagram functionality to 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 json　　　　　　: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

Graph

graph LR     A --> B

这是申明一个由左到右，水平向右的图。

graph LR A -->B

可能方向有：

  • TB - top bottom
  • BT - bottom top
  • RL - right left
  • LR - left right
  • TD - same as TB

节点与形状

默认节点

graph LR id1
  • 注意：id 显示在节点内部。
graph LR id1

文本节点

graph LR id[This is the text in the box];

展示如下：

graph LR id[This is the text in the box];

圆角节点

graph LR id(This is the text in the box);

即：

graph LR id(This is the text in the box);

圆节点(The form of a circle)

graph LR id((This is the text in the circle));
graph LR id((This is the text in the circle));

非对称节点(asymetric shape)

graph LR id>This is the text in the box]
graph LR id>This is the text in the box]

菱形节点(rhombus)

graph LR id{This is the text in the box}
graph LR id{This is the text in the box}

连接线

节点间的连接线有多种形状，而且可以在连接线中加入标签：

箭头形连接

graph LR;   A-->B;
graph LR; A-->B;

开放行连接

graph LR A --- B
graph LR A --- B

标签连接

graph LR A -- This is the label text --- B;
graph LR A -- This is the label text --- B;

箭头标签连接

或者

graph LR A-- text -->B

虚线(dotted link，点连线)

-.-> 和 -.-

graph LR A-.->B
graph LR A-.-B

标签虚线

graph LR A-.text.->B
graph LR A-.text.->B

粗实线

==>

graph LR A==>B

标签粗线

=\=text\==> 和 =\=text\===

graph LR A==text==>B
graph LR A==text===B

特殊的语法

使用引号可以抑制一些特殊的字符的使用，可以避免一些不必要的麻烦。

graph LR d1["This is the (text) in the box"]
graph LR d1["This is the (text) in the box"]

html 字符的转义字符

转义字符的使用语法

流程图定义如下：

graph LR         A["A double quote:#quot;"]-->B["A dec char:#9829;"]
graph LR A["A double quote:#quot;"]-->B["A dec char:#9829;"]

子图(Subgraphs)

subgraph title graph definition end

示例：

graph TB         subgraph one         a1 --> a2         end         subgraph two         b2 --> b2         end         subgraph three         c1 --> c2         end         c1 --> a2
graph TB subgraph one a1 --> a2 end subgraph two b2 --> b2 end subgraph three c1 --> c2 end c1 --> a2

基础 fontawesome 支持

想加入来自frontawesome的图表字体，详情请点击：fontawdsome

引用的语法为：++fa:#icon class name#++

graph TD       B["fa:fa-twitter for peace"]       B-->C[fa:fa-ban forbidden]       B-->D(fa:fa-spinner);       B-->E(A fa:fa-camerra-retro perhaps?);
graph TD B["fa:fa-twitter for peace"] B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner); B-->E(A fa:fa-camerra-retro perhaps?);

更多参考：mermaid docs

图表(graph)

定义连接线的样式

graph LR      id1(Start)-->id2(Stop)      style id1 fill:#f9f,stroke:#333,stroke-width:4px;      style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray:5,5;
graph LR id1(Start)-->id2(Stop) style id1 fill:#f9f,stroke:#333,stroke-width:4px; style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray:5,5;

备注：上面的样式参考 CSS 样式。

样式类

为了方便样式的使用，可以定义类来使用样式

类的定义示例：

classDef className fill:#f9f,stroke:#333,stroke-width:4px;

对节点使用样式类：

class nodeId className;

同时对多个节点使用相同的样式类：

class nodeId1,nodeId2 className;

可以在CSS中提前定义样式类，应用在图表的定义中。

graph LR       A-->B[AAABBB];       B-->D;       class A cssClass;

默认样式类：

当没有指定样式的时候，默认采用。

classDef default fill:#f9f,stroke:#333,stroke-width:4px;

示例：

graph LR     classDef default fill:#f90,stroke:#555,stroke-width:4px;     id1(Start)-->id2(Stop)
graph LR classDef default fill:#f90,stroke:#555,stroke-width:4px; id1(Start)-->id2(Stop)

序列图(sequence diagram)

示例：

sequenceDiagram Alice->John: Hello John, how are you ? John-->Alice:Great! Alice->>John: dont borther me ! John-->>Alice:Great! Alice-xJohn: wait! John--xAlice: Ok! 
sequenceDiagram     Alice->John: Hello John, how are you ?     John-->Alice:Great!     Alice->>John: dont borther me !     John-->>Alice:Great!     Alice-xJohn: wait!     John--xAlice: Ok!

如果想让 John 出现在前面，mermaid 通过设定参与者(participants)的顺序控制二者的顺序。上面的图可以做如下修改：

sequenceDiagram 　　participant John 　　participant Alice 　　Alice-xJohn:Hello John,how are you? 　　John-->>Alice:Great!
sequenceDiagram 　　participant John 　　participant Alice 　　Alice-xJohn:Hello John,how are you? 　　John-->>Alice:Great!

箭头的六种样式：

  • ->
  • ->>
  • -x

便签

给序列图增加便签：

具体规则：

[right of | left of | over][Actor]:Text

示例：

sequenceDiagram 　　participant John 　　Note left of John: Text in note
sequenceDiagram 　　participant John 　　Note left of John: Text in note

跨越两个 Actor 的便签：

sequenceDiagram 　　Alice->John:Hello John, how are you? 　　Note over Alice,John:A typical interaction
sequenceDiagram 　　Alice->John:Hello John, how are you? 　　Note over Alice,John:A typical interaction

循环 Loops

在序列图中，也可以使用循环，具体规则如下：

loop Loop text ... statements... end

示例：

sequenceDiagram 　　Alice->>John: Hello! 　　loop Reply every minute 　　　　John->>Alice:Great! 　　end
sequenceDiagram 　　Alice->>John: Hello! 　　loop Reply every minute 　　　　John->>Alice:Great! 　　end

选择 ALT

在序列图中选择的表达。规则如下：

alt Describing text ...statements... else ...statements... end

或者使用 opt (推荐在没有 else 的情况下使用)

opt Describing text ...statements... end

示例：

sequenceDiagram 　　Alice->>Bob: Hello Bob, how are you? 　　alt is sick 　　　　Bob->>Alice:not so good :( 　　else is well 　　　　Bob->>Alice:Feeling fresh like a daisy:) 　　end 　　opt Extra response 　　　　Bob->>Alice:Thanks for asking 　　end
sequenceDiagram 　　Alice->>Bob: Hello Bob, how are you? 　　alt is sick 　　　　Bob->>Alice:not so good :( 　　else is well 　　　　Bob->>Alice:Feeling fresh like a daisy:) 　　end 　　opt Extra response 　　　　Bob->>Alice:Thanks for asking 　　end

甘特图(gantt)

甘特图是一类条形图，由 Karol Adamiechi 在 1896 年提出, 而在 1910 年 Henry Gantt 也独立的提出了此种图形表示。通常用在对项目终端元素和总结元素的开始及完成时间进行的描述。
示例：

gantt dateFormat YYYY-MM-DD  section S1 T1: 2014-01-01, 9d  section S2 T2: 2014-01-11, 9d  section S3 T3: 2014-01-02, 9d
gantt dateFormat YYYY-MM-DD section S1 T1: 2014-01-01, 9d section S2 T2: 2014-01-11, 9d section S3 T3: 2014-01-02, 9d

更加丰富的：

gantt     dateFormat  YYYY-MM-DD     title Adding GANTT diagram functionality to 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 Adding GANTT diagram functionality to 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
header 1 header 2
title 标题
dateFormat 日期格式
section 模块
Completed 已经完成
Active 当前正在进行
Future 后续待处理
crit 关键阶段
日期缺失 默认从上一项完成后

关于日期的格式可以参考：

范例

graph TB     sq[Square shape] --> ci((Circle shape))      subgraph A subgraph         di{Diamond with  line break} -.-> ro(Rounded)         di==>ro2(Rounded square shape)     end      e --> od3>Really long text with linebreak<br>in an Odd shape]      cyr[Cyrillic]-->cyr2((Circle shape Начало));      classDef green fill:#9f6,stroke:#333,stroke-width:2px;     classDef orange fill:#f96,stroke:#333,stroke-width:4px;     class sq,e green     class di orange
graph TB sq[Square shape] --> ci((Circle shape)) subgraph A subgraph di{Diamond with line break} -.-> ro(Rounded) di==>ro2(Rounded square shape) end e --> od3>Really long text with linebreak
in an Odd shape] cyr[Cyrillic]-->cyr2((Circle shape Начало)); classDef green fill:#9f6,stroke:#333,stroke-width:2px; classDef orange fill:#f96,stroke:#333,stroke-width:4px; class sq,e green class di orange

原文：https://www.cnblogs.com/q735613050/p/9368331.html

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!