你好,学画流程图吗?用代码的那种
乙醇 创建于 8 months 之前
最后更新: less than a minute 之前
阅读数: 616
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的实时预览,这无疑给实用性打了一定的折扣。
不过在线的编辑器体验还是不错的,可以作为画脑图的另一个选项。