1. 首页
  2. JavaScript
  3. Markdown 流程图 flowchart.js

Markdown 流程图 flowchart.js

2019/03/19 20:36:00 发表 2019/03/19 21:13:21 更新 原创 雨辰 1826 2 0

一、前言

flowchart.js 是一个通过文本描述绘制简单 SVG 流程图的工具。它是一个开源项目。目前多数 Markdown 编辑器都已支持 flowchart.js 流程图，或者在 Web 网页中直接使用它。如果你想绘制简单的 SVG 流程图，而不是使用图片截图展示流程图，它是一个不错的选择。它的优点：可以随时修改文本重新绘制流程图；SVG 流程图比图片加载更快，并且是矢量展示。

二、流程图语法

流程图语法为 2 部分：定义标签，连接标签。

1、定义标签

语法：tag=>type: content:>url

注意，语法中type: content冒号与 content 之间需要有一个空格。

  • tag 标签名称，用于连接标签。
  • type 标签类型，类型分为 7 种。
    • start 开始标签。
    • end 结束标签。
    • operation 作业标签。
    • subroutine 子程序标签。
    • condition 条件标签。
    • inputoutput 输入输出标签。
    • parallel 平行标签。
  • content 标签文本内容。
  • url 标签超链接。

在url后天添加[blank]可以控制超链接打开的方式，下面示例中有提到。

注意，标签文本content中不能使用的符号有：=>、->、:>、|、@>。

2、连接标签

使用->符号将标签连接起来。例如：

  1. st=>start: 开始:>https://www.123si.org
  2. op1=>operation: 作业1
  3. op2=>operation: 作业2
  4. e=>end: 结束:>https://www.123si.org[blank]
  6. st->op1(right)->op2->e
st=>start: 开始:>https://www.123si.org op1=>operation: 作业1 op2=>operation: 作业2 e=>end: 结束:>https://www.123si.org[blank] st->op1(right)->op2->e

标签连接时可以提供参数，在标签名称后面使用小括号()，括号里面放置参数。关于参数，官方文档并没有提到更多，只能在示例中查看了，本文会持续更新。例如：

  1. st=>start: 开始
  2. e=>end: 结束
  3. op1=>operation: 作业1
  4. sub1=>subroutine: 子程序
  5. cond=>condition: Yes or No?
  6. io=>inputoutput: 输入输出
  7. para=>parallel: 并行任务
  9. st->op1->cond
  10. cond(yes)->io->e
  11. cond(no)->para
  12. para(path1, bottom)->sub1(right)->op1
  13. para(path2, top)->op1
st=>start: 开始 e=>end: 结束 op1=>operation: 作业1 sub1=>subroutine: 子程序 cond=>condition: Yes or No? io=>inputoutput: 输入输出 para=>parallel: 并行任务 st->op1->cond cond(yes)->io->e cond(no)->para para(path1, bottom)->sub1(right)->op1 para(path2, top)->op1

三、Markdown 流程图

在支持 flowchart.js 的 Markdown 编辑器中，需要将流程图的语法写在特定的代码块中。例如：

  1. ```flow
  2. st=>start: 开始:>https://www.123si.org
  3. op1=>operation: 作业1
  4. op2=>operation: 作业2
  5. e=>end: 结束:>https://www.123si.org[blank]
  7. st->op1(right)->op2->e
  8. ```

四、流程图路径设置

如果要强调流程图中的特定路径，可以另外定义如下：

  1. st@>op1({"stroke":"Red"})@>cond({"stroke":"Red"})@>para({"stroke":"Red","stroke-width":4,"arrow-end":"classic-wide-long"})@>sub1({"stroke":"Red"})@>e({"stroke":"Red"})
参数 描述
stroke 设置路径颜色。
stroke-width 设置路径粗细。
arrow-end 设置路径的箭头样式。参数 classic-wide-long 
  1. st=>start: 开始
  2. e=>end: 结束
  3. op1=>operation: 作业1
  4. sub1=>subroutine: 子程序
  5. cond=>condition: Yes or No?
  6. io=>inputoutput: 输入输出
  7. para=>parallel: 并行任务
  9. st->op1->cond
  10. cond(yes)->io->e
  11. cond(no)->para
  12. para(path1, bottom)->sub1(right)->op1
  13. para(path2, top)->op1
  15. st@>op1({"stroke":"Red"})@>cond({"stroke":"Red"})@>para({"stroke":"Red","stroke-width":4,"arrow-end":"classic-wide-long"})@>sub1({"stroke":"Red"})@>e({"stroke":"Red"})
st=>start: 开始 e=>end: 结束 op1=>operation: 作业1 sub1=>subroutine: 子程序 cond=>condition: Yes or No? io=>inputoutput: 输入输出 para=>parallel: 并行任务 st->op1->cond cond(yes)->io->e cond(no)->para para(path1, bottom)->sub1(right)->op1 para(path2, top)->op1 st@>op1({"stroke":"Red"})@>cond({"stroke":"Red"})@>para({"stroke":"Red","stroke-width":4,"arrow-end":"classic-wide-long"})@>sub1({"stroke":"Red"})@>e({"stroke":"Red"})

五、更多示例

示例 1

st=>start: Start|past e=>end: End|future op1=>operation: My Operation|past op2=>operation: Stuff|current sub1=>subroutine: My Subroutine|invalid cond=>condition: Yes or No?|approved c2=>condition: Good idea|rejected io=>inputoutput: catch something...|future st->op1(right)->cond cond(yes, right)->c2 cond(no)->sub1(left)->op1 c2(yes)->io->e c2(no)->op2->e
  1. st=>start: Start|past
  2. e=>end: End|future
  3. op1=>operation: My Operation|past
  4. op2=>operation: Stuff|current
  5. sub1=>subroutine: My Subroutine|invalid
  6. cond=>condition: Yes or No?|approved
  7. c2=>condition: Good idea|rejected
  8. io=>inputoutput: catch something...|future
  10. st->op1(right)->cond
  11. cond(yes, right)->c2
  12. cond(no)->sub1(left)->op1
  13. c2(yes)->io->e
  14. c2(no)->op2->e

示例 2

st=>start: Improve your l10n process! e=>end: Continue to have fun! op1=>operation: Go to ... sub1=>subroutine: Read the awesomeness cond(align-next=no)=>condition: Interested to getting started? io=>inputoutput: Register sub2=>subroutine: Read about improving your localization workflow or another source op2=>operation: Login cond2=>condition: valid password? cond3=>condition: reset password? op3=>operation: send email sub3=>subroutine: Create a demo project sub4=>subroutine: Start your real project io2=>inputoutput: Subscribe st->op1->sub1->cond cond(yes)->io->op2->cond2 cond2(no)->cond3 cond3(no,bottom)->op2 cond3(yes)->op3 op3(right)->op2 cond2(yes)->sub3 sub3->sub4->io2->e cond(no)->sub2(right)->op1 st@>op1({"stroke":"Red"})@>sub1({"stroke":"Red"})@>cond({"stroke":"Red"})@>io({"stroke":"Red"})@>op2({"stroke":"Red"})@>cond2({"stroke":"Red"})@>sub3({"stroke":"Red"})@>sub4({"stroke":"Red"})@>io2({"stroke":"Red"})@>e({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})
  1. st=>start: Improve your
  2. l10n process!
  3. e=>end: Continue to have fun!
  4. op1=>operation: Go to ...
  5. sub1=>subroutine: Read the awesomeness
  6. cond(align-next=no)=>condition: Interested to
  7. getting started?
  8. io=>inputoutput: Register
  9. sub2=>subroutine: Read about improving
  10. your localization workflow
  11. or another source
  12. op2=>operation: Login
  13. cond2=>condition: valid password?
  14. cond3=>condition: reset password?
  15. op3=>operation: send email
  16. sub3=>subroutine: Create a demo project
  17. sub4=>subroutine: Start your real project
  18. io2=>inputoutput: Subscribe
  20. st->op1->sub1->cond
  21. cond(yes)->io->op2->cond2
  22. cond2(no)->cond3
  23. cond3(no,bottom)->op2
  24. cond3(yes)->op3
  25. op3(right)->op2
  26. cond2(yes)->sub3
  27. sub3->sub4->io2->e
  28. cond(no)->sub2(right)->op1
  30. st@>op1({"stroke":"Red"})@>sub1({"stroke":"Red"})@>cond({"stroke":"Red"})@>io({"stroke":"Red"})@>op2({"stroke":"Red"})@>cond2({"stroke":"Red"})@>sub3({"stroke":"Red"})@>sub4({"stroke":"Red"})@>io2({"stroke":"Red"})@>e({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})

（完）