markdown 画图

markdown是轻文本编辑器，并不像word那么强大，所以画图也是轻量级的，功能并不全。如使用mermaid画图时不能从上往下，同时又从右往左。 推荐markdown编辑软件 - typora

###使用方法

在下列各种图的代码块外   开始添加 ```mermaid 结尾添加``` 即可

1.  ```mermaid
    
2.  graph LR;
    
3.    A-->B
    
4.    B-->C
    
5.    C-->D
    
6.    D-->A
    
7.  ```
    

​效果如下：

###graph（流程图）

• 节点名不能与关键字同名
• 使用引号可以避免一些不必要的麻烦，如避免与关键字同名

​​关键字graph表示一个流程图的开始，同时需要指定该图的方向

​​图方向

• TB，从上到下
• TD，从上到下
• BT，从下到上
• RL，从右到左
• LR，从左到右

T = TOP，B = BOTTOM，L = LEFT，R = RIGHT，D = DOWN

1.  graph LR;
    
2.    A-->B
    
3.    B-->C
    
4.    C-->D
    
5.    D-->A
    

节点形状

• 默认节点 A
• 文本节点 B[bname]
• 圆角节点 C(cname)
• 圆形节点 D((dname))
• 非对称节点 E>ename]
• 菱形节点 F{fname}

A~F 是当前节点名字，类似于变量名，画图时便于引用

[b~f]name是节点中显示的文字，默认节点的名字和显示的文字都为A

1.  graph TB
    
2.    A
    
3.    B[bname]
    
4.    C(cname)
    
5.    D((dname))
    
6.    E>ename]
    
7.    F{fname}
    

连线

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

• 箭头连接 A1–->B1
• 开放连接 A2—B2
• 标签连接 A3–text—B3
• 箭头标签连接 A4–text–>B4
• 虚线开放连接 A5.-B5
• 虚线箭头连接 A6-.->B6
• 标签虚线连接 A7-.text.-B7
• 标签虚线箭头连接 A8-.text.->B8
• 粗线开放连接 A9===B9
• 粗线箭头连接 A10==>B10
• 标签粗线开放连接 A11==text===B11
• 标签粗线箭头连接 A12==text==>B12

1.  graph TB
    
2.    A1-->B1
    
3.    A2---B2
    
4.    A3--text---B3
    
5.    A4--text-->B4
    
6.    A5-.-B5
    
7.    A6-.->B6
    
8.    A7-.text.-B7
    
9.    A8-.text.->B8
    
10.   A9===B9
    
11.   A10==>B10
    
12.   A11==text===B11
    
13.   A12==text==>B12
    

 example

1.  graph LR
    
2.    start("input x") --> handler("x > 0?")
    
3.    handler --yes--> yes("output x")
    
4.    handler --no--> start
    
5.    yes --> exit("exit")
    

​

###subgraph（子图）

格式

1.  # 外面的那层, 可以使用子图中的节点，子图中的节点名不是隔离的，可以认为是全局变量-.-
    
2.  graph LR
    
3.    subgraph title1
    
4.      graph definition 
    
5.    end
    
6.    subgraph title2
    
7.      graph definition 
    
8.    end
    
9.    ...
    

如

1.  graph LR
    
2.    subgraph g1
    
3.      a1-->b1
    
4.    end
    
5.    subgraph g2
    
6.      a2-->b2
    
7.    end
    
8.    subgraph g3
    
9.      a3-->b3
    
10.   end
    
11.   a3-->a2
    

​

###sequence diagram （序列图）

关键字

• participant，参与者，相当先定义模块，可通过设定参与者(participant)的顺序控制展示顺序

• note， 便签，格式如下

  
  
  1.  note [right of | left of][Actor]:Text
      
  2.  # 给多个模块做标签, 通过逗号分割
      
  3.  note over [Actor1, Actor2...]:Text
      
  
  
  

• ​循环

1.  loop Loop_text
    
2.  ... statements...
    
3.  end
    

• 选择

  
  
  1.  alt Describing_text
      
  2.  ...statements...
      
  3.  else
      
  4.  ...statements...
      
  5.  end
      
  
  7.  # 推荐在没有else的情况下使用 opt(option,选择)
      
  
  9.  opt Describing_text
      
  10. ...statements...
      
  11. end
      
  
  
  

  实例：

  
  
  1.  sequenceDiagram
      
  2.  　　Alice->>Bob: Hello Bob, how are you?
      
  3.  　　alt is sick
      
  4.  　　　　Bob->>Alice:not so good :(
      
  5.  　　else is well
      
  6.  　　　　Bob->>Alice:good
      
  7.  　　end
      
  8.  　　opt Extra response
      
  9.  　　　　Bob->>Alice:Thanks for asking
      
  10. 　　end
      
  
  
  

​

连线

• 无箭头实线 ->
• 有箭头实线 ->>
• 无箭头虚线 –>
• 有箭头虚线 –>>
• 带x实线 -x
• 带x虚线 –x

如

1.  sequenceDiagram
    
2.    Note right of A: 倒霉, 碰到B了
    
3.    A->B:   Hello B, how are you ?
    
4.    note left of B: 倒霉,碰到A了
    
5.    B-->A:  Fine, thx, and you?
    
6.    note over A,B: 快点溜，太麻烦了
    
7.    A->>B:  I'm fine too.
    
8.    note left of B: 快点打发了A
    
9.    B-->>A: Great!
    
10.   note right of A: 溜之大吉
    
11.   A-xB:   Wait a moment
    
12.   loop Look B every minute
    
13. 　  A->>B: look B, go?
    
14. 　　B->>A: let me go?
    
15. 　end
    
16. 　B--xA: I'm off, byte 　
    
17.   note right of A: 太好了, 他走了
    

想改变AB的顺序怎么办呢？

1.  sequenceDiagram
    
2.    # 通过设定参与者(participant)的顺序控制展示顺序
    
3.    participant B
    
4.    participant A
    
5.     Note right of A: 倒霉, 碰到B了
    
6.    A->B:   Hello B, how are you ?
    
7.    note left of B: 倒霉,碰到A了
    
8.    B-->A:  Fine, thx, and you?
    
9.    note over A,B:快点溜，太麻烦了。。。
    
10.   A->>B:  I'm fine too.
    
11.   note left of B: 快点打发了A
    
12.   B-->>A: Great!
    
13.   note right of A: 溜之大吉
    
14.   A-xB:   Wait a moment
    
15.   loop Look B every minute
    
16. 　  A->>B: look B, go?
    
17. 　　B->>A: let me go?
    
18. 　end
    
19. 　B--xA: I'm off, byte 　
    
20.   note right of A: 太好了, 他走了
    

1.  sequenceDiagram
    
2.    # 通过设定参与者(participants)的顺序控制展示模块顺序
    
3.    participant Alice
    
4.  　participant Bob
    
5.  　participant John
    
6.  　Alice->John:Hello John, how are you?
    
7.  　loop Healthcheck
    
8.  　  John->John:Fight against hypochondria
    
9.  　end
    
10. 　Note right of John:Rational thoughts prevail...
    
11. 　John-->Alice:Great!
    
12. 　John->Bob: How about you?
    
13. 　Bob-->John: good!
    

###gantt diagram(甘特图)

甘特图是一类条形图，由Karol Adamiechi在1896年提出, 而在1910年Henry Gantt也独立的提出了此种图形表示。通常用在对项目终端元素和总结元素的开始及完成时间进行的描述

​​关键字

1.  gantt
    
2.  dateFormat YYYY-MM-DD
    
3.  section S1
    
4.  T1: 2014-01-01, 9d
    
5.  section S2
    
6.  T2: 2014-01-11, 9d
    
7.  section S3
    
8.  T3: 2014-01-02, 9d
    

1.  gantt
    
2.      dateFormat  YYYY-MM-DD
    
3.      title Adding GANTT diagram functionality to mermaid
    

5.      section A section
    
6.      Completed task            :done,    des1, 2014-01-06,2014-01-08
    
7.      Active task               :active,  des2, 2014-01-09, 3d
    
8.      Future task               :         des3, after des2, 5d
    
9.      Future task2               :         des4, after des3, 5d
    

11.     section Critical tasks
    
12.     Completed task in the critical line :crit, done, 2014-01-06,24h
    
13.     Implement parser and jison          :crit, done, after des1, 2d
    
14.     Create tests for parser             :crit, active, 3d
    
15.     Future task in critical line        :crit, 5d
    
16.     Create tests for renderer           :2d
    
17.     Add to mermaid                      :1d
    

19.     section Documentation
    
20.     Describe gantt syntax               :active, a1, after des1, 3d
    
21.     Add gantt diagram to demo page      :after a1  , 20h
    
22.     Add another diagram to demo page    :doc1, after a1  , 48h
    

24.     section Last section
    
25.     Describe gantt syntax               :after doc1, 3d
    
26.     Add gantt diagram to demo page      : 20h
    
27.     Add another diagram to demo page    : 48h
    

###sequence（序列图）

关键字

• title，定义序列图的标题

• participant，定义时序图中的对象

• note，定义对时序图中的部分说明

方位控制

1. left of，表示当前对象的左侧
2. right of，表示当前对象的右侧
3. over，表示覆盖在当前对象（们）的上面

• {actor}，表示时序图中的具体对象（名称自定义）
• 箭头分为以下几种：

1. -> 表示实线实箭头
2. –> 表示虚线实箭头
3. ->> 表示实线虚箭头
4. –>> 表示虚线虚箭头

example

1.  title: 序列图sequence 示例
    
2.  # participant, 参与者
    
3.  participant A
    
4.  participant B
    
5.  participant C
    

7.  note left of A: A左侧说明
    
8.  note over B: 覆盖B的说明
    
9.  note right of C: C右侧说明
    

11. # - 代表实线, -- 代表虚线; > 代表实箭头, >> 代表虚箭头
    
12. A->A:自己到自己
    
13. A->B:实线实箭头
    
14. A-->C:虚线实箭头
    
15. B->>C:实线虚箭头
    
16. B-->>A:虚线虚箭头
    

​

定义可以省略如

1.  A->B: 吃饭了没？
    
2.  # 可在文本中使用换行符\n
    
3.  note right of B: B思考n秒\n如何回答
    
4.  B--A: 吃过了。你咧？
    
5.  A->>B: 吃过了，吃过了！
    

AABB吃饭了没？B思考n秒如何回答吃过了。你咧？吃过了，吃过了！

​

flow（流程图）

关键字

• start/end，表示程序的开始与结束
• operation，表示程序的处理块
• subroutine，表示子程序块
• condition，表示程序的条件判断
• inputoutput，表示程序的出入输出
• right/left，表示当前连线在当前模块上的起点(默认从下端开始)
• yes/no， 表示condition判断的分支(可以和right，left同时使用)

通过定义模块与连接，再结合以上关键词即可定义简单流程图的各个模块。

模块定义(模块标识与模块名称可以任意定义名称，但是不能为关键词)：

模块标识(相当于变量名)=>模块关键词: 模块名称(模块中显示的文字)

连接定义如下:

1.  模块标识1->模块标识2
    
2.  模块标识1->模块标识2->模块标识3
    
3.  ...
    

进行连接的时候，可以通过right，left确定箭头的起点。

​使用condition关键词定义的判断框的连接需要结合yes或者no使用，如

1.  cond1=>condition: x>0?
    
2.  cond1(yes)->module1
    
3.  cond1(no)->moudle2
    

5.  # 指定方向,如果后面占用了这个方向, 前面的无效 
    
6.  cond1(yes,right)->module1
    
7.  cond1(no)->moudle2
    

1.  # 先自定义变量,然后画图
    
2.  st=>start: 开始
    
3.  e=>end: 结束
    
4.  op=>operation: 输入x
    
5.  sub=>subroutine: 是否重新输入
    
6.  cond1=>condition: x>0?
    
7.  cond2=>condition: yes/no 
    
8.  io=>inputoutput: 输出x  
    

10. st(right)->op->cond1
    
11. cond1(yes)->io(right)->e
    
12. cond1(no)->sub(right)->cond2()
    
13. cond2(yes, right)->op
    
14. cond2(no)->e