简介¶

在 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  

注意：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>

nocode-book 0.1 文档

简介

导航

简介¶

流程图¶

时序图¶

甘特图¶

Graph¶

节点与形状¶

默认节点¶

文本节点¶

圆角节点¶

圆节点(The form of a circle)¶

非对称节点(asymetric shape)¶

菱形节点(rhombus)¶

连接线¶

箭头形连接¶

开放行连接¶

标签连接¶

箭头标签连接¶

虚线(dotted link，点连线)¶

标签虚线¶

粗实线¶

标签粗线¶

特殊的语法¶

html 字符的转义字符¶

子图(Subgraphs)¶

基础 fontawesome 支持¶

图表(graph)¶

定义连接线的样式¶

样式类¶

默认样式类：¶

序列图(sequence diagram)¶

便签¶

循环 Loops¶

选择 ALT¶

甘特图(gantt)¶

一个小 Bug¶

简介¶

流程图¶

时序图¶

甘特图¶

Graph¶

节点与形状¶

默认节点¶

文本节点¶

圆角节点¶

圆节点(The form of a circle)¶

非对称节点(asymetric shape)¶

菱形节点(rhombus)¶

连接线¶

箭头形连接¶

开放行连接¶

标签连接¶

箭头标签连接¶

虚线(dotted link，点连线)¶

标签虚线¶

粗实线¶

标签粗线¶

特殊的语法¶

html 字符的转义字符¶

子图(Subgraphs)¶

基础 fontawesome 支持¶

图表(graph)¶

定义连接线的样式¶

样式类¶

默认样式类：¶

序列图(sequence diagram)¶

便签¶

循环 Loops¶

选择 ALT¶

甘特图(gantt)¶

一个小 Bug¶