流程图

示例

  1. ```flow
  2. st=>start: Start:>https://www.zybuluo.com
  3. io=>inputoutput: verification
  4. op=>operation: Your Operation
  5. cond=>condition: Yes or No?
  6. sub=>subroutine: Your Subroutine
  7. e=>end
  9. st->io->op->cond
  10. cond(yes)->e
  11. cond(no)->sub->io
  1. 效果如下：
  2. ![](https://cdn.nlark.com/yuque/__flowchart/301e435a5fcd0d87489910746b85a1ce.svg#lake_card_v2=eyJ0eXBlIjoiZmxvd2NoYXJ0IiwiY29kZSI6InN0PT5zdGFydDogU3RhcnQ6Pmh0dHBzOi8vd3d3Lnp5YnVsdW8uY29tXG5pbz0-aW5wdXRvdXRwdXQ6IHZlcmlmaWNhdGlvblxub3A9Pm9wZXJhdGlvbjogWW91ciBPcGVyYXRpb25cbmNvbmQ9PmNvbmRpdGlvbjogWWVzIG9yIE5vP1xuc3ViPT5zdWJyb3V0aW5lOiBZb3VyIFN1YnJvdXRpbmVcbmU9PmVuZFxuXG5zdC0-aW8tPm9wLT5jb25kXG5jb25kKHllcyktPmVcbmNvbmQobm8pLT5zdWItPmlvIiwidXJsIjoiaHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlL19fZmxvd2NoYXJ0LzMwMWU0MzVhNWZjZDBkODc0ODk5MTA3NDZiODVhMWNlLnN2ZyIsImlkIjoiOGU5YjU3NWYiLCJjYXJkIjoiZGlhZ3JhbSJ9)
  3. <a name="db6a32f8"></a>
  4. #### 更多语法参考：[流程图语法参考](http://adrai.github.io/flowchart.js/)
  6. <a name="7f555101"></a>
  7. ### 序列图
  9. <a name="1ee999b7"></a>
  10. #### 示例1
Alice->Bob: Hello Bob, how are you? Note right of Bob: Bob thinks Bob-->Alice: I am good thanks!
  1. 效果如下：<br />![序列图示例1.png](https://cdn.nlark.com/yuque/0/2021/png/21434375/1619089442010-0bbdeb49-f64b-462f-89d6-f2ea4fd69fa2.png#clientId=ue6c6eb56-ce09-4&from=ui&id=ZiDM3&margin=%5Bobject%20Object%5D&name=%E5%BA%8F%E5%88%97%E5%9B%BE%E7%A4%BA%E4%BE%8B1.png&originHeight=249&originWidth=376&originalType=binary&size=2774&status=done&style=none&taskId=u424bddd1-8b64-4e51-ad7a-64411d88a99)
  3. <a name="i3GZb"></a>
  4. #### 示例2
Title: Here is a title A->B: Normal line B-->C: Dashed line C->>D: Open arrow D-->>A: Dashed open arrow
  1. 效果如下：<br />![序列图示例2.png](https://cdn.nlark.com/yuque/0/2021/png/21434375/1619089454127-c17000c1-7e56-4f82-9cba-b5f876da1da9.png#clientId=ue6c6eb56-ce09-4&from=ui&id=DrvXF&margin=%5Bobject%20Object%5D&name=%E5%BA%8F%E5%88%97%E5%9B%BE%E7%A4%BA%E4%BE%8B2.png&originHeight=286&originWidth=376&originalType=binary&size=3731&status=done&style=none&taskId=u6e096739-a0c5-499a-96b2-d72bde06929)
  2. <a name="fed0832b"></a>
  3. #### 更多语法参考：[序列图语法参考](http://bramp.github.io/js-sequence-diagrams/)
  5. <a name="ccfc219f"></a>
  6. ### 甘特图
  8. 甘特图内在思想简单。基本是一条线条图，横轴表示时间，纵轴表示活动（项目），线条表示在整个期间上计划和实际的活动完成情况。它直观地表明任务计划在什么时候进行，及实际进展与计划要求的对比。
  10. <a name="AUmFW"></a>
  11. #### 示例
  1.     title 项目开发流程
  2.     section 项目确定
  3.         需求分析       :a1, 2016-06-22, 3d
  4.         可行性报告     :after a1, 5d
  5.         概念验证       : 5d
  6.     section 项目实施
  7.         概要设计      :2016-07-05  , 5d
  8.         详细设计      :2016-07-08, 10d
  9.         编码          :2016-07-15, 10d
  10.         测试          :2016-07-22, 5d
  11.     section 发布验收
  12.         发布: 2d
  13.         验收: 3d
  2. 效果如下：<br />![甘特图.png](https://cdn.nlark.com/yuque/0/2021/png/21434375/1619089597550-c3fddb2b-3eac-458f-a40b-4bf1ffbcfa05.png#clientId=ue6c6eb56-ce09-4&from=ui&id=VBTUI&margin=%5Bobject%20Object%5D&name=%E7%94%98%E7%89%B9%E5%9B%BE.png&originHeight=296&originWidth=852&originalType=binary&size=15079&status=done&style=none&taskId=u9a879d90-a78b-4b9f-b4c5-dadcc463046)
  4. <a name="e68e130f"></a>
  5. #### 更多语法参考：[甘特图语法参考](https://knsv.github.io/mermaid/#gant-diagrams)
  7. <a name="f71acda9"></a>
  8. ### Mermaid 流程图
  9. <a name="ZLKfC"></a>
  10. #### 示例
  1.     A[Hard edge] -->|Link text| B(Round edge)
  2.     B --> C{Decision}
  3.     C -->|One| D[Result one]
  4.     C -->|Two| E[Result two]
  1. 效果如下：<br />![Mermaid 流程图.png](https://cdn.nlark.com/yuque/0/2021/png/21434375/1619089613381-1c0df82b-f4cf-42cd-b843-0587341c715d.png#clientId=ue6c6eb56-ce09-4&from=ui&id=cTsEK&margin=%5Bobject%20Object%5D&name=Mermaid%20%E6%B5%81%E7%A8%8B%E5%9B%BE.png&originHeight=161&originWidth=601&originalType=binary&size=11937&status=done&style=none&taskId=u2680f762-0022-4820-bec4-07e49bdd06d)
  3. <a name="bc5c96cf"></a>
  4. #### 更多语法参考：[Mermaid 流程图语法参考](https://knsv.github.io/mermaid/#flowcharts-basic-syntax)
  6. <a name="0dfa16ea"></a>
  7. ### Mermaid 序列图
  8. <a name="QJhl8"></a>
  9. #### 示例
Alice->John: Hello John, how are you? loop every minute John-->Alice: Great! end

```

效果如下：
Mermaid 序列图.png

更多语法参考：Mermaid 序列图语法参考