Markflow —— 简洁、优雅的在 Markdown 里绘制流程图

Markflow

—— 简洁、优雅的在 Markdown 里绘制流程图

作为一个程序员，给别人写文档时，总需要加几个流程图。而现在写文档基本都使用 Markdown 来写，因为即使对方没有相应的渲染，源文件也可以无障碍的阅读。

个人觉得这时 Markdown 语法最大的亮点，于是就涉及到了一个问题，如何在 Markdown 文件中画流程图？

搜索了一下，一般的解决方案是采用 Flowchart.js，基本例子如下：

```
st=>start: Start
e=>End
op=>operation: My Operation
cond=>condition: Yes or No?
inp=>Input

st->op->cond
cond(yes)->e
cond(no)->inp->op
···

但是这样的解决方案有个小问题，就是不源代码不直观，个人感觉和 Markdown 简单优雅的哲学背道而驰。

实际上，我觉得更好的解决方案是使用 graph-easy 这样的语法写，但 graph-easy 还是感觉稍微复杂了些，我仅仅准备画一个简单的流程图。

所有我希望设计一种更直观的“语言”，使用更简单些的语法来实现在 Markdown 文本中画“简单”流程图的工作。所以我设计了 Markflow 。

下面是上面的例子用 Markflow 语言实现的版本：

···Markflow
(Start) -> <op|My Operation> - Yes -> (End)
<op> - NO -> [Input] -> <op>
```

Markflow 语法通过 (), <>, [] 来定义节点，节点中可以使用 id|label 指定 id, 否则直接使用节点内的文本作为节点 id。而 () 表示椭圆节点，<> 是菱形节点，[] 是方形节点。

-> 来绘制箭头连接线，并且 ‘-’ 可以任意多个，而在中间增加文本，就表示在连接线上的文本。

空格、回车除非在文本中，否则都忽略，这将方便你把源代码写得更优雅。

重新排版后，是不是就顺眼多了：

···Markflow
(Start) -> <My Operation> - Yes ---------------------------> (End)
<My Operation> - NO  -> [Input] -> <My Operation>
```

目前实现了一个简单的 js 来实现把 Markdown 转换为 dot 语言输出，可以绘制为图。下一个目标是模仿 Flowchart 写个前端渲染 js.

PS: 个人对 node.js 和前端其实并不熟悉，因此希望有人能加入进来，帮助我完善它。

开源项目地址：https://coding.net/u/jadedrip/p/Markflow/git