mermaid流程图工具_Markdown绘图插件 —— Mermaid教程

mermaid简介

当撰写文档的时候，对于流程图的生成大多使用Visio等繁重的工具，没有一种轻便的工具能够画图从而简化文档的编写，就像markdown那样。

mermaid解决这个痛点，这是一个类似markdown语法的脚本语言，通过JavaScript实现图表的生成。

先来看个例子:

1、流程图(flowchart)graph LR;

A-->B;

A-->C;

B-->D;

C-->D;

生成的图表如下所示：

2、时序图(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 
prevail...

John-->Alice:Great!

John->Bob: How about you?

Bob-->John: Jolly good!

生成的图表如下所示：

3、甘特图(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

生成的表如下：

下游项目

Mermaid 是由Knut Sveidqbist发起旨在轻便化的文档撰写。所有开发者:开发者列表

Graphgraph 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

id[This is the text in the box];圆角节点