需求

绘图是一个非常常见的需求,事实上也有一图胜千言的说法。我们可能需要通过思维导图、流程图来更好的表达我们的想法。而实际上,如果这些功能能结合 markdown 就更好了,因为 markdown 是非常流行的文档写作格式,如果能够集成的话就能够避免同时维护源文件(一般是人类不可读)和生成图片文件同步的问题了。

下面是一些常见的使用障碍

  • 学习成本较高(各类 DSL,例如 mermaidjs、plantuml)
  • 需要收费难以推广(专有平台,例如 XMind)
  • 纯在线托管无法私有(在线平台,例如 ProcessOn、Google 绘图)

流程图

这里推荐的 drawio,它是开源免费的图形绘制工具,使用可视化的方式进行绘制。

优点

  • 可视化的拖拽方式对傻瓜式用户非常友好(是的,普通用户都是傻瓜,最近吾辈才深刻体会到这个道理。。。),这意味着较低(至少看起来较低)的学习成本
  • 免费(大清自有国情在此)
  • 提供本地应用、在线、VSCode 多种客户端
  • 事实上,draw.io 不仅仅支持流程图,还支持各种各样的其他图表
  • 支持 .drawio.svg 二级扩展名

缺点

  • UI/UX 比较简单

效果图

使用 drawio 绘制流程图

由于 drawio 支持在 svg 中包含元数据,所以我们直接引用 svg 即可,但同时又可以使用 VSCode 直接修改它。

VSCode 插件地址:Draw.io Integrationopen in new window

思维导图

推荐百度脑图,它是专注于思维导图的开源工具。

优点

  • UX 体验非常好,比较好的平衡了布局的自由和便利,可以拖拽控制位置,但布局仍然是自动的,这是吾辈认为绘图工具中最好的一种实现
  • 免费(大清自有国情在此)
  • 提供本地应用、在线、VSCode 多种客户端
  • 支持 .km.svg 二级扩展名

缺点

  • 目前似乎开源版本不怎么维护了

效果图

使用百度脑图绘制思维导图

同样的,由于百度脑图支持在 svg 中包含元数据,所以我们直接引用 svg 即可,但同时又可以使用 VSCode 直接修改它。

VSCode 插件地址:vscode-mindmapopen in new window

为什么不选择 XXX

好吧,这个话题可能饱受争议,但吾辈依然要写。你来这儿可能就是为了看看是否有更好的方式,这也是吾辈想要在这里回答的。

mermaid

通过 DSL 渲染各种图表,但通常编辑能力非常有限。由于实际数据是文本,所以能够非常方便的编程式处理。

```mermaid
graph TD;
id1[start]
id2[step 1]
id3[step 2]
id4[end]
id1 --> id2 --> id3 --> id4
```
1
2
3
4
5
6
7
8

1622643314587

PlatUML

PlatUMLopen in new window 是非常强大的 DSL 语言,几乎可以绘制一切逻辑相关图像。 它与 Mermaid 有许多相似之处,最大的相同点是 基于 DSL 生成图形

使用 PlatUML 有下面这些优势

  • 更加强大的 DSL 定义,不仅仅是 UML 图,连各种非 UML 图也都能支持,例如思维导图。
  • 使用 Java 编写,而 Java 是事实上的工业级语言,希望彻底取代 Java 的语言都没能成功(大部分针对某个细分领域,例如 GoLang 云计算,Scala 大数据),所以就发展上这个工具不太可能会突然死掉
  • 对于基于 Java 的工具支持友好,例如 JetBrains IDEA 就有插件 PlantUML integrationopen in new window 对其进行支持(非官方)

但同时也不可避免地存在一些问题

  • DSL 非常强大的副作用就是规则非常复杂
  • 对于 VSCode 也开始 尝试集成open in new window,但需要用户设置本地服务器,这并不是一个开箱即用的选择
  • 周边生态,好吧,我们到它的 GitHub 组织open in new window 就能看到项目并不多,或许是因为后端很难做出这种直接让用户使用的工具?

ProcessOn

ProcessOnopen in new window 是国内的在线作图工具,对流程图/思维导图支持很好,本地化做的相当不错。 虽然看起来它很像是国内的 draw.io,但确实有一些独特的优点

  • 本地化支持友好,UI/UX 经过优化
  • 支持外链 iframe 引用,所以不需要维护两份
  • 支持思维导图的功能,使用体验不错

同时,国内服务的缺点也是一有尽有

  • 数据不在自己手中,说不得哪天就死掉了
  • 不提供离线编辑功能
  • 收费,不利于推广使用
  • 周边工具支持。。。嗯,国内工具有周边支持的概念么?

总结

就目前而言,吾辈认为基于图片+扩展元数据的形式是最好的,因为这样可以兼顾展示与编辑,目前仅找到 drawio/百度脑图,欢迎推荐其他工具。