# 编辑级图表设计

> 将 AI Agent 变成高端图表设计师的 Skill。生成13种编辑级图表类型，纯 HTML+SVG 输出，拒绝低质量 Mermaid 风格。当用户说'帮我画架构图'、'画流程图'、'生成系统图'、'做一张图'、'可视化这个数据'、'画个关系图'时触发。核心优势：专业排版美观、无 Mermaid 依赖、纯浏览器渲染、类杂志/报告风格。

- Skill: `gaoqiongxie/skill-3` (Agent Skill)
- Install (CLI): `npx skillmds@latest add gaoqiongxie/skill-3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gaoqiongxie/skill-3/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: gaoqiongxie (https://skillmd.com/u/gaoqiongxie)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/gaoqiongxie/skill-3

---


> **来源**: cathrynlavery/diagram-design ⭐1,320（GitHub本周热门新晋）
>
> **发布时间**: 2026-04-16
>
> **背景**: 作者厌倦了每次画架构图都要和 Figma 搏斗 30 分钟，于是做了这个 Skill——让 Agent 直接变成编辑级图形设计师。

# 编辑级图表设计 Skill

告别 Mermaid 方块图，生成杂志/报告级别的专业图表。

---

## 🎯 核心理念

- ❌ **拒绝**：Mermaid 圆角方块、简陋连线、默认灰色
- ✅ **追求**：编辑级排版、信息密度、视觉层次、专业美感
- 🎨 **风格**：类似《哈佛商业评论》《经济学人》的信息图

---

## 📊 13 种图表类型

| # | 图表类型 | 适用场景 | 示例 |
|---|---------|---------|------|
| 1 | **系统架构图** | 微服务、组件关系 | 展示前后端架构 |
| 2 | **流程图** | 业务流程、算法步骤 | 用户注册流程 |
| 3 | **时间线** | 历史、里程碑、计划 | 项目开发历程 |
| 4 | **对比矩阵** | 方案评估、选型 | 框架对比 |
| 5 | **层级图** | 组织架构、分类树 | 公司组织架构 |
| 6 | **关系网络图** | 依赖关系、知识图谱 | 模块依赖图 |
| 7 | **数据流图** | 数据处理、ETL | 数据管道设计 |
| 8 | **象限图** | 优先级分析、定位 | 需求优先级四象限 |
| 9 | **循环图** | 生命周期、迭代 | Scrum Sprint循环 |
| 10 | **漏斗图** | 转化分析、筛选 | 用户转化漏斗 |
| 11 | **热力矩阵** | 风险评估、频率分析 | 风险矩阵 |
| 12 | **甘特图** | 项目计划、排期 | 迭代计划 |
| 13 | **概念地图** | 知识整理、脑图 | 技术栈全景图 |

---

## 🚀 使用方式

### 基本用法

```
用户：帮我画一个用户登录流程图
```

```
用户：画一张微服务架构图，包含：API网关、用户服务、订单服务、Redis、MySQL
```

```
用户：做一个需求优先级四象限图，需要放这几个需求：[列表]
```

### 带风格要求

```
用户：帮我画系统架构图
风格：深色背景科技感
包含：前端(Vue)、后端(Spring Boot)、数据库(MySQL+Redis)、消息队列(Kafka)
```

---

## 🎨 视觉风格选项

| 风格 | 特点 | 适用 |
|------|------|------|
| **Editorial** | 杂志风，黑白+点缀色 | 正式文档、汇报 |
| **Tech Dark** | 深色背景+霓虹线条 | 技术分享、架构图 |
| **Minimal** | 极简线条，大量留白 | 知识梳理 |
| **Colorful** | 多彩区分，活泼 | 流程、分类 |
| **Corporate** | 商务蓝，专业正式 | PPT配图 |

---

## ⚙️ 输出规范

- **格式**：自包含 HTML 文件（内嵌 SVG）
- **可缩放**：SVG 矢量，无限放大不模糊
- **可复制**：直接粘贴到文档、PPT
- **无依赖**：不需要 Mermaid、D3.js 等外部库

---

## 💡 使用示例

### 示例1：架构图
```
用户：帮我画一个 Spring Boot 项目的分层架构图

助手：→ 生成包含以下层次的编辑级架构图
     Controller层 → Service层 → Mapper层 → DB层
     辅助组件：Redis缓存、消息队列
     配色：Tech Blue风格
```

### 示例2：流程图
```
用户：画一个用户下单的业务流程图

助手：→ 生成包含以下节点的专业流程图
     用户浏览→加入购物车→填写地址→支付→库存扣减→发送通知
     包含：判断节点（库存是否充足）、异常路径（支付失败）
```

### 示例3：对比矩阵
```
用户：帮我对比 MySQL、PostgreSQL、MongoDB 的选型

助手：→ 生成对比矩阵
     维度：性能、扩展性、事务、查询、学习成本、适用场景
     每个数据库对应评分和说明
```

---

## 📌 与 database-designer 的区别

| | diagram-design | database-designer |
|--|----------------|-------------------|
| 用途 | 通用图表、架构图 | 数据库 ERD 专用 |
| 输出 | HTML+SVG | Mermaid ERD + DDL |
| 风格 | 编辑级美观 | 工程规范 |

---

*告别 Mermaid 圆角，拥抱编辑级图表* ✨