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

相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页