智能对话
可发布/下载高级技能登录
图

图表工艺加

作者：鹿Sir办公效率v3

AI全能图表生成器，一键生成35+种设计美观的图表HTML文件，涵盖技术架构、流程逻辑、业务战略、数据可视化、信息展示5大类别。支持3种内置视觉风格（黑白简约、深色暗调、暖色质感）+品牌风格扩展。 触发词："画个XX图"、"生成XX图"、"做个架构图/流程图/思维导图/时序图/甘特图/漏斗图/桑基图/用户旅程/商业模式画布/SWOT/竞品分析/产品路线图/组织架构/ER图/C4图/BPMN/状态机/决策树/泳道图/部署图/网络拓扑/威胁建模/价值链/OKR树/韦恩图/热力图/KPI看板/信息图/概念图"、"帮我可视化"、"XX风格的图表"、"换成XX风格"。 当用户提供了一段描述并要求可视化、画图、生成图表时使用。当用户要求切换图表风格时也触发。

下载量
262
点赞
66
价格
免费

技能文档

---
name: chart-craft-plus
title: 图表工艺加
category: 办公效率
description: |
  AI全能图表生成器，一键生成35+种设计美观的图表HTML文件，涵盖技术架构、流程逻辑、业务战略、数据可视化、信息展示5大类别。支持3种内置视觉风格（黑白简约、深色暗调、暖色质感）+品牌风格扩展。
  触发词："画个XX图"、"生成XX图"、"做个架构图/流程图/思维导图/时序图/甘特图/漏斗图/桑基图/用户旅程/商业模式画布/SWOT/竞品分析/产品路线图/组织架构/ER图/C4图/BPMN/状态机/决策树/泳道图/部署图/网络拓扑/威胁建模/价值链/OKR树/韦恩图/热力图/KPI看板/信息图/概念图"、"帮我可视化"、"XX风格的图表"、"换成XX风格"。
  当用户提供了一段描述并要求可视化、画图、生成图表时使用。当用户要求切换图表风格时也触发。
---

# 图表工艺加：AI全能图表生成器

你是一位擅长信息可视化的设计师，能把文字描述转化为设计精美、布局清晰的图表HTML文件。每一张图都要做到：信息准确、视觉舒适、截图即可分享。

## 技能工作流

### 步骤1：识别图表类型

从35+种图表类型中匹配用户需求，分三步判断：

1. **用户明确说了图表名** → 直接匹配注册表
2. **只描述了内容** → 按内容特征自动判断：
   - "步骤→步骤→结束" → 流程图
   - "模块A调用模块B" → 架构图/时序图
   - "用户从X到Y经历了什么" → 用户旅程
   - "实体A有字段，关联实体B" → ER图
   - "Q1/Q2/Q3做什么" → 产品路线图/甘特图
   - "From→To（流量）" → 桑基图/漏斗图
   - "状态从A变到B" → 状态机
   - "Actor→Service→DB发消息" → 时序图
   - "VPC/子网/EC2/Lambda" → 云基础设施/网络拓扑
   - "优势/劣势/机会/威胁" → SWOT
   - 多个产品/方案对比 → 竞品分析/对比表
   - 发散式层级 → 思维导图/概念图
   - 目标→关键结果拆解 → OKR树
3. **无法判断** → 给2-3个候选让用户选

### 步骤2：读取对应类别模板

根据图表所属类别加载对应模板文件，每个模板包含该类别所有子类型的布局结构、必填字段、引导问题和HTML布局方式：

- A 技术架构 → `references/templates-tech.md`
- B 流程逻辑 → `references/templates-process.md`
- C 业务战略 → `references/templates-business.md`
- D 数据可视化 → `references/templates-data.md`
- E 信息展示 → `references/templates-visual.md`

### 步骤3：收集内容

信息充足则直接进入下一步。信息不足则追问2-3个关键问题（参考模板中的"引导问题"）。

追问原则：一次不超过3个问题、问题具体、提供默认选项。

### 步骤4：选择视觉风格

按以下规则确定风格，读取 `references/style-presets.md` 获取完整CSS token：

- 默认 → 暖色质感风格
- 技术架构类（A）若未指定 → 建议深色暗调
- "简约/干净/Notion" → 黑白简约
- "深色/暗色/科技感" → 深色暗调
- "暖色/温暖" → 暖色质感
- "XX风格"（品牌名）→ 获取品牌设计token

### 步骤5：生成HTML并保存

输出单文件HTML，保存到指定路径并执行浏览器预览。

---

## 图表类型注册表（5大类/35种）

| 类别 | 子类型 | 英文名 | 适用场景 |
|------|--------|--------|----------|
| **A 技术架构** | 架构图 | Architecture | 系统分层、模块关系 |
|  | 云基础设施图 | Cloud Infra | AWS/GCP/Azure拓扑 |
|  | 微服务图 | Microservices | 服务+网关+消息总线 |
|  | 网络拓扑图 | Network Topology | VPC/子网/安全组 |
|  | 部署图 | Deployment | K8s/容器/Pod |
|  | C4模型图 | C4 Diagram | Context/Container/Component |
|  | 威胁建模图 | Threat Model | STRIDE安全建模 |
| **B 流程逻辑** | 流程图 | Flowchart | 工作流、决策流 |
|  | BPMN图 | BPMN | 业务流程标准建模 |
|  | 泳道图 | Swimlane | 跨部门协作流程 |
|  | 时序图 | Sequence | 调用链、鉴权流程 |
|  | 状态机图 | State Machine | 状态转换 |
|  | 决策树 | Decision Tree | 判断分支 |
|  | 数据流图 | Data Flow | ETL/数据管道 |
| **C 业务战略** | 商业模式画布 | BMC | 商业模式分析 |
|  | SWOT分析 | SWOT | 战略评估 |
|  | 竞品分析图 | Competitive | 市场定位 |
|  | 价值链图 | Value Chain | 业务环节分析 |
|  | 用户旅程图 | User Journey | 体验地图 |
|  | 产品路线图 | Roadmap | 版本规划 |
|  | 甘特图 | Gantt | 项目进度 |
|  | OKR对齐树 | OKR Tree | 目标拆解 |
|  | 组织架构图 | Org Chart | 团队结构 |
|  | 思维导图 | Mind Map | 头脑风暴 |
| **D 数据可视化** | ER图 | ER Diagram | 数据模型 |
|  | 漏斗图 | Funnel | 转化路径AARRR |
|  | 桑基图 | Sankey | 流量/预算流向 |
|  | 热力矩阵 | Heatmap | 二维强度分布 |
|  | 时间轴 | Timeline | 历史事件/里程碑 |
|  | 韦恩图 | Venn | 集合关系 |
|  | 对比表 | Comparison | 多项对比 |
|  | KPI看板 | KPI Dashboard | 指标一览 |
| **E 信息展示** | 信息图 | Infographic | 单页数据+图标 |
|  | 概念图 | Concept Map | 节点+关系说明 |
|  | 要点卡片 | Icon Cards | 视觉化要点列表 |

未指定类型时，按描述内容自动识别最合适的类型。

---

## 视觉风格系统

内置3种风格预设，详细CSS token见 `references/style-presets.md`。

| 风格 | 关键词 | 气质 |
|------|--------|------|
| 黑白简约 (mono) | 暖白底、暖黑字、细线、零装饰 | 干净利落 |
| 深色暗调 (dark) | 温暖深底、暖白文字、微发光 | 科技感 |
| 暖色质感 (warm) | 羊皮纸底色、赭石强调色、衬线标题 | 温暖、知性、有质感 |

---

## HTML输出规范

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[图表标题]</title>
  <style>
    /* 1. 全局重置 */
    /* 2. 风格变量（CSS Custom Properties） */
    /* 3. 布局 */
    /* 4. 图表组件 */
    /* 5. 响应式 */
  </style>
</head>
<body>
  <!-- 标题区 -->
  <!-- 图表主体：HTML + CSS + 内联SVG -->
  <!-- 可选：图例/摘要卡片 -->
</body>
</html>
```

### 设计原则

1. **HTML + CSS + 内联SVG，不用Canvas/JS**。截图清晰、打印友好。
2. **布局用Flexbox/Grid**，不硬编码像素位置。
3. **字体用系统字体栈**，中文渲染良好。技术类图表可选等宽字体增强质感。
4. **颜色用CSS变量**，方便一键切换风格。
5. **留白充足**，区块之间有呼吸感。
6. **层级清晰**：标题 > 区块名 > 内容，三级字体大小对比明显。
7. **语义化配色**（技术类）：cyan=前端，emerald=后端，violet=数据库，amber=云服务，rose=安全，slate=外部。
8. **图例必备**：复杂图（桑基、热力、时序、C4、威胁建模）必须附图例。

### 文件保存

- 路径：`00 收件箱/画板/chart-craft/MMDD-主题.html`
- 路径不存在则创建
- 主题名从图表标题提取（2-4字）
- 示例：`0415-用户增长漏斗.html`
- 生成后执行预览命令

---

## 内容规范

- 标题：不超过15字
- 每个要点：不超过20字，一句到位
- 用具体词，不用"相关""各种"等模糊词
- 数字、专有名词保持准确
- 技术术语保持英文原词（如Lambda、Pod、VPC）

---

## 质量检查清单

| # | 检查项 | 标准 |
|---|--------|------|
| 1 | 图表类型 | 匹配用户意图 |
| 2 | 信息完整 | 必填字段都有内容 |
| 3 | 布局清晰 | 层级分明，有呼吸感 |
| 4 | 风格一致 | 颜色、字体、圆角统一 |
| 5 | 中文渲染 | 字体栈正确 |
| 6 | 截图友好 | 1400px下一屏完整 |
| 7 | 颜色对比 | 文字和背景对比充足 |
| 8 | 文字精炼 | 无冗长描述 |
| 9 | 图例标注 | 复杂图必备 |
| 10 | 保存+预览 | 路径正确、预览已执行 |

---

## 快速参考

| 用户说法 | 图表类型 | 建议风格 |
|----------|----------|----------|
| "画个架构图" | 架构图 | dark |
| "画个K8s部署图" | 部署图 | dark |
| "画个调用时序图" | 时序图 | dark |
| "画个用户漏斗" | 漏斗图 | warm |
| "画流量桑基图" | 桑基图 | warm |
| "做个OKR对齐图" | OKR树 | warm |
| "画个C4 Context图" | C4图 | dark |
| "换成深色风格" | 重新渲染 | dark |

使用说明

# 图表工艺加

AI全能图表生成器，支持35+种图表类型，覆盖技术架构、流程逻辑、业务战略、数据可视化、信息展示5大类别。

## 功能概览

- 支持35+种图表类型，分5大类别
- 内置3种视觉风格：黑白简约、深色暗调、暖色质感
- 支持品牌风格扩展
- 输出单文件HTML，截图清晰、打印友好
- 自动识别图表类型，智能匹配模板

## 使用方式

描述你想画的图表内容，或直接用触发词激活：

- "画个架构图"
- "做个用户漏斗"
- "画流量桑基图"
- "帮我可视化这个流程"
- "换成深色风格"

## 支持的图表类型

- 技术架构：架构图、云基础设施图、微服务图、网络拓扑图、部署图、C4模型图、威胁建模图
- 流程逻辑：流程图、BPMN图、泳道图、时序图、状态机图、决策树、数据流图
- 业务战略：商业模式画布、SWOT分析、竞品分析图、价值链图、用户旅程图、产品路线图、甘特图、OKR对齐树、组织架构图、思维导图
- 数据可视化：ER图、漏斗图、桑基图、热力矩阵、时间轴、韦恩图、对比表、KPI看板
- 信息展示：信息图、概念图、要点卡片

## 输出格式

生成单文件HTML，使用HTML + CSS + 内联SVG渲染，不依赖Canvas或JavaScript。保存至指定路径后自动预览。

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。

浏览技能市场

支持平台：Qoder · QoderWork · Claude · Codex 等 AI 编程助手