Markdown教程<2> mermaid图形绘制（1）

Markdown教程<2> mermaid图形绘制（1）

博客园中的markdown编辑器同时支持mermaid图表引擎与tex公式引擎，可以使用mermaid直接画出流程图，时序图，甘特图等，比较方便，下面介绍一下在markdown中使用mermaid绘制图表

注意：本文包含较多mermaid图表，打开本网页后需要等待一段时间加载完成方可显示图表。可以观看浏览器标题栏，直至本网页不处于加载状态（转圈圈）或者图表已经显示为止。

---

1. 流程图

图

使用graph来声明一张新的图以及图的绘制方向，具体方法为:

graph TD
    start --> stop

graph TD
start --> stop

其中TD声明了图的绘制顺序为由上到下，其他可以填写的顺序为：

• TB - top bottom
• BT - bottom top
• RL - right left
• LR - left right
• TD - 与TB一样

graph LR
    start --> stop

graph LR
start --> stop

节点与形状

默认节点

graph LR
    node

graph LR
node

可以看到，默认情况下节点名称被显示在矩形框内。

有文本的节点

当然也可以为节点设置文本，在设置文本的同时需要指定节点的形状。

graph LR
    node1[这是一段文字]

graph LR
node1[这是一段文字]

圆角节点

graph LR
    node1(这是一段文字)

graph LR
node1(这是一段文字)

圆节点

graph LR
    node1((这是一段文字))

graph LR
node1((这是一段文字))

不对称形状节点

graph LR
    node1>这是一段文字]

graph LR
node1>这是一段文字]

菱形节点

graph LR
    node1{这是一段文字}

graph LR
node1{这是一段文字}

节点之间连接线

节点之间通过连接线/边连接。所以可以设置连接线的形状，或者把一段文本附着到线上。

箭头连接线

graph LR
    A --> B

graph LR
A --> B

直线

graph LR
    A --- B

graph LR
A --- B

直线中带有文字

graph LR
    A --this is a text--- B

graph LR
A --this is a text--- B

或者

graph LR
    A ---|this is a text| B

graph LR
A ---|this is a text| B

箭头中带有文字

graph LR
    A --this is a text--> B

graph LR
A --this is a text--> B

虚线连接

graph LR
    A -.- B

graph LR
A -.- B

虚线箭头连接

graph LR
    A -.-> B

graph LR
A -.-> B

虚线带有文本

graph LR
    A -.this is a text.- B

graph LR
A -.this is a text.- B

虚线箭头带有文本

graph LR
    A -.this is a text.-> B

graph LR
A -.this is a text.-> B

大箭头(thick link)

graph LR
    A ==> B

graph LR
A ==> B

大箭头(thick link)带有文本

graph LR
    A ==this is a text==> B

graph LR
A ==this is a text==> B

用于转义

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

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

子图

subgraph title
  graph definition
end

例如：

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

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

节点交互

可以讲一个点击事件绑定到一个节点上，点击可以出发一个javascript callback或者一个链接来在新的窗口打开

graph LR;
    A-->B;
    click A callback "Tooltip"
    click B "http://www.github.com" "This is a link"

<script>
    var callback = function(){
        alert('A callback was triggered');
    }
<script>

graph LR;
A-->B;
click A callback "Tooltip"
click B "http://www.github.com" "This is a link"

添加样式

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
    linkStyle 0 stroke:#ff3,stroke-width:4px;

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
linkStyle 0 stroke:#ff3,stroke-width:4px;

使用linkStyle num来为第num条边指定样式

使用style node_name来为名称为node_name的节点指定样式

最后，一个小例子

graph LR
    A[Hard edge] --Link text--> B(Round edge)
    B --> C{Decision}
    C --One--> D[Result one]
    C --Two--> E[Result two]
    linkStyle 3 stroke:#ff3,stroke-width:4px;

graph LR
A[Hard edge] --Link text--> B(Round edge)
B --> C{Decision}
C --One--> D[Result one]
C --Two--> E[Result two]
linkStyle 3 stroke:#ff3,stroke-width:4px;

[1]:本文内容来源于mermaid官方手册