Markdown入门5

6、流程图

Markdown支持mermaid插件、flowchart.js插件流程图
mermaid插件流程图：

• 用关键字graph表示一个流程图的开始，同时指定该图的方向,例如

  graph TD 
  A --> B

  

• 有如下方向可以选择：
  TB（ top bottom）表示从上到下
  BT（bottom top）表示从下到上
  RL（right left）表示从右到左
  LR（left right）表示从左到右
  TD与TB一样表示从上到下

  ```
  graph TD 
  A --> B
  ```
  ```
  graph LR
  A --> B
  ```
  ```
  graph BT
  A --> B
  ```
  ```
  graph RL
  A --> B
  ```
  ```
  graph TB
  A --> B
  ```
  

  

• 有以下几种节点和形状：
  默认节点 A
  文本节点 B[b的名称]
  圆角节点 C(c的名称)
  圆形节点 D((d的名称))
  非对称节点 E>e的名称]
  菱形节点 F{f的名称}
  以上大写字母表示节点，大写字母后面文字表示它的名称，默认节点的A同时表示该节点和它的名称：

  ```
  graph TD 
  A
  B[b的名称]
  C(c的名称)
  D((d的名称))
  E>e的名称]
  F{f的名称}
  ```
  

  

• 节点间的连接线有多种形状，而且可以在连接线中加入标签：
  箭头连接 A1–>B1
  开放连接 A2—B2
  标签连接 A3–text—B3 或者 A3—|text|B3
  箭头标签连接 A4–text –>B4 或者 A4–>|text|B4
  虚线开放连接 A5.-B5 或者 A5-.-B5 或者 A5..-B5
  虚线箭头连接 A6.->B6 或者 A6-.->B6
  标签虚线连接 A7-.text.-B7
  标签虚线箭头连接 A8-.text.->B8
  粗线开放连接 A9===B9
  粗线箭头连接 A10==>B10
  标签粗线开放连接 A11==text===B11
  标签粗线箭头连接 A12==text==>B12

  ```
  graph TD 
  A1-->B1
  A2---B2
  A3--text---B3
  A3---|text|B3
  A4--text-->B4
  A4-->|text|B4
  A5.-B5
  A5-.-B5
  A5..-B5
  ```
  ```
  graph TD 
  A6.->B6
  A6-.->B6
  A6..->B6
  A7-.text.-B7
  A8-.text.->B8
  A9===B9
  ```
  ```
  graph TD 
  A10==>B10
  A11==text===B11
  A12==text==>B12
  ```
  

  
  flowchart.js插件画流程图：

  ```flow
  st=>start: 开始
  e=>end: 结束
  op=>operation: 操作
  sub=>subroutine: 子程序
  cond=>condition: 是或者不是?
  io=>inputoutput: 输出
  st(right)->op->cond
  cond(yes)->io(right)->e
  cond(no)->sub(right)->op
  ```
  

  有以下几种关键词:

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

  模块定义(模块标识与模块名称可以任意定义名称,关键词不可随意取名)如下:

  模块标识=>模块关键词: 模块名称
  

  连接定义如下:

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

  再进行连接的时候, 可以通过right,left确定箭头的起点. 值得注意的是, 使用condition关键词定义的判断框的连接需要结合yes或者no进行. 官方的flowchart.js还支持模块颜色的定义以及超链接的定义,如下代码与其对应的流程图:

  ```flow
  st=>start: Start|past:>http://www.google.com[blank]
  e=>end: End:>http://www.google.com
  op1=>operation: My Operation|past
  op2=>operation: Stuff|current
  sub1=>subroutine: My Subroutine|invalid
  cond=>condition: Yes 
  or No?|approved:>http://www.baidu.com
  c2=>condition: Good idea|rejected
  io=>inputoutput: catch something...|request
  st->op1(right)->cond
  cond(yes, right)->c2
  cond(no)->sub1(left)->op1
  c2(yes)->io->e
  c2(no)->op2->e
  ```
  

相关链接

1、程序员分类目录导航
2、Markdown入门1
3、Markdown入门2
4、Markdown入门3
5、Markdown入门4
6、Markdown入门6
7、Markdown入门7
8、Markdown入门8