先亮出来一个 flowchart.js 的 Sample

1. 给 Sublime 安装 MarkdownPreview，这个不必多说了

2. Sublime Text -> Preferences -> Package Settings -> Markdown Preview -> Settings

3. 修改 MarkdownPreview.sublime-settings 文件：

   {
   "enable_uml": true,
   /*
   Enable or not mathjax support.
   */
   "enable_mathjax": true,

   /*
       Enable highlighting. This enables codehilite extension if not already enabled.
   */
   "enable_highlight": true,
   
   "js": [        // Required libraries to transform UML notation
       "https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js",
       "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js",
       "https://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js",
       "https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.12.2/flowchart.min.js",
       // This library applies the above libraries to the fenced code blocks `flow` and `sequence`.
       "res://MarkdownPreview/js/uml.js"
   ],

   }

保存，关闭

然后在你的 fuck.md 文件中输入

```flow
st=>start: Start:>https://www.google.com[blank]
e=>end:>https://www.google.com
op1=>operation: My Operation|current
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>https://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
```

然后 Preview

注意 => 两边不能有空格

语法:

nodeName=>nodeType: nodeText[|flowstate][:>urlLink]

[] 里的内容可选

2019.11.13 更新：

Chrome 有个 MDEditor 插件很不错，可以实时编辑预览，长这样：