程序员画图指北不会画图？一到写方案时就头疼？找不到合适的画图工具？这图那图傻傻分不清楚？程序员画图指北，拯救你的画图技能

原文链接：《程序员画图指北》 (温馨提示：原文链接阅读体验更佳)

一、绘图生产力

1.1 绘图工具

excalidraw

链接：excalidraw.com/

（平台首页截图）

一款免费开源的虚拟白板工具，核心特色是能够绘制出具有独特手绘风格的图表。非常适合用于头脑风暴、草图设计和创意表达。

（示例图）

支持多格式导出，可以导出为 PNG、SVG 图片，也可以导出为开放的 JSON 文件格式（.excalidraw），方便日后再次编辑和数据迁移。

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    {
      "id": "ZuFfcDoVWRqFN1MW2DbIv",
      "type": "rectangle",
      "x": 962.8155358318664,
      "y": 406.5824615719666,
      "width": 497.58132329964417,
      "height": 611.9902317618282,
      "angle": 0,
      "strokeColor": "#e03131",
      "backgroundColor": "#b2f2bb",
      "fillStyle": "solid",
      "strokeWidth": 4,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "frameId": null,
      "index": "a0",
      "roundness": {
        "type": 3
      },
      "seed": 311912695,
      "version": 40,
      "versionNonce": 857106295,
      "isDeleted": false,
      "boundElements": null,
      "updated": 1770814380268,
      "link": null,
      "locked": false
    }
  ],
  "appState": {
    "gridSize": 20,
    "gridStep": 5,
    "gridModeEnabled": false,
    "viewBackgroundColor": "#ffffff",
    "lockedMultiSelections": {}
  },
  "files": {}
}

支持本地私有化部署。

另外它还有一些亮点功能：

（1）Mermaid 至 excalidraw，可以将 Mermaid 风格的图快速转换成手绘风格。

Mermaid 风格	excalidraw 手绘风格

（2）文字至图表（AI增强） ，输入文字，通过 AI 理解文字之后，直接输出图表；如果觉得有瑕疵，还可以手动进行微调。

（AI 生成流程图）

drawio

链接：www.drawio.com/

（drawio 编辑页面）

Draw.io（现在也被称为 Diagrams.net）是一款功能强大的开源、免费图表绘制工具。

🌟 核心亮点

完全免费，无广告；
跨平台，多端可用：
- 在线版：直接在浏览器中打开即可使用，无需安装。
- 桌面版：支持 Windows、Mac 和 Linux 系统，支持离线使用。
- 集成版：有 VS Code 插件、Confluence 插件等，也可以部署在自己的服务器上。
数据安全与隐私：它默认将文件保存在你的本地设备（浏览器缓存或本地磁盘）
格式兼容性强：支持导入和导出多种格式，包括 PNG、SVG、PDF、JPEG，以及 Visio (.vsdx) 格式（注意：新版功能有变动，下文会详细说明）。

（支持导出的格式类型）

<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="app.diagrams.net" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 QuarkPC/6.2.5.697" version="29.3.8">
  <diagram name="第 1 页" id="0I_Jg49ymsapki4dDrCE">
    <mxGraphModel dx="1234" dy="793" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="UcmlwMYr7MipsIoCMPCB-1" parent="1" style="rounded=0;whiteSpace=wrap;html=1;" value="" vertex="1">
          <mxGeometry height="60" width="120" x="260" y="240" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

🛠️ 使用方式

支持拖拽绘制或通过 XML 生成

（官方提供的 Example diagrams，活动图）

next-ai-draw-io

链接：next-ai-drawio.jiang.jp/zh

（next-ai-draw-io 官方提供的在线体验平台）

一款基于开源绘图工具 Draw.io 的增强版应用，

它通过集成大语言模型（LLM），为传统的手动绘图方式引入了 AI 智能自动化。简单来说，它让你能够通过“对话”来画图，彻底改变了以往需要手动拖拽、对齐图形的繁琐操作。

（通过自然语言指令生成流程图，同时依然支持拖拽修改）

（上面通过 AI 生成的流程图）

🛠️ 使用方式

Next AI Draw.io 是一个开源项目，因此你有多种方式可以使用它：

在线体验：项目通常会提供一个在线演示地址，你可以直接在浏览器中免费试用。
Docker 部署（推荐） ：对于希望在本地或私有服务器上运行的用户，可以通过 Docker 一键部署，这种方式简单快捷，适合生产环境。
源码运行：如果你是开发者，也可以克隆项目源码，在本地搭建开发环境进行运行和二次开发。

1.2 代码即图表

Mermaid

官方文档：mermaid.ai/open-source…

它的核心理念是 “代码化绘图” ，这一特点带来了许多传统绘图工具无法比拟的优势：

🌟 核心优势

文本驱动，易于维护：图表由纯文本代码定义，这意味着你可以像编写代码一样创建和修改图表。这种方式非常便于进行版本控制（如 Git），也易于复制和分享。
无缝集成，跨平台：Mermaid 可以轻松嵌入到各种你熟悉的工具中，例如 GitHub、GitLab、Notion、VS Code、Obsidian 等，让你的文档和图表始终保持同步。
AI 的最佳搭档：由于 Mermaid 的输入和输出都是文本，它与 AI 模型（如我）的交互非常完美。AI 可以轻松生成或修改图表代码，帮助你快速将想法可视化。

📊 支持的图表类型

Mermaid 支持十余种图表类型，可以满足多种场景下的可视化需求：

图表类型	用途	示例
流程图	描述业务流程、算法逻辑或工作流
序列图（时序图）	展示系统组件或对象之间的交互时序，如 API 调用
甘特图	规划项目时间线，定义任务和依赖关系
饼图	展示数据的比例分布
思维导图	梳理知识结构、进行头脑风暴（ui 效果并不是很好，建议其它工具画思维导图吧）

💻 代码示例

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

⚙️ 如何使用

使用在线编辑器， 如官方提供的编辑器：Mermaid Live Editor。
使用云文档提供的插件能力，如语雀提供的「文本绘图」功能。
IDE 插件：如果你是开发者，可以在 VS Code、IntelliJ IDEA 或 Eclipse 中安装 Mermaid 插件，这样可以在写代码的同时实时预览图表。
利用 AI 辅助， 向 AI 描述需要绘制的内容，让 AI 输出 mermaid 代码，然后复制代码到编辑器中预览。

PlantUML

官方链接：plantuml.com/zh/

PlantUML 是一款开源的文本驱动的绘图工具，它的核心理念是“代码即图表”。

🌟 核心优势

版本控制友好：因为图表是由文本代码定义的，所以可以轻松地将 .puml 文件放入 Git 等版本控制系统中，方便追踪修改历史和团队协作。
高效快速：对于熟悉语法的开发者来说，用代码画图比用鼠标拖拽调整位置要快得多，尤其是在修改和迭代时。
无缝集成：可以完美嵌入到 Markdown、Confluence、VS Code、IntelliJ IDEA 等各种开发和文档工具中，实现文档与图的一体化。
逻辑清晰：文本代码能让你更专注于图表的逻辑结构，而不是纠结于图形的排版和美观度（布局由引擎自动计算）。

📊 支持的图表类型

PlantUML 最初是为 UML（统一建模语言）设计的，现在已经扩展支持多种非 UML 图表。它支持的图表类型非常丰富，涵盖了软件开发和项目管理的方方面面：

图表类型	用途
UML 类图	展示类的结构、属性、方法及类之间的关系（继承、关联等）
时序图/序列图	描述对象之间的交互顺序，非常适合描述接口调用流程
用例图	用于需求分析，表达用户（Actor）与系统功能（Use Case）的关系
活动图/流程图	描述业务逻辑或算法的流程控制
组件图/部署图	展示系统的物理架构、组件依赖和部署环境
状态图	建模对象在其生命周期内的状态变迁
甘特图 (Gantt)	规划项目进度，展示任务依赖和时间线
思维导图	进行头脑风暴、梳理知识结构
架构图 (C4)	支持现代软件架构的分层表达（系统上下文、容器、组件等）

一些示例：

时序图	活动图	状态图

💻 代码示例

PlantUML 的语法非常直观。所有图表都以 @startuml 开头，以 @enduml 结尾。

@startuml
actor User
participant "Application" as App
User -> App: 请求数据
App --> User: 返回数据
@enduml

⚙️ 如何使用

可以通过多种方式使用 PlantUML：

云文档插件，如语雀提供的「文本绘图」功能。
在线编辑器：访问 PlantUML 官方在线站点，无需安装，直接在浏览器中编写和预览，这是最快上手的方式。
IDE 插件：如果你是开发者，强烈推荐在 VS Code、IntelliJ IDEA 或 Eclipse 中安装 PlantUML 插件，这样可以在写代码的同时实时预览图表。
本地命令行：下载 PlantUML 的 JAR 包，配合 Java 环境和 Graphviz，通过命令行将 .puml 文件批量生成为 PNG 或 SVG 图片。

SVG / html

当要绘制一些更复杂、更精美、非标准化的图形时，mermaid 和 plantUML 可能就力不从心了；

此时可以尝试通过 AI 直接生成 SVG 或者 html。

（案例：自然语言 -> AI -> html）

二、图表类型

2.1 UML 图

UML，Unified Modeling Language，统一建模语言， 简单来说，它是一种用于软件系统建模的标准可视化语言，可以帮助开发人员通过图形化的方式描述系统的结构和行为。

它是一套严格的标准，它定义了 14 种特定的图表，为了方便理解，我们可以把它们简单分为两类：

2.1.1 结构图（7种）

关注系统的“静态”组成。

类型	简介	示例
类图	展示类、接口、属性、方法以及它们之间的关系（如继承、关联）
实例图	类图的实例化，展示在某一时刻，系统中对象及其之间的关系。
组件图	描述系统的物理软件组件（如库、可执行文件、模块）及其依赖关系、
部署图	描述系统的物理硬件节点，以及软件组件是如何部署到这些硬件上的（即物理架构）。
包图	于将模型元素（如类、用例）分组，展示包与包之间的依赖关系。
组合结构图	描述一个类或组件的内部结构，展示其内部部件是如何协作的。
制品图	描述系统产生的具体物理文件（如源代码文件、可执行文件、文档）

2.1.2 行为图（7种）

关注系统的 “动态” 行为。

类型	简介	示例
用例图	从用户视角描述系统功能，展示参与者（Actor）和用例之间的关系。
活动图	类似于流程图，描述业务流程或操作的执行步骤，包含分支、循环和并发流程。
状态图	描述一个对象在其生命周期内所经历的状态序列，以及如何响应外部事件而发生状态转换。
序列图（时序图）	按时间顺序展示对象之间是如何通过消息进行交互的。
通信图	侧重于展示对象之间的组织结构（链接关系）以及它们之间的消息传递。通信图由三部分组成：对象（Object），链（Link）和消息（Message）。
交互概览图	结合了活动图和序列图的特点，用于展示多个交互片段之间的控制流。
定时图	强调消息或状态的时间约束，常用于实时系统或嵌入式系统建模