流程图的markdown语法

流程图的语法

语法大体分为两部分

• 流程图元素定义部分；
• 连接流程图元素部分，该部分用来指明流程图的执行走向。

定义元素的语法

tag=>type: content:>url

实例：

   ```mermaid
    flowchat
    st=>start: 开始
    e=>end: 结束
    op=>operation: 操作
    sub1=>subroutine: 子程序
    cond=>condition: Yes or No?
    io=>inputoutput: 输入/输出
    st->op->cond
    cond(yes)->io->e
    cond(no)->sub1(right)->op
   ```

例如：

Created with Raphaël 2.2.0 开始 操作 Yes or No? 输入/输出 结束 子程序 yes no

说明：

tag=>type: content:>url

• tag 是流程图中的标签，在第二段连接元素时会用到。名称可以任意，一般为流程的英文缩写和数字的组合。
• type 用来确定标签的类型，=>后面表示类型。由于标签的名称可以任意指定，所以要依赖type来确定标签的类型
  标签有6种类型：
  • start 开始
  • end 结束
  • operation 操作、执行说明
  • condition 确认？
  • inputoutput 输入输出
  • subroutine 子程序
• content 是流程图文本框中的描述内容，: 后面表示内容，中英文均可。特别注意，冒号与文本之间一定要有个空格
• url是一个链接，与框框中的文本相绑定，:>后面就是对应的 url 链接，点击文本时可以通过链接跳转到url指定页面

连接流程图元素

示例代码后面部分

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

连接流程图元素阶段的语法就简单多了，直接用->来连接两个元素

说明：

使用-> 来连接两个元素
对于condition类型，有yes和no两个分支，如示例中的cond(yes)和cond(no)
每个元素可以制定分支走向，默认向下，也可以用right指向右边，如示例中sub1(right)。

	```mermaid
	     flowchat    
 	    st=>start: 生产者线程进入 :>https://donlex.cn
     op1=>operation: 设置Info类的名称和内容
     op2=>operation: 修改标志位
     op3=>operation: 等待线程唤醒
     op4=>operation: 等待消费者取走
     cond=>condition: 判断标志位
    
     st(right)->cond->op1->op2->op3
     cond(yes,right)->op1
     cond(no)->op4
	```

实例：

Created with Raphaël 2.2.0 点击进入我的站点 https://donlex.cn 判断标志位 设置Info类的名称和内容 修改标志位 等待线程唤醒 等待消费者取走 yes no

上面的流程图使用了URL点击上面的的开始框，就会跳转到我的站点首页。
这里再强调一下：每一个元素都可以加上right指明流程流程图的方向，如果不指定的话默认是向下的