小白也能学会！用 AI 快速画出漂亮的技术架构图

Tue, 31 Mar 2026 19:51:00 +0800

✈️ 小白也能学会！用 AI 快速画出漂亮的技术架构图

👋 这篇文档是写给完全没画过架构图的新手看的。你不需要会设计、不需要会写代码，只要会用 AI 聊天就能跟着做。

什么是技术架构图？我为什么要画它？

简单说，技术架构图就是把你脑子里的系统"画出来"——

比如你要做一个 App，它有哪些功能模块？用户怎么用？数据怎么流转？把这些关系画成图，就是架构图。

画它的好处很实在：

✅ 自己理清思路——画图的过程就是你梳理系统设计的过程
✅ 跟同事沟通不费劲——一张图胜过千言万语
✅ 汇报展示有面子——老板和客户一看就明白你的方案有多牛
✅ AI 帮你画，省时省力——现在用 AI，几分钟就能出一张像样的图

🤔 新手该选哪种方法？（先看这个）

你的情况	推荐方案	难度
就想最快出一张好看的图，后期不改了	方案一（AI 直接生成图片）	⭐
愿意多一步，让图以后好修改	方案二（Mermaid.js 代码生成）	⭐⭐
做正式文档，需要反复修改、风格统一	方案三（Excalidraw 本地画图）	⭐⭐⭐

💡 新手建议：先试 方案一 感受一下，再尝试 方案二。方案三等你需要做正式文档时再研究。

方案一：直接让 AI 帮你画一张图（最简单，最快）

⏱ 耗时：2-3 分钟 🛠 工具：Gemini 3.1 Pro（谷歌出品，免费可用）

一句话原理

让你用的 AI（比如 Gemini）先写出"画图描述词"，再把这个描述词喂给 AI 的画图功能，AI 就帮你把图画出来了。

手把手操作步骤

第 1 步：让 AI 帮你写"画图描述词"

打开 Gemini，输入下面这段话（直接复制，替换你的内容就行）：

请帮我写一段用于生成技术架构图的提示词（prompt），
我要画的是一个 [你的系统名称，比如：电商网站] 的架构图，
包含以下模块：用户端、商品管理、订单系统、支付系统、后台管理。
模块之间的数据流向是：用户下单 → 订单系统调支付 → 支付完成通知商品管理扣库存。
请用英文给出适合文生图模型的详细提示词，风格要专业、清晰、好看。

AI 会还你一段英文描述词。

第 2 步：把提示词喂给 AI 画图

在 Gemini（或其他支持画图的 AI）里，选择画图功能（如 Gemini 自带的 Banana 2.0 模型），然后把上一步得到的描述词粘贴进去，点生成。

第 3 步：完成 🎉

AI 会输出一张图片。不满意就重新生成一次，直到满意为止。

优缺点

✅ 优点	❌ 缺点
速度最快，几分钟搞定	改起来麻烦——系统变了就得重新生图
图片效果好看，色彩丰富	结果不稳定，有时第一次出的图不满意
不需要任何额外工具	提示词写得不好，出图效果就不好

📌 小白避坑提示

提示词一定要详细——你给 AI 的信息越具体，出图越准。别只说"画个架构图"，要说清楚有哪些模块、怎么连接的
多试几次——第一次出的图如果不满意很正常，微调提示词再生成一两次
英文提示词效果更好——大部分画图模型对英文理解更好，所以第一步让 AI 生成英文描述词

方案二：让 AI 先生成代码，再用代码渲染成图（推荐新手尝试）

⏱ 耗时：3-5 分钟 🛠 工具：任意 AI（ChatGPT、Claude、Gemini 都行）+ Mermaid.js

一句话原理

流程图的本质是一段代码（Mermaid.js 语法）。你让 AI 帮你写出这段代码，然后通过一个免费在线网站把代码渲染成图片。想改图？让 AI 改代码，重新渲染就行。

手把手操作步骤

第 1 步：让 AI 生成 Mermaid 代码

打开你用的 AI（ChatGPT、Claude、Gemini 都行），输入（直接复制，替换成你的内容）：

请用 Mermaid 语法帮我画一个电商系统的架构图。
系统包含：用户端、商品管理、订单系统、支付系统、后台管理。
数据流向是：用户下单 → 订单系统调支付 → 支付完成通知商品管理扣库存。
请输出纯 Mermaid 代码，用 graph TD 格式。

AI 会返回一段像这样的代码：

graph TD
    A[用户端] --> B[订单系统]
    B --> C[支付系统]
    B --> D[商品管理]
    C --> E[支付完成]
    E --> D

第 2 步：把代码渲染成图片

打开这个免费网站：mermaid.live

把 AI 给你的代码粘贴到左边的编辑区
右边立刻就会显示出流程图
点右上角的"导出"按钮，选择 PNG 或 SVG 格式下载（SVG 是矢量图，放多大都不模糊，适合正式文档）

第 3 步：想修改？让 AI 改代码就行

把旧代码贴回给 AI，告诉它你想怎么改：

`1`	`把上面的代码改一下，在"用户端"和"订单系统"之间加一个"登录验证"模块。`

改好后重新去 mermaid.live 粘贴、导出就行。

优缺点

✅ 优点	❌ 缺点
图片质量好，专业感强	复杂的图后期修改仍然比较麻烦
比方案一好修改——改代码再渲染就行	架构逻辑有大的变化时，基本要重新生成
不需要安装任何软件，打开网页就能用

📌 小白避坑提示

Mermaid 语法有固定格式——让 AI 生成时明确说"用 Mermaid 语法"，AI 都知道
mermaid.live 是神器——粘贴即预览，完全免费，不用注册账号
导出选 SVG 更好——SVG 是矢量图，放多大都不模糊，适合正式文档
代码保存好——以后修改时直接把旧代码发给 AI，说"改这行"就行

方案三：让 AI 生成可编辑的架构图（适合做正式文档）

⏱ 耗时：10-15 分钟（第一次配置稍久） 🛠 需要：一个 AI 编程工具 + Obsidian + 一个"画图指令包"

一句话原理

这是最专业的方法，但第一次需要花点时间配置。装好之后，你告诉 AI 想画什么，AI 直接生成一个可以拖拽修改的架构图文件，你用 Obsidian 打开，哪里不满意就手动调一下。方案一方案二出的图是"死图"，这个方案出的图是"活的"。

🤔 先搞懂：什么是 “画图指令包”（Skills）？

Skills 就是一套写好的"说明书"，告诉 AI 怎么帮你画图。

没装之前：你跟 AI 说"帮我画个架构图"，AI 只能给你一段文字描述
装好之后：AI 知道怎么生成一个可以编辑的架构图文件

好比给你的 AI 装了一个"画图插件"。

这个指令包叫 axton-obsidian-visual-skills，是一个叫 Axton 的人做的免费开源项目。它含 3 种画图能力：

画图方式	生成的文件	适合画什么	画面风格
Excalidraw 画图	`.excalidraw` 文件	流程图、思维导图、架构图	✏️ 手绘风格（像白板上画的）
Mermaid 画图	一段文字规则	流程图、时序图、对比图	🎯 商务专业风格
Canvas 画布	`.canvas` 文件	思维导图、知识整理	🎨 彩色卡片

💡 也可以换 Draw.io——Draw.io 是另一款免费画图软件，也有对应的指令包。本教程以 Excalidraw 为例。

🔧 前置安装（只需一次）

💡 先搞懂：这个指令包要放哪里？

AI 工具会去你电脑上的固定位置找这些指令文件。推荐放这个位置：

C:\Users\你的用户名\.claude\skills\

🤔 这串路径是啥？

C:\Users\你的用户名\ ← 你的"用户文件夹"（也叫用户目录），你电脑上的软件默认把配置文件放这里

\.claude\ ← Claude Code 这个软件建的配置文件夹

skills\ ← 专门放画图指令的地方

不知道怎么查"你的用户名"？打开文件管理器，在地址栏输入 %USERPROFILE% 按回车，跳到的那个文件夹就是。

如果你的用户名是 xiaoming，那完整路径就是 C:\Users\xiaoming\.claude\skills\

🤔 为什么在 C 盘？ 因为你的用户文件夹默认就在 C 盘。放这里是让这台电脑上所有项目都能用这个指令包，不用每个项目都装一次。

这个位置 OpenCode 和 Claude Code 通用，文件放一次，两个工具都能用。

其他工具也可以放别的位置，但新手不用管，直接放上面那个路径就行。

安装方式一：让 AI 帮你装（推荐，最简单）

不管你用 OpenCode、Claude Code 还是 Cursor，直接对它说：

1
2
3

帮我从 GitHub 下载 axtonliu/axton-obsidian-visual-skills，
解压后把 excalidraw-diagram、mermaid-visualizer、obsidian-canvas-creator
这三个文件夹放到 C:\Users\你的电脑用户名\.claude\skills\ 目录下。

AI 会自动帮你完成下载、解压、复制。完成后重启工具即可。

💡 记得把上面路径里的"你的电脑用户名"换成你真正的用户名。

安装方式二：自己手动下载

如果 AI 不支持操作文件，或者你想自己来：

打开 axton-obsidian-visual-skills 下载页面
点绿色的 Code 按钮 → Download ZIP
解压下载的文件，你会看到 3 个文件夹
打开你的 C:\Users\你的用户名\.claude\ 文件夹（如果没有 skills 文件夹，就新建一个）

把解压出来的 3 个文件夹整个拖进去

最终效果是这样：

C:\Users\你的用户名\.claude\skills\
   ├── excalidraw-diagram\
   │     └── SKILL.md
   ├── mermaid-visualizer\
   │     └── SKILL.md
   └── obsidian-canvas-creator\
         └── SKILL.md

安装方式三：Claude Code 专属的快捷安装

如果你用的是 Claude Code（只有它支持这种方式），可以直接在聊天里输入：

1
2

/plugin marketplace add axtonliu/axton-obsidian-visual-skills
/plugin install obsidian-visual-skills

安装完重启 Claude Code 就能用。OpenCode 和 Cursor 不支持这种安装方式。

还需要装这些：

软件	用途	费用
OpenCode / Claude Code / Cursor	用来运行 AI 生成画图文件	各有免费方案
Obsidian	用来查看和手动调整架构图	免费
Obsidian Excalidraw 插件	在 Obsidian 里编辑 Excalidraw 文件	免费（插件市场直接搜 “Excalidraw” 安装）

🖐️ 手把手操作步骤

第 1 步：装好 Skills，告诉 AI 你想画什么

装好 Skills 之后，直接在 OpenCode、Claude Code 或 Cursor 里输入：

如果你想画 Excalidraw 手绘风格架构图：

用 Excalidraw 帮我画一个电商系统的架构图，包含：
用户端、商品管理、订单系统、支付系统、后台管理。
用户下单 → 订单系统调支付 → 支付完成扣库存。
用中文标注。

AI 会自动在当前目录下生成一个 .excalidraw 文件（比如 电商系统架构图.excalidraw.md）。

🔍 找不到文件？ 看看 AI 打印的输出信息，它通常会告诉你文件保存的路径，比如 文件已保存到：D:/project/电商系统架构图.excalidraw.md。记住这个路径，下一步要用。

如果你想画 Mermaid 商务风格流程图：

1
2

把这个流程转成 Mermaid 图表：
用户访问首页 → 浏览商品 → 加入购物车 → 提交订单 → 在线支付 → 完成交易

AI 会生成一段 Mermaid 代码，你复制到 mermaid.live 就能渲染成图。

如果你想画 Canvas 思维导图：

1
2

把这篇文章整理成 Obsidian Canvas 思维导图：
[粘贴你的内容]

AI 会生成一个 .canvas 文件，用 Obsidian 打开就能看到彩色卡片布局。

第 2 步：在 Obsidian 中手动调整

打开 Obsidian，把上一步生成的文件拖进去
如果是 Excalidraw 文件（.excalidraw 或 .md），双击就能进入编辑模式
你可以随意拖拽方框、调整箭头、修改文字、换颜色
想加模块就拖一个新框，想删除就选中按 Delete

💡 这一步相当于你有一个"活的"架构图，想怎么改就怎么改。

第 3 步（可选）：用 AI 换风格

调整好内容和布局后，如果你想要不同的视觉效果，可以截图发给 Gemini（或其他 AI），配上参考图说：

`1`	`帮我把图1转换成类似图2的手绘风格，并加入适量的图画帮助用户理解`

（提示词1：改变很大，连内容布局都可能调整）

`1`	`转换成类似图2的手绘画面风格`

（提示词2：改变较小，只改配色和画风，内容布局不变）

🔍 Excalidraw 技能能画哪些图？

这套 Skills 的 Excalidraw 画图支持以下类型：

图表类型	适合画什么
流程图	业务流程、操作步骤、任务顺序
思维导图	概念扩展、话题分类、头脑风暴
层级图	组织架构、系统分层、目录结构
关系图	依赖关系、影响关系、元素之间的交互
对比图	方案对比、选项分析、前后对比
时间线	事件演进、项目里程碑、版本迭代
矩阵图	二维分类、优先级矩阵、能力定位
自由画布	零散想法、初期构思、自由笔记

⚠️ 常见问题与解决

Q：中文字体没有手写效果怎么办？ A：Excalidraw 的手写字体（Excalifont）默认只支持英文，中文字体需要联网加载。如果你在 Obsidian 里中文显示为普通字体：

确保能访问 Excalidraw.com（需要网络）
或者从 Excalidraw 官方字体库下载中文字体文件
放到你的 Obsidian 笔记库的 Excalidraw/CJK Fonts 文件夹下
在 Excalidraw 插件设置里开启"启动时加载中文字体"，重启 Obsidian

Q：生成出来的图有点乱怎么办？ A：这很正常，因为 AI 生成的排版不一定完美。手动在 Obsidian 里拖拽调整一下就行——这也是方案三最大的优势。

Q：一定要用 Claude Code 吗？ A：不一定。这套 Skills 在 OpenCode、Claude Code、Cursor 上都能用。OpenCode 兼容 Claude Code 的 Skills 格式，直接安装就能用。

优缺点

✅ 优点	❌ 缺点
想怎么改就怎么改——拖拽就能调整	第一次配置环境需要花点时间
不依赖提示词质量，内容可手动精修	整体流程比较长，操作步骤多
可以做出一套风格统一的文档图	美化时偶尔会出现文字乱码或错位
结合 Obsidian 做知识管理很方便
一个 Skills 装好，三种画图方式随便选

📌 小白避坑提示

建议先用方案一和方案二，熟悉了再尝试方案三
Skills 安装是关键一步——装好了 AI 才知道怎么生成可编辑的文件
Excalidraw 默认是手绘风格，画出来像手画的，很亲切
Obsidian 的 Excalidraw 插件是体验最好的查看和编辑方式
方案三最大的价值是可修改——一次配置好，后续改图只需要拖拽几步就完成
动手前可以在 GitHub 上看这个仓库的演示视频，看到效果再决定要不要装

🔧 经常用到的工具汇总

工具	用途	费用	难度
Gemini	对话 + 文生图	免费	低
ChatGPT	对话 + 文生图	付费/免费版	低
OpenCode	AI 编程工具，自动加载 `~/.claude/skills/`，支持并行调度	免费	中
Claude Code	AI 编程工具，可加载 Skills	按 API 用量付费	中
Cursor	AI 编程工具	免费版够用	中
mermaid.live	Mermaid 代码转图片	免费	低
Excalidraw	可编辑架构图工具	免费开源	低
Obsidian	笔记软件 + Excalidraw 插件可编辑架构图	免费	中
axton-obsidian-visual-skills	AI 画图指令包（含 Excalidraw / Mermaid / Canvas 三种技能）	免费开源	中

🎯 新手快速入门路线图

第1天 → 试方案一：用 Gemini 直接生图（体验一下）
         ↓
第2天 → 试方案二：用 Mermaid.js 生成流程图
         （学会"改代码 = 改图"的思路）
         ↓
第3天 → 把方案二的图用在你的文档里
         ↓
需要了 → 再研究方案三：安装 Skills + Obsidian + Excalidraw 插件
（不着急，方案一和二已经够用）

💬 常见问题（小白 FAQ）

Q：这些工具都是免费的吗？ A：Gemini 和 mermaid.live 完全免费。ChatGPT 和 Claude 有免费额度，用完才需付费。

Q：生成出来的图片能商用吗？ A：可以，架构图是你自己的设计，AI 只是帮你画出来。

Q：我是产品经理/运营，不是程序员，也能画吗？ A：完全没问题。方案一只需要打字，方案二只要会复制粘贴，都不需要写代码。

Q：生成的图片有版权问题吗？ A：工具生成的图片版权归你所有，放心使用。

Q：Mac 和 Windows 都能用吗？ A：文中所有工具都有网页版，操作系统不影响。

Q：方案三说的 “axton-obsidian-visual-skills” 到底是什么，必须装吗？ A：它是一个开源的 AI 画图"指令包"。不装也能画图，但装了之后 AI 能直接生成可编辑的架构图文件（而不是一张死图片）。如果你只是偶尔画一两张图，用方案一方案二就够了；如果你需要反复修改、做正式文档，非常推荐装一下。

Q：方案三里的 3 种画图方式（Excalidraw / Mermaid / Canvas）有什么区别？ A：简单说——Excalidraw 像手绘白板，最适合画架构图；Mermaid 偏专业商务风，适合正式文档；Canvas 是彩色思维导图，适合整理思路。根据你要的效果选就行，不用全学。

Q：方案三一定要用 Claude Code 吗？用 ChatGPT 可以吗？ A：这套 Skills 是给 能操作本地文件的 AI 编程工具设计的，比如 OpenCode、Claude Code、Cursor 都行。ChatGPT 网页版没有本地文件操作能力，所以不能用。

Q：Skills 装好后在哪？我想看看装没装成功。 A：文件放到 ~/.claude/skills/ 目录下就算装好了。你可以手动去这个目录看一眼，里面应该有 excalidraw-diagram、mermaid-visualizer、obsidian-canvas-creator 三个文件夹。重启 AI 工具后，它就能识别到。

📝 最后的话：画架构图最重要的是理清你想表达什么，AI 只是帮你把想法变成图片。先从最简单的方案一开始动手，迈出第一步最重要！

Excalidraw on Yanmu

小白也能学会！用 AI 快速画出漂亮的技术架构图

✈️ 小白也能学会！用 AI 快速画出漂亮的技术架构图

什么是技术架构图？我为什么要画它？

🤔 新手该选哪种方法？（先看这个）

方案一：直接让 AI 帮你画一张图（最简单，最快）

一句话原理

手把手操作步骤

第 1 步：让 AI 帮你写"画图描述词"

第 2 步：把提示词喂给 AI 画图

第 3 步：完成 🎉

优缺点

📌 小白避坑提示

方案二：让 AI 先生成代码，再用代码渲染成图（推荐新手尝试）

一句话原理

手把手操作步骤

第 1 步：让 AI 生成 Mermaid 代码

第 2 步：把代码渲染成图片

第 3 步：想修改？让 AI 改代码就行

优缺点

📌 小白避坑提示

方案三：让 AI 生成可编辑的架构图（适合做正式文档）

一句话原理

🤔 先搞懂：什么是 “画图指令包”（Skills）？

🔧 前置安装（只需一次）

💡 先搞懂：这个指令包要放哪里？

安装方式一：让 AI 帮你装（推荐，最简单）

安装方式二：自己手动下载

安装方式三：Claude Code 专属的快捷安装

还需要装这些：

🖐️ 手把手操作步骤

第 1 步：装好 Skills，告诉 AI 你想画什么

第 2 步：在 Obsidian 中手动调整

第 3 步（可选）：用 AI 换风格

🔍 Excalidraw 技能能画哪些图？

⚠️ 常见问题与解决

优缺点

📌 小白避坑提示

🔧 经常用到的工具汇总

🎯 新手快速入门路线图

💬 常见问题（小白 FAQ）