使用 markdown 制作简单的流程图

由于 Visio 没有 Mac 版本,所以一直以来,我都在寻找一款在 Mac 能用的便捷的流程图制作工具, EdrawMaxEazyDrawOmniGraffle 等软件都试用过,但总感觉这些软件都太过复杂,比较适合那些专业的流程图设计人员。

有人会说,功能强大点不好吗?确实,这些软件的功能都很强大,但对于个人使用来说,很多功能并不需要,那这些功能便成了包袱,使整个软件显得很臃肿。我最想要的就是,在满足需求的同时,实现便捷高效。就比如说,自从认识了 Markdown 之后,我便很少写 Word 文档了。

在不断 Goolge 的过程中,突然在知乎上发现有人提及用 Markdown 可以绘制流程图,抱着不可思议的想法专注地去搜了一下,果真如此!有种 众里寻她千百度,蓦然回首,那人却在,灯火阑珊处 的感觉。原来一直寻觅的工具,竟默默地存在于自己的身边。

无需导出,无需特殊的文件格式,只需要几行文本代码,就能解析出想要的流程图,有时候想想都觉得有点不可思议。简直 perfect!

下面就来说说 Markdown 绘制流程图的实现方式。(由于 WP 编辑器不能完整解析 Markdown 语法,显示效果用截图代替。)

顺序图

Markdown 语法:

markdown-s

效果如下:

Markdown顺序图

流程图

Markdown 语法:

markdown-f

效果如下:

Markdown流程图

示例

下面是我参考了流程图语法后,制作的简单部署流程:

markdown-f-m

Markdown部署流程图

更多参考

当然了, Markdown 的顺序图和流程图还有各种各样的用法,比如顺序图支持手写画图,流程图支持步骤背景,但是这些都是需要特定解析器才能实现的,对于通用的部分,无外乎以上所述。

更多的参考资料,请参考官方文档:

Markdown顺序图官方文档

Markdown流程图官方文档