Markdown Sublime flowchart.js 流程图

先亮出来一个 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 插件很不错，可以实时编辑预览，长这样：