Flowchart

Flowchart 是一种通过文本方式描述的流程图，通过它你仅需几行代码即可在文档中绘制流程图。

语法简介

Flowchart 的语法来源于 js-sequence-diagrams ，定义流程图分为下边两步。

定义流程图元素

name=>type: content:>url

name: 元素的名称

type：类型，包括如下类别：

  • start
  • end
  • operation
  • subroutine
  • condition
  • inputoutput
  • parallel
    content：文本内容

url：连接

示例：

  1. st=>start: Start:>http://www.google.com[blank]
  2. e=>end:>http://www.google.com
  3. op1=>operation: My Operation
  4. sub1=>subroutine: My Subroutine
  5. cond=>condition: Yes or No?:>http://www.google.com
  6. io=>inputoutput: catch something...
  7. para=>parallel: parallel tasks

连接元素

使用 -> 符号即可：

  1. cond(yes)->io->e
  2. cond(no)->op1->e

操作入口

插入卡片 -> 选择 Flowchart

20190121200656.png

示例

示例 1

效果：

Flowchart - 图2

代码：

  1. st=>start: Start:>http://www.google.com[blank]
  2. e=>end:>http://www.google.com
  3. op1=>operation: My Operation
  4. sub1=>subroutine: My Subroutine
  5. cond=>condition: Yes
  6. or No?:>http://www.google.com
  7. io=>inputoutput: catch something...
  8. para=>parallel: parallel tasks
  9.  
  10. st->op1->cond
  11. cond(yes)->io->e
  12. cond(no)->para
  13. para(path1, bottom)->sub1(right)->op1
  14. para(path2, top)->op1

示例 2

效果：

Flowchart - 图3

代码：

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

示例 3

效果：

Flowchart - 图4

代码：

  1. st=>start: Improve your
  2. l10n process!
  3. e=>end: Continue to have fun!:>https://youtu.be/YQryHo1iHb8[blank]
  4. op1=>operation: Go to locize.com:>https://locize.com[blank]
  5. sub1=>subroutine: Read the awesomeness
  6. cond(align-next=no)=>condition: Interested to
  7. getting started?
  8. io=>inputoutput: Register:>https://www.locize.io/register[blank]
  9. sub2=>subroutine: Read about improving
  10. your localization workflow
  11. or another source:>https://medium.com/@adrai/8-signs-you-should-improve-your-localization-process-3dc075d53998[blank]
  12. op2=>operation: Login:>https://www.locize.io/login[blank]
  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
  19.  
  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
  29.  
  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"})

参考资料

https://flowchart.js.org/

https://bramp.github.io/js-sequence-diagrams/

https://blog.csdn.net/ethmery/article/details/50670294

若有收获，就赏束稻谷吧

7 颗稻谷