使用语雀文档的“文本绘图”功能 支持实时预览，且能下载对应SVG图片，不过在线编辑非常不方便，建议使用 Sublime Text 或其他编辑工具操作

文本绘图说明

输入 “/” 后，选择 “文本绘图”

image.png
如下图所示，点击 “放大” 按钮后，可以在编辑区域编辑对应的代码，然后实时预览流程图。也可直接编辑代码但是需要点击 “预览” 按钮才能预览。建议直接进入全屏模式，以便实时预览流程图效果。
image.png
一个简单的实例，截图如下：
image.png
具体的效果如下：

  1. @startuml
  2. start
  3. :进入“营销中心”;
  4. :进入“定金预售”;
  5. floating note right: 后文“预售”指“定金预售”
  6. if (已开启预售功能) then (yes)
  7. else (no)
  8.     :进入预售介绍页;
  9.     if (版本控制支持) then (yes)
  10.         :显示“开启”按钮;
  11.     else (no)
  12.         :显示“升级版本获取应用”按钮;
  13.     stop
  14.     endif
  15. endif
  16. @enduml

如何绘制流程图(二) - 图4技巧：

  1. 全屏编辑时，如果流程图比较大，可以右击流程图选择新标签页打开，可以全屏查看流程图。相比只有右半屏幕查看，更便捷。
  2. 使用 Sublime text + 对应的操作快捷键，可以进一步提供流程图的绘制速度。

常用代码

打开此页面，复制粘贴可提高文本绘图的编写效率

if-else

  1. /*框架*/
  2. @startuml
  3. start
  4. stop
  5. @enduml
  7. /*if-else*/
  8. if () then (yes)
  9.     :;
  10. else (no)
  11.     :;
  12. stop
  13. endif

While

尽量避免使用，避免增加流程图的复杂度。

  1. /*先判断，再循环*/
  2. while () is(no)
  3.   :;
  4. endwhile
  6. /*先循环，再判断*/
  7. repeat
  8.   :;
  9. repeat while (more data?)

Note

  1. floating note left: This is a note
  3. note left
  4. end note
  6. note right
  7. end note

分支

  1. fork
  2. fork again
  3.     detach
  4. end fork

模块

  1. /*花括号前保留空格*/
  2. partition 待支付订单 {
  3. }