需求
绘图是一个非常常见的需求，事实上也有一图胜千言的说法。我们可能需要通过思维导图、流程图来更好的表达我们的想法。而实际上，如果这些功能能结合 markdown 就更好了，因为 markdown 是非常流行的文档写作格式，如果能够集成的话就能够避免同时维护源文件（一般是人类不可读）和生成图片文件同步的问题了。
下面是一些常见的使用障碍
- 学习成本较高（各类 DSL，例如 mermaidjs、plantuml）
- 需要收费难以推广（专有平台，例如 XMind）
- 纯在线托管无法私有（在线平台，例如 ProcessOn、Google 绘图）
流程图
这里推荐的 drawio，它是开源免费的图形绘制工具，使用可视化的方式进行绘制。
优点
- 可视化的拖拽方式对傻瓜式用户非常友好（是的，普通用户都是傻瓜，最近吾辈才深刻体会到这个道理。。。），这意味着较低（至少看起来较低）的学习成本
- 免费（大清自有国情在此）
- 提供本地应用、在线、VSCode 多种客户端
- 事实上，draw.io 不仅仅支持流程图，还支持各种各样的其他图表
- 支持 .drawio.svg 二级扩展名
缺点
- UI/UX 比较简单
效果图
由于 drawio 支持在 svg 中包含元数据，所以我们直接引用 svg 即可，但同时又可以使用 VSCode 直接修改它。
VSCode 插件地址：Draw.io Integration
思维导图
推荐百度脑图，它是专注于思维导图的开源工具。
优点
- UX 体验非常好，比较好的平衡了布局的自由和便利，可以拖拽控制位置，但布局仍然是自动的，这是吾辈认为绘图工具中最好的一种实现
- 免费（大清自有国情在此）
- 提供本地应用、在线、VSCode 多种客户端
- 支持 .km.svg 二级扩展名
缺点
- 目前似乎开源版本不怎么维护了
效果图
同样的，由于百度脑图支持在 svg 中包含元数据，所以我们直接引用 svg 即可，但同时又可以使用 VSCode 直接修改它。
VSCode 插件地址：vscode-mindmap
为什么不选择 XXX
好吧，这个话题可能饱受争议，但吾辈依然要写。你来这儿可能就是为了看看是否有更好的方式，这也是吾辈想要在这里回答的。
mermaid
通过 DSL 渲染各种图表，但通常编辑能力非常有限。由于实际数据是文本，所以能够非常方便的编程式处理。
```mermaid
graph TD;
id1[start]
id2[step 1]
id3[step 2]
id4[end]
id1 --> id2 --> id3 --> id4
```
PlatUML
PlatUML 是非常强大的 DSL 语言，几乎可以绘制一切逻辑相关图像。 它与 Mermaid 有许多相似之处，最大的相同点是 基于 DSL 生成图形
使用 PlatUML 有下面这些优势
- 更加强大的 DSL 定义，不仅仅是 UML 图，连各种非 UML 图也都能支持，例如思维导图。
- 使用 Java 编写，而 Java 是事实上的工业级语言，希望彻底取代 Java 的语言都没能成功（大部分针对某个细分领域，例如 GoLang 云计算，Scala 大数据），所以就发展上这个工具不太可能会突然死掉
- 对于基于 Java 的工具支持友好，例如 JetBrains IDEA 就有插件 PlantUML integration 对其进行支持（非官方）
但同时也不可避免地存在一些问题
- DSL 非常强大的副作用就是规则非常复杂
- 对于 VSCode 也开始 尝试集成，但需要用户设置本地服务器，这并不是一个开箱即用的选择
- 周边生态，好吧，我们到它的 GitHub 组织 就能看到项目并不多，或许是因为后端很难做出这种直接让用户使用的工具？
ProcessOn
ProcessOn 是国内的在线作图工具，对流程图/思维导图支持很好，本地化做的相当不错。 虽然看起来它很像是国内的 draw.io，但确实有一些独特的优点
- 本地化支持友好，UI/UX 经过优化
- 支持外链
iframe引用，所以不需要维护两份 - 支持思维导图的功能，使用体验不错
同时，国内服务的缺点也是一有尽有
- 数据不在自己手中，说不得哪天就死掉了
- 不提供离线编辑功能
- 收费，不利于推广使用
- 周边工具支持。。。嗯，国内工具有周边支持的概念么？
总结
就目前而言，吾辈认为基于图片+扩展元数据的形式是最好的，因为这样可以兼顾展示与编辑，目前仅找到 drawio/百度脑图，欢迎推荐其他工具。