程序员常用的三款在线画图工具

0.前言

大咖好呀，我是恋喵大鲤鱼。

正所谓“一图胜千言”，无论是商务办公、学习总结、技术交流还是项目开发，都少不了图形。一个合理的架构图、清晰的流程图、发散的思维导图、准确的 UML 图，以及其他各种形式的图形图表能够帮助我们更加直观地呈现内容、阐述概念、传达信息。

以前作图工具主要是商业桌面软件（以 Microsoft Visio 为代表），生产的图片也保存在本地，容易丢失，不便于随时随地的取用。也时常为破解臃肿的付费软件而感到苦恼。

随着云时代的到来，在线作图变成常态，生产的图片能够及时得到保存备份，只要联网，便可随时随地取用。

今天就来说下程序员们（不止于猿们）常用的三款在线作图工具。

• draw.io
• Lucidchart
• PrcessOn

1.draw.io

draw.io 是国外一款免费且开源的优秀作图工具，由 JGraph Ltd. 软件公司开发运营。

draw.io 提供了丰富的图形库和编辑功能，适用于绘制各种类型的图表和流程图。可以使用在线版本，也可以下载桌面版本。

特点如下：

• 免登录
• 完全免费（没有付费功能，水印，或其他限制）
• 它不存储我们的数据
• 应用程序是开源的
• 它拥有客户端程序
• 也可以在线使用

2.Lucidchart

Lucidchart 是国外一款功能强大的在线作图工具，由 Lucid 软件公司开发运营。

Lucidchart 支持绘制流程图、组织结构图、UML 图等多种类型的图表。它具有友好的界面和强大的协作功能，适合团队共同绘制图表。

特点如下：

• 多人协作
• 云端保存数据
• 免费策略上非常苛刻
• 强大的导入导出功能
• 知识文档齐全

3.PrcessOn

PrcessOn 是一款国产不可多得的在线作图工具，由北京大麦地信息技术有限公司开发运营。

PrcessOn 专业强大，支持多人实时在线协作，可用于原型图、UML、BPMN、网络拓扑图等多种图形绘制。由大麦地公司开发运营。

PrcessOn 完全模仿 Lucidchart，甚至连界面也差不多，但这不是重点，PrcessOn 进一步弱化了功能，废除了 Lucidchart 一些复杂功能，变得更加简单易用。

特点如下：

• 简单易用
• 多人协作
• 云端保存数据
• 免费策略宽松，可不付费勉强使用
• 支持私有化部署

免费版虽然一开始只能创建 9 个文件，但是可以通过邀请好友、发布图表以及完善个人信息等手段轻松获取更多的文件个数。

4.其他

除了上面介绍的 3 款在线作图工具，当然还有很多其他优秀的作图工具。

作图工具按照驱动方式可以分为以下几大类型，每种类型都有其独特的工作逻辑和适用场景。

4.1 图形界面驱动

这是最传统和主流的方式，遵循“所见即所得”的原则。

核心特点：用户通过鼠标在画布上直接进行拖、拉、拽、点击等操作来绘制和调整图形元素。工具通常提供丰富的工具栏、属性面板和菜单。

优点：直观易上手，对初学者友好，提供了极高的灵活性和控制精度。

缺点：制作复杂、规范的图表时可能效率较低，且文件本身不易进行版本差异对比。

这里列举一些其他图形界面驱动在线作图工具：

• 以画思维导图著称的优秀国产跨平台且支持在线作图工具 XMind。
• 老牌国产软件，万兴科技旗下的亿图，支持在线绘图。
• 以简洁易用著称的 Zen Flowchart。
• 号称与 Conference 配合最佳的 Gliffy。
• 世界上第一个在智能视觉画布上运行的工作管理平台的 Creately。
• 由日本软件公司 Nulab 开发运营的在线协作画图工具 Cacoo。
• 在线协作思维导图工具 Coggle。
• 手绘风格的开源免费在线协作式绘图工具 Excalidraw，主要用于绘制流程图、架构图、线框图等各类图表。你可以直接通过浏览器访问 excalidraw.com 使用，无需注册或安装手绘风格的开源。
• 小众但很优秀的一款支持低代码的免费在线画图工具 PDDON。

当然不同领域有其对应的代表工具：

• 通用设计与绘图：Figma, Sketch, Adobe Photoshop, Illustrator, CorelDRAW
• 演示与平面设计：Canva, PowerPoint
• 图表与白板：draw.io (Diagrams.net), Lucidchart, Whimsical
• 工程与建筑：AutoCAD, Revit

4.2 文本/代码驱动

这种方式近年来在开发者和技术写作者中越来越流行。

核心特点：用户通过编写特定的领域特定语言（DSL） 或代码来描述图表的结构和逻辑，工具引擎会自动将代码渲染成图形。

优点：

• 易于版本控制：图表源文件是纯文本，可以用Git等工具管理，轻松追踪变更历史。
• 高效规范：非常适合创建重复性高、结构复杂的图表（如UML、架构图），修改起来非常快。
• 可移植性强：文本格式不依赖于特定操作系统或软件。

缺点：有一定的学习曲线，不直观，需要记忆语法。

代表工具：

• 图表与UML：Mermaid, PlantUML, Graphviz
• 技术插图：LaTeX (with TikZ/PGF)
• 系统架构：Diagrams (由Python代码生成云系统架构图)

下面简单介绍下程序员常用的 3 款图表与UML工具。

4.2.1 Mermaid

Mermaid 是一个开源免费基于 JavaScript 的图表绘制工具，它通过一种类似 Markdown 的简洁文本语法来创建各种图表，支持流程图、时序图、甘特图等。

你可以通过以下几种完全免费的方式来使用 Mermaid：

• 在线编辑器：Mermaid 官网提供了在线的 Live Editor，无需安装或登录，打开就能编写代码并实时预览图表效果，非常适合快速尝试和学习。

• 集成到编辑器中：许多主流的 Markdown 编辑器（如 Typora、Obsidian）和代码编辑器（如 VS Code）的插件都内置或可以通过插件支持 Mermaid，让你在编写文档时直接嵌入图表。

• 自行部署：因为是开源库，你也可以将 Mermaid 作为 JavaScript 库引入到自己的网页项目中使用。

下面是一个流程图示例：

graph TD A[开始] --> B{条件判断} B -->|是| C[执行操作1] B -->|否| D[执行操作2] C --> E[结束] D --> E

效果如下：

其他常用图表：

• 序列图：用于展示对象之间交互的时序关系。代码以sequenceDiagram开头。
• 甘特图：用于项目管理和进度规划。代码以gantt开头。
• 类图：用于表示系统的静态结构（类、属性、方法及关系）。代码以classDiagram开头。
• 状态图：用于描述对象的状态转换。代码以stateDiagram-v2开头。
• 饼图：用于显示比例构成。代码以pie开头。

Mermaid 的成功在于它极大地降低了创建和维护规范、美观图表的成本。 它特别适合：

• 开发者：在代码注释、README 文件中嵌入图表。
• 技术写作者：编写 API 文档、系统架构说明。
• 项目经理：快速绘制项目时间线（甘特图）。
• 任何希望让文档更清晰、工作流更高效的人。

如果您希望在文档中无缝地嵌入图表，并享受版本控制带来的便利，那么 Mermaid 几乎是当前的不二之选。

4.2.2 PlantUML

PlantUML 是一个流行的开源绘图工具，使用简单的类文本语法生成图表。主要支持 UML 图（如类图、时序图、用例图等），也可以绘制一些流程图、甘特图和 ER 图。

它的核心思想是：“你所见即你所想”，而不是手动拖拽图形。你可以专注于图表的逻辑和结构，而不是它的外观布局。

PlantUML 可以与非常多的工具集成：

• 代码编辑器：如 VS Code、IntelliJ IDEA 等都有官方或第三方插件，支持实时预览。
• 文档工具：可以集成到 AsciiDoc、Markdown 等中。
• Wiki 系统：如 Confluence、GitLab、GitHub 等（可能需要安装插件或配置）。
• 构建工具：可以集成到 Maven、Gradle 等构建流程中，自动生成文档。

PlantUML 是一个为效率和清晰度而生的工具。 它特别适合：

• 软件开发人员：用于绘制设计文档、架构图。
• 系统分析师：用于快速绘制和修改业务流程。
• 任何需要编写大量技术文档，并希望将图表纳入版本控制的人。

如果你厌倦了在图形界面中手动调整每一个框线和箭头，希望像写代码一样“编写”图表，那么 PlantUML 绝对是你的不二之选。

4.2.3 Graphviz

Graphviz（Graph Visualization Software）是一个由 AT&T Labs 开发的开源工具集，它的核心功能是将结构化的图形描述（用文本语言）自动布局并渲染成可视化图形。

它与 PlantUML 等工具同属“文本驱动”的绘图范畴，但其核心优势在于对复杂关系网络和层级结构的自动布局能力。

Graphviz 非常适合用来绘制：

• 软件系统架构图：展示微服务、组件间的调用关系。
• 网络拓扑图：自动生成清晰的设备连接图。
• 数据结构与流程图：如二叉树、状态机。
• 依赖关系图：如函数调用图、软件包依赖图（很多 IDE 和工具的内部使用）。
• 知识图谱：表现实体间的复杂关系。

Graphviz 是一个“工程师的绘图工具”。它牺牲了一定的直接性和易学性，换来了无与伦比的自动布局能力。

• 当你需要绘制一个节点和关系非常多的图表时，手动调整是不可能的，Graphviz 是唯一的解决方案。
• 当你需要将一个结构化的数据（如 JSON、XML）快速可视化时，写一个脚本将其转换为 Dot 语言再用 Graphviz 渲染是最佳路径。

简单来说，如果你追求的是 “让机器自动为你解决布局难题”，那么 Graphviz 就是你的终极武器。

4.3 AI提示词驱动

这是当前最前沿的驱动方式，属于生成式AI的应用。

核心特点：用户通过自然语言向AI描述想要的图像内容、风格、构图等（即“提示词”），AI模型会根据描述生成相应的图片。

优点：创意生成速度极快，能突破人类手绘的技能限制，快速产生大量灵感和方案。

缺点：对结果的控制精度有限，需要学习“提示词工程”来获得理想效果，产出具有随机性。

代表工具：

• 文生图模型：Midjourney, DALL-E 3 (集成在ChatGPT中), Stable Diffusion (开源)
• 设计工具内置AI：Adobe Firefly (集成在Photoshop等软件中), Canva AI

4.4 数据驱动

这类工具专注于将数据可视化，图表由背后的数据集动态生成。

核心特点：用户绑定或输入数据（如Excel表格、数据库），选择图表类型（如柱状图、折线图、散点图），工具会自动根据数据生成和渲染可视化图形。当数据更新时，图表会自动更新。

优点：动态、准确，能够清晰有效地展示数据中的模式和洞察，是商业分析和科学研究的利器。

缺点：主要用于数据可视化，不适合创作自由风格的图形或插图。

代表工具：

• 商业智能(BI)：Tableau, Power BI, FineBI, 九数云
• 编程库：ECharts, D3.js (通过JavaScript代码控制), Matplotlib (Python), ggplot2 ®

5.小结

以上三款在线作图工具都提供了丰富的功能和图形库，使程序员能够轻松绘制各种类型的图表。

用户一般比较喜欢免费和易用，所以三者中 draw.io 和 PrcessOn 使用者更多。

不同作图工具有不同的优缺点与应用场景，你可以根据自己的需求和偏好选择适合的工具来进行作图。

如果您喜欢这篇文章，欢迎关注微信公众号“恋喵大鲤鱼”了解最新精彩内容。

参考文献

Mermaid 中文网
流程图软件draw.io值得你拥有 - 简书