文章目录
mermaid中文文档
关于本文的几点声明
1. 当前文档翻译自mermaid.GitBook
2. 本文大部分主要为mermaid语法使用方面的内容,其它部分暂时略过
mermaid
以类似于标记的方式从文本生成图表和流程图。
在解释代码时,曾经想过简化文档并避免像Visio这样的沉重工具吗?
这就是为什么mermaid诞生的原因,这是一种简单的类似于标记的脚本语言,用于通过javascript从文本生成图表。用我们的编辑试试。
流程图示例
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
序列图示例
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
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
实时编辑器Mermaid Live Editor
流程图.基本语法
流程图
这个语句声明了一个新的图和图形布局的方向。
这声明了一个从上到下面向图。
graph TD
Start --> Stop
这声明了一个从左到右的面向图。
可能的方向是:
* TB – top bottom
* BT – bottom top
* RL – right left
* LR – left right
* TD – same as TB
graph LR
Start --> Stop
节点和形状
节点(默认)
graph LR
id
请注意,ID是在框中显示的。
带有文本的节点
还可以在框中设置与id不同的文本。如果多次这样做,这将是将使用的节点的最后一个文本。另外,如果稍后为节点定义边缘,则可以省略文本定义。先前定义的一个将在呈现框时使用。
graph LR
id1[This is the text in the box]
圆边节点
graph LR
id1(This is the text in the box)
圆形式的节点
graph LR
id1((This is the text in the circle))
不对称形状的节点
graph LR
id1>This is the text in the box]
目前,只有上面的形状是可能的,而不是它的镜子。随着将来的发布,这种情况可能会发生变化。
节点(菱形)
graph LR
id1{This is the text in the box}
节点之间的链接
节点可以与链接/边缘连接。可以有不同类型的链接或将文本字符串附加到链接。
有箭头的链接
graph LR
A-->B
公开链接
graph LR
A --- B
链接文本
graph LR
A-- This is the text ---B
或者
graph LR
A---|This is the text|B
箭头和文字的链接
graph LR
A-->|text|B
或者
graph LR
A-- text -->B