楔子

在 2012 年的时候，曾经在知乎提过一个问题：『有哪些现代一点、好看点的 UML 图绘制工具？』（去点个赞呗）

作为一名研发，平时会经常需要画时序图等 UML 图，试过无数个工具，折腾无止境。也曾在生产力工具换为 Mac 后，很长一段时间都在众里寻它千百度，期望能找到一个顺手的绘图工具。

不知不觉，已经快十年过去了，我也从一个懵懵懂懂的技术新人，成长为了一个技术专家。这么多年来也算画了不少图了，刚好看到知乎推荐挖了坟推了条消息，那就顺便自问自答下吧。

诉求是什么？

在当年提问的那个时间点，UML 备受追捧。但这几年下来，不太迷信 UML 了，而是更关注于用适当易懂的方式去传达意图。

那么，作为一个研发工程师，日常需要画的图主要有：

  • 原型图：偶尔画，仅在一杆到底做一些自用的生产力平台时需要兼职写下需求文档。
  • 思维导图：经常画，用于整理思路或编写大纲。
  • UML（用例图、流程图、时序图、架构图）：经常画，用于编写系分文档。

在我的评价体系里面，好不好用的关键点是：

  • 易用、美观：颜值很重要，见文如见人，产出的文档和代码，必须要赏心悦目。
  • 高效、协作：团队协作很重要，故需要有版本管理，并随时可以被同事接手继续修改。

折腾过哪些？

第一阶段：古代

这个阶段，市面上的产品基本都是单机的，只能导出图片来插入到 Word 文档中，团队协作只能通过 Git，无法 Diff 和解决冲突。

如 Enterprise Architect 是很不错的 UML 工具，长相中规中矩，支持模块之间的连线，不过只支持 Windows。

AxureRP 是产品经理用的较多的原型图工具，简单易用。我那时候更喜欢用 Balsamiq Mockups，线框图风格，支持语法表达。

image.png

第二阶段：近代

这个阶段，生产力工具换为 Mac 了，文档编写开始使用 Confluence 进行在线协作。

  • 用过 Keynote，易于上手，但属于纯图形，不支持连线维持，不便于维护，仅用于做 PPT 汇报用的图。
  • 曾短暂用过 ProcessOn 这类在线绘图服务，图标类型和长相都还不错，但存在的问题主要是收费及安全问题，毕竟企业内部的一些流程图和架构图，不适合放公网服务。
  • 最后咬牙买了 OmniGraffle 这个 Mac 上最贵最好用的绘图工具，确实很不错，大部分的图都可以很容易画出来。

image.png

这个阶段最大的问题还是流程的割裂上，因为文档编写已经开始在线协作化，但图片绘制没法融入进去，还是必须导出图片贴进去，以及 Git 共享图片源文件。

第三阶段：当代

这阶段，开始了 Egg 的开源，也爱上了使用 Markdown 来写文档，是 GitHub 的重度用户。

同时，语雀 出生了，它的产品理念和形态都很像文档界的 GitHub，并支持类似 Typora 的所见即所得的 Markdown 编辑器，一见钟情。

由于 Markdown 是纯文本的，于是顺其自然的发现了 PlantUML，这是一个很 Geek 的图形表达语言，它吸引我的地方：

  • 类 Markdown 那样让你自然的画图，绝大部分情况下，你不需要太关注语法和布局，很自然的画即可，心智体验非常舒服。
  • 可多人协作，可版本跟踪，可以直接写在 Markdown 中，避免文档维护的割裂。
  • 它是一种「绘图语言」而不是「绘图工具」，生态不错，受到广泛支持，各大 IDE 和 语雀 等知识系统都支持。

如下图，一个简单的示例，一句 User -> Browser 就能表达一个时序，多么直观简洁啊。
image.png

当时还专门写了相关的经验总结：https://www.yuque.com/atian25/plantuml/quickstart

但 PlantUML 的缺点是：

  • 画时序图、类图等很简单，但其他图就有点复杂，稍微有点 Geek。
  • 颜值默认过关，但定制性不够，稍微修饰下就会导致源文件很大，有违初心。

小结下，这个阶段：

  • 大部分文档都在语雀编写，时序图等用 PlantUML 直接内嵌在语雀文档中，支持团队在线协作。
  • 一部分架构图用 OmniGraffle 画，导出图片贴进去，通过钉盘共享，但协作不便。
  • 思维导图，用于整理大纲，使用 XMind，导出图片。
  • 原型图大都用 AxureRP 或 Sketch，语雀支持导入且可以在线评审。

第四阶段：未来

前几天，语雀最新版本发布了 『合体！思维导图+流程图+绘图=？』

试用几天后，感觉几乎完美契合了我的所有诉求：

  • 易用、美观：不错的颜值，打开即用，心智体验舒服。
  • 高效、协作：在线多人协作，可版本跟踪，和文档融为一体。

我终于可以在语雀一站式的完成整个系分文档的编写，并和同事进行协作，也不用担心冲突问题，体验非常的自然舒爽。
image.png

思维导图也可以直接用语雀编写了，由于是自由画板，比起 XMind 会更舒服，可以任意组合。

image.png

不过毕竟是刚出来，还存在不少待优化的问题：

  • 编辑能力比起 OmniGraffle 还有不少差距，需要持续迭代。
  • 内置模板和组件还太不够丰富。

不过，我对语雀有信心，『一站式、高效率、在线协同编辑』就是未来。

再 Show 几张最近画的图：

image.png

image.png

image.png