Markdown Mermaid

Graph

graph LR
    A --> B

• 这是申明一个由左到右，水平向右的图。
• 可能方向有：
  • TB - top bottom
  • BT - bottom top
  • RL - right left
  • LR - left right
  • TD - same as TB

节点与形状

默认节点

graph LR
id

• 注意:id显示在节点内部。

文本节点

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));

非对称节点（asymetric shape)

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

菱形节点（rhombus)

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

连接线

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

箭头形连接

graph LR
  A-->B

开放行连接

graph LR
A --- 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

标签虚线

-.text.->

graph LR
A-.text.->B

粗实线

==>

graph LR
A==>B

===

graph LR
A===B

标签粗线

==text==>

graph LR
A==text==>B

==text===

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
        en
        subgraph two
        b2 --> b2
        end
        subgraph three
        c1 --> c2
        end
        c1 --> a2

结果：

基础fontawesome支持

如果想加入来自frontawesome的图表字体，需要像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-camera-retro perhaps?);

以上reference:
1.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)