业务架构图技能 V3

该技能基于 Python Pillow 库，生成高质量、分层的系统架构图，并支持多种导出格式（PNG、SVG、HTML、PPTX），增强中文字体支持，具备清晰的视觉层级结构。

核心特性

• 多格式导出：PNG（位图）、SVG（矢量图）、HTML（交互式网页）、PPTX（可编辑幻灯片）
• 增强中文支持：自动检测系统字体（如 Microsoft YaHei、PingFang SC、WenQuanYi 等）
• 清晰视觉层级：层标识（L1–L5）、图标、流向标签、图例
• 交互式 HTML：悬停提示、可点击模块、响应式布局
• 可编辑 PPTX：通过 PptxGenJS 生成原生 PowerPoint 输出

视觉样式规范

配色方案

• 背景色：#F0F7FF（浅蓝色，专业简洁）
• 卡片背景：#FFFFFF（纯白，突出内容）
• 标题栏：#4A90D9（商务蓝，用于模块标题）
• 强调色：#2E5C8A（深蓝色，用于关键模块或侧边栏）
• 边框色：#D0D8E0（浅灰蓝色，细线轮廓）
• 箭头/连线：#5B9BD5（中蓝色，方向指示）
• 文字色：#333333（主文本）、#666666（次级文本）
• 分组框：虚线边框 #A0B4C8，浅蓝填充 #E8F1FA
• 层标识：#4A90D9 基础色，按 L1–L5 层级应用渐变
• 侧边栏：#2E5C8A 深蓝背景，#1E3A5F 标题栏

图形元素

• 卡片：圆角矩形，圆角半径 8px，1px 边框，轻微阴影（2px 偏移）
• 标题栏：卡片顶部色块，高度约 30px，白色文字 + 图标
• 分组框：虚线圆角矩形，包裹每一层，含层标识及层名称
• 层标识：位于每层分组框左上角的 “L1”–“L5” 编号徽章
• 图标：卡片标题栏中使用商务风格字形图标
• 流向标签：置于连接线上的小型圆角标签，描述数据流向

连接线

• 实线箭头：主数据流/流向，线宽 2px，箭头长度 8px，附带流向标签
• 虚线箭头：辅助连接/监控流，虚线模式 (6, 3)，线宽 1px
• 颜色：实线为 #5B9BD5，虚线为 #A0B4C8
• 标签：连接线中点处显示白色胶囊状背景、蓝色文字的标签

布局原则

• 紧凑性：最小化空白区域，模块间距 16–20px
• 层级性：自上而下排列各层，配合编号标识（L1、L2、L3…）
• 对齐性：网格对齐，卡片宽度根据模块数量自动计算
• 分组性：每层以虚线分组框包裹，并标注层编号与名称
• 侧边栏：可选右侧栏，用于横切关注点（如安全、监控等）
• 图例：位于左下角，说明各类连线类型与符号含义

字体设置

• 中文：Microsoft YaHei（msyh.ttc）或 SimHei（simhei.ttf）
• 英文/数字：Arial 或 Segoe UI
• 标题：22px 加粗，深色文字，带下划线强调
• 副标题：13px，灰蓝色
• 卡片标题栏：13px 加粗，白色文字置于彩色背景上
• 正文条目：11px 常规字体，深色文字，带项目符号
• 层名称：12px 加粗，强调色
• 流向标签：10px，蓝色文字

可用图标类型

导出格式

PNG（位图）

• 最佳用途：嵌入文档、演示文稿、网站
• 分辨率：150 DPI，画布尺寸可配置
• 特性：完整视觉效果（阴影、渐变、抗锯齿）

SVG（矢量图）

• 最佳用途：缩放输出、印刷、在 Illustrator/Figma 中进一步编辑
• 特性：干净的矢量路径，可在设计工具中编辑
• 限制：视觉效果较 PNG 简化

HTML（交互式）

• 最佳用途：网页展示、交互式探索、浏览器内共享
• 特性：
  • 悬停显示模块名称的提示框
  • 可点击的模块卡片
  • 响应式容器布局
  • 悬停 CSS 动画
• 输出：单个自包含 HTML 文件

PPTX（PowerPoint）

• 最佳用途：商业演示、可编辑幻灯片
• 依赖要求：Node.js + PptxGenJS（npm install pptxgenjs）
• 特性：原生 PowerPoint 形状、可编辑文本、主题配色
• 降级方案：若 Node.js 不可用，则生成 JS 模板供手动执行

JSON 配置格式

{
  "title": "系统架构标题",
  "subtitle": "英文副标题",
  "width": 1800,
  "height": 1300,
  "layers": [
    {
      "name": "层名称",
      "modules": [
        {
          "name": "模块名称",
          "icon": "brain",
          "items": ["功能 1", "功能 2", "功能 3"]
        }
      ]
    }
  ],
  "connections": [
    {
      "from": "模块 A",
      "to": "模块 B",
      "style": "solid",
      "label": "数据流向描述"
    }
  ],
  "sidebar": {
    "title": "侧边栏标题",
    "icon": "shield",
    "items": [
      {
        "name": "类别名称",
        "items": ["子项 1", "子项 2"]
      }
    ]
  },
  "legend": [
    {"type": "solid", "label": "数据流向", "color": "#5B9BD5"},
    {"type": "dashed", "label": "辅助连接", "color": "#A0B4C8"},
    {"type": "badge", "label": "层编号", "color": "#4A90D9"},
    {"type": "rect", "label": "模块", "color": "#E8F1FA"}
  ]
}

使用方式

Python API

from generate_arch_v3 import generate_all, generate_png, generate_svg, generate_html, generate_pptx

# 一次性生成全部格式
results = generate_all(config, "output_path", formats=['png', 'svg', 'html', 'pptx'])

# 或分别生成各格式
generate_png(config, "output.png")
generate_svg(config, "output.svg")
generate_html(config, "output.html")
generate_pptx(config, "output.pptx")  # 需 Node.js + PptxGenJS

作为技能调用流程

当用户请求生成架构图时，请遵循以下步骤：

1. 理解需求：明确需呈现的系统/业务流程
2. 设计结构：规划层级（通常 4–6 层）、每层模块、侧边栏及连接关系
3. 选择图标：为每个模块选取合适的图标类型
4. 定义连接：映射跨层数据流向，并添加描述性标签
5. 添加图例：包含线型与符号的视觉说明
6. 生成图像：依据本视觉规范运行 Python 脚本
7. 交付结果：返回所有请求格式的生成文件路径

关键设计规则

1. 层数：最优为 4–6 层；每层建议含 3–6 个模块
2. 模块条目：每模块 2–5 条；描述宜简洁（2–6 个中文字符）
3. 连接关系：仅连接相邻层模块；须添加描述性流向标签
4. 侧边栏：用于横切关注点（如安全、监控、DevOps）
5. 画布尺寸：简单图推荐 1600×1200；复杂图推荐 1800×1300
6. 必备元素：标题、副标题、层标识、流向标签、图例

中文字体支持

脚本按如下优先级顺序自动检测可用中文字体：

Windows：Microsoft YaHei ＞ SimHei ＞ SimSun ＞ KaiTi ＞ FangSong
macOS：PingFang SC ＞ STHeiti ＞ Hiragino Sans GB ＞ Arial Unicode
Linux：WenQuanYi Micro Hei ＞ Droid Sans Fallback ＞ Noto Sans CJK ＞ DejaVu Sans

若未检测到中文字体，则回退至系统默认字体。验证字体检测结果可执行：

from generate_arch_v3 import get_font_info
print(get_font_info())  # 显示已检测的字体族名及路径

依赖项

• Python：Pillow（pip install Pillow）
• PPTX 导出：Node.js + PptxGenJS（npm install pptxgenjs）
• 字体：系统中文字体（自动检测）

典型应用场景

• 电商系统架构
• 微服务架构
• 数据平台架构
• AI 平台架构
• 业务流程图
• 网络拓扑图
• 云原生架构
• 教育科技系统
• 医疗信息系统
• 金融科技平台

注意事项

1. 请确保已安装 Pillow：pip install Pillow
2. 中文文本依赖系统字体支持（自动检测）
3. 模块数量较多时，请增大画布尺寸
4. 保持层级清晰，避免过多交叉连线
5. 布局宜紧凑但不拥挤，确保可读性
6. PPTX 导出前需安装 Node.js 并执行 npm install pptxgenjs
7. HTML 输出为自包含文件，可直接在浏览器中打开
8. SVG 输出可导入 Figma、Illustrator 等设计工具