用 AI 一句话实现架构图的「皮肤」自由！

最近做资料的时候，遇到了一些架构图适配的问题，比如从深色到浅色，手动调整费时费事，这时候可以让 AI 做牛马的牛马。

我们先随便找一张架构图做示例，找不到可以让 AI 帮你生成，比如我让 AI 生成的 某软件公司的系统架构图。

提示词 生成 Salesforce apaas 平台架构图，SVG 格式，使用 Salesforce 的架构图风格

图片保存 把生成的代码拷贝到文本文件里面，然后重命名成 'svg' 后缀即可。

• • 创建并打开文件 架构图.txt
• • 拷贝生成的 SVG ，保存文件
• • 重命名 架构图.txt 为 架构图.svg
• • 架构图.svg 就是图片格式了

VS Code 系列的编辑器（Cursor、Windsurf、Trae 等），以及 Claude 等在线 AI 工具也可以直接预览 SVG。

如何修改图片

如果 AI 生成的图片大部分都没问题，有一些局部的小瑕疵，比如上图的最左和最右的标题与内容重叠了，一般我们有两种方案：

让 AI 修改

第一个：让 AI 继续修改，比如：

提示词 安全层、集成层和基础设施层的的标题和内容重叠了，适当调整 安全层、集成层的背景宽度，以及基础设施层的背景高度，让其不要重叠。

因为复杂SVG图的生成时间很长，我们提示词尽量把问题描述清楚，不然改的不理想还要重新来过。

当然简单图的话我们就可以随意提示，比如：

提示词 安全层、集成层和基础设施层的的标题和内容重叠了

甚至是：

提示词 有些标题和内容重叠了，改一下

我很多时候都是用最简单的方法说，改的好坏「看运气」。

手动修改

因为 SVG 图输出耗时很长，很多时候「人工智能」反而不如人工的效率高，这时候我们可以 用图片编辑工具（比如 Adobe、Sketch等）打开 SVG 图片，直接修改更快捷（1分钟 vs 10 分钟+不确定性）。

修改后再导出 SVG 即可。

修改样式

现代的 AI 修改 SVG 的时候，基本不会破坏架构图结构和内容，可以精准的修改。

我们后面演示直接使用第一版错误的图片（内容有重叠）。

手绘风格

提示词 修改架构图样式，使用手绘风格

一张手绘风格的架构图，就新鲜出炉了，架构图的内容精准保留了下来，包括几个标题重复的问题。

微软云风格

提示词 修改架构图样式，使用 Azure 风格

蓝色风格图片基本满足需求。

阿里云风格

我们再试试阿里云的：

效果并不和我们想象中的一样，我们网上随意搜一个阿里云的架构图让它参考这个风格：

提示词 参考图片的样式风格，修改架构图样式，输出 SVG 格式

这次效果基本可以了。

当然你还可以用深色风格，

或者赛博朋克风格：

进阶：标准化

为了更好的标准化，我们还可以把我们喜欢的风格给标准化，之后用AI绘图的时候都用这种风格。

标准化也有两种方案：提示词和样例。

提示词标准化

我们可以为每种风格设置一个设计规范，放到用户提示词里面，或者创建一个智能体放到系统提示词里面。 好处是很容易维护和重用。

比如赛博朋克风格我们可以整理如下提示词：

### 赛博朋克风格
1. 深色背景与霓虹色彩 ：使用深蓝色到紫色的渐变背景，搭配霓虹青色、洋红色和黄色作为主要色调
2. 霓虹灯效果 ：文字和边框应用发光滤镜，模拟霓虹灯效果
3. 数字噪点和扫描线 ：添加数字噪点和扫描线效果，增强科技感和复古未来感
4. 几何锐角设计 ：所有组件都采用了直角设计，没有圆角，呈现出锐利的科技感
5. 技术字体 ：使用 'Orbitron' 和 'Courier New' 等科技感字体
6. 编码风格的文本 ：使用全大写字母和方括号标记，如 [SECURITY] 、 [API LAYER] 等
### 色彩方案
- 青色 (#00ffff) ：用于基础设施层、API层和核心引擎层的文字和边框
- 洋红色 (#ff00ff) ：用于应用层、平台服务层和安全层的文字和边框
- 黄色 (#ffff00) ：用于开发工具层和集成层的文字和边框
- 深色背景 ：深蓝色 (#0a001a, #120024) 渐变作为整体背景
### 特殊效果
- 霓虹发光效果（neon-glow-cyan、neon-glow-magenta、neon-glow-yellow）
- 数字噪点效果（digital-noise）
- 扫描线效果（scanlines）
- 编码风格的装饰文本（如 SYSTEM:// SALESFORCE.CLOUD ）

又比如手绘风格的设计规范：

### 颜色方案
- 背景色 ：浅米色 #f8f8f0
- 主要文本 ：深灰色 #333333
- 装饰文本 ：中灰色 #666666
### 层级背景色
- 浅绿色 #c1e1c1
- 浅蓝色 #b3d1ff
- 浅紫色 #d8c1f0
- 浅橙色 #ffd8b3
### 组件颜色
- 组件背景 ：白色 #ffffff
- 组件边框 ：深灰色 #333333
### 装饰元素
- 云朵填充 ：浅灰色 #e6e6e6
- 云朵边框 ：中灰色 #999999
- 连接线 ：中灰色 #666666
## 3. 字体规范
### 字体族
- 主要字体 ： Comic Sans MS, cursive （手写风格字体）
### 字体大小
- 主标题 ：32px，粗体
- 层级标题 ：24px，粗体
- 大型组件标题 ：18px，粗体
- 中型组件标题 ：16px
- 小型组件文本 ：14px
- 垂直文本 ：12px
- 装饰文本 ：16px
## 4. 形状与边框
### 层级容器
- 形状 ：圆角矩形
- 圆角半径 ：10px
- 边框宽度 ：2px
- 边框样式 ：虚线 stroke-dasharray="2"
- 边框连接 ：圆角 stroke-linejoin="round"
### 组件形状
- 大型组件 ：圆角矩形，圆角半径 8px
- 中型组件 ：圆角矩形，圆角半径 5px
- 小型组件 ：圆角矩形，圆角半径 5px
### 边框样式
- 组件边框宽度 ：1px
- 组件边框样式 ：虚线 stroke-dasharray="2"
- 内部分隔线 ：1px 宽度，虚线 stroke-dasharray="2"

使用样例标准化

提示词来进行风格标准化也有一定的缺点，比如复杂图形有的时候风格并不一定统一。 而且用到特殊效果的时候每次输出的SVG样式代码也并不完全一致。

此时我们可以用更复杂的方法来解决这个问题，就是给出设计样例。

使用如下样例进行SVG架构图绘制：

- 层级容器

<rectx="100"y="600"width="800"height="80"rx="10"fill="#c1e1c1"stroke="#333333"
stroke-width="2"stroke-dasharray="2"stroke-linejoin="round"/>
<textx="500"y="620"font-size="24"font-family="Comic Sans MS, cursive"fill="#333333"
text-anchor="middle"font-weight="bold">层级名称</text>

- 组件

<rectx="120"y="640"width="110"height="30"rx="5"fill="#ffffff"stroke="#333333"
stroke-width="1"stroke-dasharray="2"/>
<textx="175"y="660"font-size="14"font-family="Comic Sans MS, cursive"fill="#333333"
text-anchor="middle">组件名称</text>

- 垂直文本

<textx="50"y="420"font-size="24"font-family="Comic Sans MS, cursive"fill="#333333"
text-anchor="middle"transform="rotate(-90, 50, 420)">垂直层级名称</text>

- 连接线

<linex1="500"y1="200"x2="500"y2="220"stroke="#666666"stroke-width="2"
stroke-dasharray="5,5"filter="url(#pencil)"/>

这样的好处是可以最大限度的对齐设计规范，坏处就是不好维护。比较适合有严格设计要求且有大批量绘图需求的场景。 不然你整理设计规范的时间，人家早就画完下班了。

使用样例约束还有一种方案就是使用样例文件，你直接把你的 设计规范.svg 丢给 AI 让 AI 参考你的设计稿进行绘图。 如果你的设计规范 注释 比较好，也会有很强的一致性。

最后

最后想说的是，架构图和样式只是快速表达的一种方式，如果非必要，还是以简单直观为主，没必要花费太多时间在样式上。