你好,学画流程图吗?用代码的那种

markdown现在的扩展性越来越强,也玩出了更多花样。

我们可以使用marp来实现用markdown写ppt的功能,最近我又发现了令一款好玩的工具。

那就是用markdown来画流程图/甘特图/类图/实体图/饼图/各种图的工具mermaid。

该项目在github上开源,地址是https://github.com/mermaid-js/mermaid。

基本使用

mermaid的使用场景有

  • 作为一个js库在任何网页上使用,我们可以使用mermaid API来动态把markdown文本渲染成svg图片;
  • 跟主流编辑器结合,在编辑器上实现一边写markdown代码一边实时预览的功能;
  • 在gitlab等工具上实现使用markdown画流程图的功能;
  • 跟主流的blog以及cms系统结合,实现用markdown画图的功能;
  • 在命令行实现把markdown文本转换成svg图片的功能;
  • 实现一个渲染server,通过请求发送markdown文本,然后server返回渲染好的图片
  • ......还有更多场景就不列举了

这里我用的最多的场景是用vscode/atom来写markdown文本,然后实时预览流程图,最后把图直接截出来,保存或者到处贴,这样就能让我的大部分文档工作都使用同一个工具(vscode/atom)完成,这样就不需要安装各种工具了或者在各个工具之间反复横跳了。

另外纯文本也非常适合直接保存在代码库里,方便多端多机器同步以及协作。

具体的例子

流程图的例子

graph TD A[双十一] -->|存了一年的钱| B(买点东西); B --> C{买什么呢?} C --> D(iphone 12) C --> E(macbook 16寸) C --> F(ipad 2020) F --> G((买不起)) E --> G D --> G

上面的流程图渲染出来是这个样子的,比较简单,不过也有一定的配置能力,适用于一些相对标准的场景


甘特图的例子

画甘特图一般都是要装第三方工具的,mermaid可以覆盖一部分的使用场景,有一些实用性

gantt title 项目计划 dateFormat YYYY-MM-DD section 开发 概要设计 :a1, 2020-11-01, 10d 编码 :after a1 , 20d section 测试 用例设计 :2020-11-01 , 30d 功能测试 : 24d

具体效果如下。


时序图的例子

sequenceDiagram Alice->>+John: Hello John, how are you? Alice->>+John: John, can you hear me? John-->>-Alice: Hi Alice, I can hear you! John-->>-Alice: I feel great!

简洁明了,没有问题。


饼图

pie title 我的工资 "转给老婆" : 5000 "午饭" : 400 "地铁" : 200

总结

总的来说,这款工具还是比较符合我的使用习惯的,推荐有兴趣的小伙伴可以简单尝试一下。

### One more thing

在很多时候,我们其实是有使用脑图的需求的,如果可以用markdown画脑图,那体验的一致性应该是极好的。

其实是可以的,简单搜索了一下markmap.js可以完成这个功能,不过似乎不支持vscode的实时预览,这无疑给实用性打了一定的折扣。

不过在线的编辑器体验还是不错的,可以作为画脑图的另一个选项。

编辑器地址:https://markmap.js.org/repl

posted @ 2020-11-02 10:52  乙醇  阅读(159)  评论(0编辑  收藏

友情链接 虫师的blog  测试教程网  重定向科技  省略