Mermaid 学习

基础

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 <br/>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  
  • [x] 注意: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;

箭头标签连接

A–>|text|B 或者 A– 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
  • –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<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

一个小 Bug

在 Markdown 模式下

```mermaid
graph TB
id[a]
```

与 LaTex 公式不能实现混编, 否则, 公式将不能正确显示.

若要与 LaTex 实现混编, 只需要将其改为下面的形式即可

<div class="mermaid">graph LR;  
id[a]
</div>
posted @ 2018-07-25 21:01  xinet  阅读(823)  评论(0编辑  收藏