简单流程图

MinDoc 中，流程图是以 ```flow 开始并以 ``` 结尾的区块中，假如：

  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
  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
Created with Raphaël 2.1.2StartMy OperationYesor No?catch something...End

带有颜色块的流程图

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

参考

流程图插件官网： http://flowchart.js.org/