主题
图表设计风格指南 (Style Guide)
本指南规范技术架构图、流程图及各类工程图表的视觉表达。设计核心原则为 专业、清晰、理性，以蓝色系为主色调，强调信息层级与阅读体验。
1. 设计原则
- 功能优先：视觉服务于信息传递，避免过度装饰
- 清晰层级：通过颜色深浅、线条粗细区分重要程度
- 一致性：统一的形状、字体与配色语言
- 蓝调美学：传递科技、稳重、信任的视觉感受
2. 配色方案
2.1 颜色克制原则
默认使用中性色，主色仅用于强调。 避免流程图大面积使用蓝色。
| 状态 | 边框 | 填充 | 线条 |
|---|---|---|---|
| 默认 | #8C8C8C 或 #D9D9D9 | #FFFFFF 或 #FAFAFA | #595959 |
| 强调 | #1890FF | #E6F7FF | #1890FF |
2.2 核心蓝
| 名称 | 色值 | 用途 |
|---|---|---|
| 主色 Primary | #1890FF | 核心节点边框、标题 |
| 深蓝 Dark | #0050B3 | 极重要强调、页眉 |
| 浅蓝 Light | #E6F7FF | 节点背景填充 |
| 边框蓝 Stroke | #91D5FF | 一般节点边框 |
2.3 架构图分层配色
架构图采用蓝色系四档渐变，从上到下由深到浅：
| 档位 | 适用层级 | 填充 | 边框 |
|---|---|---|---|
| 第1档 | 入口/页面层 | #E6F7FF | #1890FF |
| 第2档 | 业务功能模块层 | #F0F5FF | #91D5FF |
| 第3档 | 组件/服务层 | #F5FAFF | #BAE7FF |
| 第4档 | 基础支撑/后端服务 | #F0F5FF | #ADC6FF |
内部子节点统一白底灰边：
fill="#FFFFFF" stroke="#8C8C8C"
2.4 中性色
| 名称 | 色值 | 用途 |
|---|---|---|
| 文本深灰 | #262626 | 主要文字 |
| 文本浅灰 | #595959 | 辅助说明、注释 |
| 边框灰 | #D9D9D9 | 辅助容器、泳道分隔 |
| 背景灰 | #FAFAFA / #F5F5F5 | 子系统背景 |
2.5 功能色
仅在表达特定状态时使用：
| 状态 | 边框/文字 | 背景 |
|---|---|---|
| 成功 | #52C41A | #F6FFED |
| 警告 | #FAAD14 | #FFFBE6 |
| 错误 | #F5222D | #FFF1F0 |
3. 排版与字体
font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif| 用途 | 字号 | 字重 |
|---|---|---|
| 图表主标题 | 24px - 32px | bold |
| 节点标题 | 16px - 18px | bold |
| 节点正文 | 12px - 14px | normal |
| 注释/标签 | 10px - 11px | normal |
主标题颜色使用
#1890FF或#0050B3，不使用灰色。
4. 图形元素
边框宽度
| 场景 | 宽度 |
|---|---|
| 默认 | 0.5px |
| 辅助线/虚线 | 1px |
| 强调/核心路径 | 1.5px - 2px |
⚠️ 严禁边框重叠：多个图形的边框不应重叠绘制。内部元素使用
stroke="none"或保持间距。
⚠️ 连线不得穿越节点框：所有连线路径必须绕开节点框内部区域。并行分叉连线应走节点框顶边上方或底边下方的空白区域。
⚠️ 连线标注文字不得压线：标注文字必须放在连线旁边的空白区域（上方或下方 ≥ 6px），不得直接压在线条上。若空间不足，应增加容器高度而非压缩标注位置。
圆角
| 场景 | 圆角 |
|---|---|
| 标准节点 | rx="4" |
| 容器 | rx="8" |
| 开始/结束节点 | rx="22"（胶囊形） |
阴影
推荐不使用阴影（Flat Design）。
5. 布局与间距
5.1 布局方向
| 图表类型 | 推荐方向 |
|---|---|
| 架构图 | 自顶向下 |
| 流程图（时间轴/数据流） | 左至右 |
| 流程图（审批/层级） | 自顶向下 |
5.2 间距规范
| 场景 | 间距 |
|---|---|
| 并列框间距 | 10px |
| 层间垂直间距 | 60px |
| 容器内边距 | ≥ 20px |
| 模块间外边距 | 30px - 50px |
| 整体虚线框距边缘 | 15px |
5.3 整体虚线框
xml
<rect x="15" y="10" width="{W-30}" height="{H-20}" rx="8" ry="8"
fill="none" stroke="#8C8C8C" stroke-width="0.5" stroke-dasharray="4,4"/>5.4 对齐规则
- 同级元素严格水平/垂直对齐
- 标题与内容框中心点 x 坐标必须一致
- 禁止随意摆放，使用 10px/20px 网格对齐
6. 连线与箭头
箭头标记定义
xml
<defs>
<!-- 灰色实心箭头（默认） -->
<marker id="arrow-gray" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#595959"/>
</marker>
<!-- 蓝色实心箭头（强调） -->
<marker id="arrow-blue" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#1890FF"/>
</marker>
<!-- 空心箭头（异步/返回） -->
<marker id="arrow-open" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="none" stroke="#595959" stroke-width="1"/>
</marker>
</defs>连线类型
| 类型 | 样式 | 语义 |
|---|---|---|
| 实线灰色 | stroke="#595959" stroke-width="0.5" | 默认调用、依赖 |
| 实线蓝色 | stroke="#1890FF" stroke-width="1" | 核心路径强调 |
| 虚线灰色 | stroke-dasharray="4,3" | 异步、返回、弱依赖 |
贴边原则
箭头终点坐标必须精确等于目标节点的边框坐标：
节点 rect: x=260, y=110, width=120, height=70
→ 左边界 x=260，右边界 x=380
→ 上边界 y=110，下边界 y=180
→ 水平中心 y=145，垂直中心 x=320
从左侧连入：line x2="260" y2="145" ✓
从右侧连出：line x1="380" y1="145" ✓正交路径
连线使用水平/垂直折线，禁止斜线：
xml
<polyline points="x1,y1 xm,y1 xm,y2 x2,y2"
fill="none" stroke="#595959" stroke-width="0.5"
marker-end="url(#arrow-gray)"/>7. 常用图形组件
7.1 基础组件
| 组件 | 形状 | 语义 |
|---|---|---|
| 服务/模块 | 矩形 rx="4" | 微服务、应用模块 |
| 容器/子系统 | 虚线矩形 rx="8" | 逻辑分组、VPC |
| 数据库 | 圆柱体 | 持久化存储 |
| 缓存/队列 | 横向圆柱 | Redis、Kafka |
| 用户/角色 | 人形图标 | 最终用户、管理员 |
7.2 流程控制组件
| 组件 | 形状 | 语义 |
|---|---|---|
| 开始/结束 | 胶囊形 rx="22" | 流程起止点 |
| 判断/网关 | 菱形 <polygon> | 条件分支 |
| 输入/输出 | 平行四边形 | 数据输入输出 |
8. 图例（Legend）规范
8.1 图例放置原则
图例必须放在画布的固定安全区域，不得与任何内容重叠。
| 优先级 | 位置 | 适用场景 |
|---|---|---|
| 首选 | 右下角，距画布底边 20px，距右边 20px | 大多数图表 |
| 备选 | 左下角，距画布底边 20px，距左边 20px | 右下角有内容时 |
| 备选 | 右上角，标题下方 10px | 内容集中在左侧时 |
⚠️ 严禁将图例放在内容区域中间或与节点框重叠。
8.2 图例尺寸与间距
- 图例容器：
fill="#FAFAFA" stroke="#D9D9D9" stroke-width="0.5" rx="4" - 图例标题：
font-size="11" font-weight="bold" fill="#595959" - 图例条目：每条高度
20px，图标宽16px，文字间距8px - 容器内边距：
≥ 10px - 图例条目间距：
4px
8.3 图例容器尺寸计算
图例宽度 = max(条目文字宽度) + 16(图标) + 8(间距) + 20(内边距×2)
图例高度 = 标题行(20px) + 条目数 × 24px + 内边距×2(20px)
放置坐标（右下角）：
legend_x = W - legend_width - 20
legend_y = H - legend_height - 20⚠️ 画布高度必须为内容区域高度 + 图例高度 + 足够间距，确保图例不压在内容上。
8.4 图例代码模板
xml
<!-- 图例容器（右下角） -->
<!-- legend_x = W-160-20=820, legend_y = H-110-20=470（示例：W=1000, H=600） -->
<rect x="820" y="470" width="160" height="110" rx="4" ry="4"
fill="#FAFAFA" stroke="#D9D9D9" stroke-width="0.5"/>
<text x="830" y="488" font-size="11" font-weight="bold" fill="#595959"
font-family="PingFang SC, Microsoft YaHei, Arial, sans-serif">图例</text>
<!-- 条目1：实线箭头 -->
<line x1="830" y1="504" x2="846" y2="504"
stroke="#595959" stroke-width="0.5" marker-end="url(#arrow-gray)"/>
<text x="854" y="508" font-size="11" fill="#595959"
font-family="PingFang SC, Microsoft YaHei, Arial, sans-serif">同步调用</text>
<!-- 条目2：虚线箭头 -->
<line x1="830" y1="528" x2="846" y2="528"
stroke="#595959" stroke-width="0.5" stroke-dasharray="4,3" marker-end="url(#arrow-gray)"/>
<text x="854" y="532" font-size="11" fill="#595959"
font-family="PingFang SC, Microsoft YaHei, Arial, sans-serif">异步/返回</text>
<!-- 条目3：色块说明 -->
<rect x="830" y="544" width="16" height="12" rx="2"
fill="#E6F7FF" stroke="#1890FF" stroke-width="0.5"/>
<text x="854" y="554" font-size="11" fill="#595959"
font-family="PingFang SC, Microsoft YaHei, Arial, sans-serif">核心节点</text>8.5 图例与内容区域隔离
当图表内容较多时，必须预留图例区域，内容布局时主动避开：
内容区域可用宽度 = W - 图例宽度 - 图例右边距 - 内容左边距 - 间隔(≥20px)若图例放在底部，则：
内容区域可用高度 = H - 图例高度 - 图例底边距 - 标题高度 - 间隔(≥20px)9. QA 检查清单
输出前逐项检查：
- [ ] 颜色克制：流程图避免大面积蓝色，只用 1-2 个强调节点
- [ ] 分层配色：架构图各层按四档渐变，内部子节点白底灰边
- [ ] 标题突出：主标题使用主色或深蓝，不用灰色
- [ ] 字体统一：所有文字使用规定字体族
- [ ] 边框统一：默认
0.5px，无边框重叠 - [ ] 贴边检查：所有箭头精确接触目标边框，无悬空或穿模
- [ ] 连线绕行检查：所有连线路径绕开节点框内部，并行分叉连线走节点框顶边上方或底边下方
- [ ] 标注文字检查：连线上的标注文字放在线旁空白区域，不压在线上；若空间不足应增加容器高度
- [ ] 布局检查：元素间距 ≥ 10px，无重叠
- [ ] 对齐检查：同级元素严格对齐，标题与内容框居中对齐
- [ ] 留白检查：容器内边距 ≥ 20px
- [ ] 扁平化：无阴影和高光效果
- [ ] 虚线框：整体图表有虚线框，距边缘 15px
- [ ] 图例位置检查：图例放在右下角/左下角等安全区域，不与任何节点框、连线、标注文字重叠
- [ ] 图例区域预留：画布高度/宽度已为图例预留足够空间，内容布局未侵入图例区域
- [ ] 图例容器完整：图例有背景容器框，条目图标与文字对齐，字号 11px
10. SVG 代码片段参考
默认节点
xml
<rect x="10" y="10" width="120" height="50" rx="4" ry="4"
fill="#FFFFFF" stroke="#8C8C8C" stroke-width="0.5"/>
<text x="70" y="40" text-anchor="middle" font-size="13" fill="#262626"
font-family="PingFang SC, Microsoft YaHei, Arial, sans-serif">普通步骤</text>强调节点
xml
<rect x="150" y="10" width="120" height="50" rx="4" ry="4"
fill="#E6F7FF" stroke="#1890FF" stroke-width="0.5"/>
<text x="210" y="40" text-anchor="middle" font-size="13" fill="#262626"
font-family="PingFang SC, Microsoft YaHei, Arial, sans-serif">核心步骤</text>连线（精确贴边）
xml
<!-- 从节点A右边界(x=130,y=35) → 节点B左边界(x=150,y=35) -->
<line x1="130" y1="35" x2="150" y2="35"
stroke="#595959" stroke-width="0.5" marker-end="url(#arrow-gray)"/>虚线框容器
xml
<rect x="40" y="80" width="300" height="200" rx="8" ry="8"
fill="#FAFAFA" stroke="#D9D9D9" stroke-width="0.5" stroke-dasharray="4,4"/>
<text x="52" y="98" font-size="11" fill="#595959"
font-family="PingFang SC, Microsoft YaHei, Arial, sans-serif">子系统名称</text>整体虚线框
xml
<rect x="15" y="10" width="870" height="500" rx="8" ry="8"
fill="none" stroke="#8C8C8C" stroke-width="0.5" stroke-dasharray="4,4"/>