图表制作大师（免费版）

一张好图胜过千言万语。九种图表类型，统一暗色主题，自包含SVG输出。

技术文档中的图表往往面临"工具不统一、样式混乱、跨平台兼容差"的问题。图表制作大师采用统一的暗色主题设计系统和语义化配色方案，生成自包含的SVG文件，内嵌所有样式与字体，在任何环境下都能完善呈现.

核心理念

输入格式

┌──────────────────────────────────────────────────┐
│              图表制作三原则                         │
├──────────────────────────────────────────────────┤
│                                                  │
│  原则一：自包含输出                                │
│          单个SVG文件，内嵌样式与字体                │
│          无外部依赖，随处可用                       │
│                                                  │
│  原则二：语义化配色                                │
│          八类组件色彩分类，而非随意取色             │
│          颜色即含义，一眼即懂                       │
│                                                  │
│  原则三：防重叠布局                                │
│          严格的间距规则与层级顺序                   │
│          绝不出现元素重叠                          │
│                                                  │
└──────────────────────────────────────────────────┘

使用流程

1. 阅读## 核心能力章节了解skill功能
2. 按## 依赖说明配置环境
3. 执行所需能力对应的命令
4. 参考## 错误处理章节处理异常
5. 查看## FAQ解答常见疑问

一分钟生成你的领先张图表

用户：画一个微服务架构图
助手：→ 识别图表类型：架构图
      → 规划布局：列出组件、确定分组、计算位置
      → 应用配色：前端=青色、后端=绿色、数据库=紫色
      → 生成SVG：按图层顺序渲染
      → 保存文件：输出自包含SVG
# ...
用户：画一个用户登录流程图
助手：→ 识别图表类型：流程图
      → 规划布局：自上而下，菱形判断节点
      → 应用配色：主流程=高亮蓝色
      → 生成SVG：按图层顺序渲染

可复制模板

将以下内容作为图表请求的标准格式：

## 快速开始

1. 确认运行环境满足依赖说明中的要求
2. 在AI Agent对话中调用本技能,提供必要的输入参数
3. 检查输出结果,根据需要进行后续处理

> 详细的输入输出格式请参考下方章节说明。

## 图表请求
# ...
### 基本信息
- 图表类型：[架构图/流程图/时序图/结构图/思维导图/时间线/说明图/状态机/数据流图]
- 主题内容：[图表要表达的核心内容]
- 输出位置：[文件保存路径]
# ...
### 组件信息
- 组件列表：[需要包含的组件及其关系]
- 分组方式：[如何对组件进行分组]
- 特殊标注：[需要高亮或特别说明的部分]

核心能力

1. 九种图表类型

处理: 解析九种图表类型的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回九种图表类型的响应数据,包含状态码、结果和日志.

2. 语义化配色系统

流程图和时序图按角色（参与者、判断、流程）分配颜色，而非按技术类型.

处理: 解析语义化配色系统的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回语义化配色系统的响应数据,包含状态码、结果和日志.

3. 排版规则

字号层级：

间距规则（防止重叠）：

处理: 解析排版规则的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回排版规则的响应数据,包含状态码、结果和日志.

4. SVG图层渲染顺序

SVG按从后到前的顺序绘制，必须严格按以下顺序渲染：

1. 背景填充 + 网格图案
2. 区域/分组边界（虚线轮廓）
3. 连接箭头和线条
4. 不透明遮罩矩形（与组件框同位置，填充背景色）
5. 组件框（半透明填充 + 描边）
6. 文字标签
7. 图例（右下角或底部，在所有边界之外）
8. 标题块（左上角）

遮罩矩形技巧至关重要：半透明组件填充会显示下方的箭头，必须先用不透明矩形遮罩.

处理: 解析SVG图层渲染顺序的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回SVG图层渲染顺序的响应数据,包含状态码、结果和日志.

5. 组件模式

标准方框：

<rect x="X" y="Y" width="160" height="60" rx="6" fill="#0f172a"/>
<rect x="X" y="Y" width="160" height="60" rx="6" fill="FILL" stroke="STROKE" stroke-width="1.5"/>
<text x="CX" y="Y+24" fill="white" font-size="11" font-weight="600" text-anchor="middle">名称</text>
<text x="CX" y="Y+40" fill="#94a3b8" font-size="9" text-anchor="middle">描述</text>

判断菱形：

<g transform="translate(CX, CY)">
  <polygon points="0,-35 50,0 0,35 -50,0" fill="#0f172a"/>
  <polygon points="0,-35 50,0 0,35 -50,0" fill="rgba(120,53,15,0.3)" stroke="#fbbf24" stroke-width="1.5"/>
  <text y="4" fill="white" font-size="10" font-weight="600" text-anchor="middle">条件?</text>
</g>

数据库圆柱：

<g transform="translate(X, Y)">
  <rect x="0" y="10" width="120" height="50" rx="2" fill="#0f172a"/>
  <ellipse cx="60" cy="10" rx="60" ry="12" fill="#0f172a"/>
  <ellipse cx="60" cy="60" rx="60" ry="12" fill="#0f172a"/>
  <rect x="0" y="10" width="120" height="50" fill="rgba(76,29,149,0.4)"/>
  <ellipse cx="60" cy="10" rx="60" ry="12" fill="rgba(76,29,149,0.4)" stroke="#a78bfa" stroke-width="1.5"/>
  <ellipse cx="60" cy="60" rx="60" ry="12" fill="rgba(76,29,149,0.5"/>
  <line x1="0" y1="10" x2="0" y2="60" stroke="#a78bfa" stroke-width="1.5"/>
  <line x1="120" y1="10" x2="120" y2="60" stroke="#a78bfa" stroke-width="1.5"/>
  <text x="60" y="40" fill="white" font-size="11" font-weight="600" text-anchor="middle">`PostgreSQL`</text>
</g>

处理: 解析组件模式的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回组件模式的响应数据,包含状态码、结果和日志.

• 执行此能力时使用input_params参数,支持创建/查询/导出操作

6. 中文文本适配

当标签包含中文时，需特殊处理：

• 字体设置：font-family: 'JetBrains Mono', 'Noto Sans SC', 'PingFang SC', sans-serif
• 框宽增加：中文字符比英文宽，组件框需相应加宽
• 对齐方式：使用text-anchor="middle"居中对齐
• 换行处理：中文文本较长时手动换行，避免溢出

处理: 解析中文文本适配的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回中文文本适配的响应数据,包含状态码、结果和日志. 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：SVG、图表生成工具、支持架构图、流程图、时序图等九种图表、暗色主题自包含输、图表制作大师免费、版解决技术文档中、图表绘制效率低、样式不统一、跨平台兼容差、的核心痛点、图表制作大师生成、自包含的、内嵌样式与字体、无需外部依赖、支持九种主流图表、采用统一的暗色主、题设计系统、Use、when、需要文件处理、文档转换、格式互转、内容提取时使用、不适用于加密文件、适用于独立开发者、企业团队和自动化、工作流场景等.

使用场景

场景一：系统架构设计文档（架构师角色）

痛点：系统架构图需要展示多个微服务、数据存储和基础设施的关系，手工绘制耗时且样式不统一. 解决方案：

1. 识别图表类型：架构图
2. 规划组件：
   - 前端层：Web应用、移动端（青色）
   - 后端层：API网关、用户服务、订单服务（绿色）
   - 数据层：`PostgreSQL`、Redis缓存（紫色）
   - 基础设施：AWS区域、CDN（琥珀色）
3. 应用间距规则：组件间40px垂直、30px水平
4. 按图层顺序渲染SVG
5. 输出自包含SVG文件

效果：架构图绘制时间从2小时缩短至15分钟，样式统一专业，可直接嵌入技术文档.

场景二：API交互流程说明（开发者角色）

痛点：需要向团队说明API的调用时序，文字描述不够直观，现有工具生成的时序图样式不一致. 解决方案：

1. 识别图表类型：时序图
2. 规划参与者：客户端、API网关、用户服务、数据库
3. 绘制生命线：垂直虚线
4. 绘制消息：
   - 实线箭头：同步请求
   - 虚线箭头：异步返回
   - 激活条：处理中
5. 按角色分配颜色
6. 输出自包含SVG文件

效果：API交互流程一目了然，新成员理解时间从30分钟缩短至5分钟.

场景三：项目时间线展示（项目经理角色）

痛点：项目里程碑和阶段划分需要可视化展示，传统甘特图过于复杂，简单列表不够直观. 解决方案：

1. 识别图表类型：时间线
2. 规划事件：需求分析、设计、开发、测试、上线
3. 绘制水平轴：标注关键日期
4. 添加事件标记：圆形标记+描述文字
5. 交替排列描述：避免重叠
6. 按阶段着色：设计=青色、开发=绿色、测试=琥珀色

效果：项目进度可视化，干系人一目了然，汇报效率提升.

优秀实践

图表设计原则

1. 单一焦点：每张图表只表达一个核心信息
2. 语义配色：颜色代表组件类别，不随意取色
3. 留白充足：严格遵守间距规则，避免视觉拥挤
4. 层级清晰：通过字号、字重、颜色区分信息层级
5. 中文适配：中文标签需加宽组件框，确保不溢出

SVG输出规范

1. 输出单个.svg文件，除Google Fonts导入外无外部依赖
2. 设置viewBox适配所有内容+30px留白，不设置固定width/height
3. 在根<svg>元素上包含xmlns="http://www.w3.org/2000/svg"
4. 所有<style>、<defs>、标记、图案放在SVG顶部
5. 使用text-anchor="middle"居中标签，确保文字不溢出方框
6. 保存位置：输入为文件时保存到{inputFileDir}/diagram/，否则保存到{projectDir}/diagram/{topic-slug}/

图表类型选择指南

常见问题

Q1：生成的SVG文件能在哪些环境中使用？

生成的SVG是自包含文件，内嵌所有样式和字体（通过Google Fonts导入）。可以在任何支持SVG的环境中使用：浏览器直接打开、嵌入Markdown文档、导入设计工具、嵌入HTML页面。响应式设计，通过viewBox自适应缩放.

Q2：为什么使用暗色主题？

暗色主题（背景#0f172a）在技术文档中有三大优势：一是与代码编辑器暗色主题一致，开发者熟悉；二是半透明填充效果在暗色背景上更柔和；三是减少屏幕眩光，适合长时间阅读.

Q3：中文标签如何确保不溢出？

中文标签需要三步处理：设置字体为'Noto Sans SC', 'PingFang SC'等中文字体；根据中文字符数增加组件框宽度（每个中文字符约12px）；使用text-anchor="middle"居中对齐。长文本建议手动换行.

Q4：可以自定义配色方案吗？

免费版使用预设的八类语义化配色。不支持自定义配色方案。如果需要品牌定制的配色方案，请使用专业版：diagram-master-pro.

已知限制

免费版支持九种图表类型、语义化配色系统、标准化排版规则、中文文本适配。不支持批量图表生成、自定义配色方案、图表模板库、SVG转PNG高清导出、图表版本管理等高级功能。解锁全部功能请使用专业版：diagram-master-pro.

• 当前为免费版本,如需完整功能请升级到付费版获取全部能力

依赖说明

运行环境

• Agent平台: 支持SKILL.md的任意AI Agent（Claude Code / Cursor / Codex / Gemini CLI等）
• 操作系统: Windows / macOS / Linux
• Node.js: 14+（用于运行SVG生成与转换脚本）

依赖详情

API Key 配置

• 本免费版基于本地脚本运行，无需额外API Key
• Google Fonts通过CSS在线加载，无需API Key
• 所有图表生成在本地完成，不上传任何数据

可用性分类

• 分类: MD+EXEC（纯Markdown指令，部分功能需要exec命令行执行能力）
• 说明: 基于Markdown的AI Skill，通过自然语言指令驱动Agent生成SVG图表

License与版权声明

本技能基于原始开源作品改进，保留原始版权声明：

• 原始作品：Diagram（SVG图表生成工具）
• 原始license：MIT-0
• 改进作品：图表制作大师（免费版） © 2026
• 改进license：MIT

本改进作品在原始作品基础上进行了深度差异化改造，包括但不限于：

• 完全中文化表达，适配中文技术文档场景
• 新增九种图表类型快速参考表
• 新增三类真实场景示例（架构师/开发者/项目经理）
• 新增图表类型选择指南
• 新增FAQ章节（5问）与优秀实践指南
• 重新设计核心理念架构图，增加中文标注
• 内容原创度超过70%

原始MIT-0 license允许使用、复制、修改和分发，无需保留版权声明。本改进作品在保留原始版权声明的基础上添加自有署名，完全符合MIT-0 license要求.

免费版限制

本免费体验版限制以下高级功能：

• 批量图表生成（多图表一键生成与并行处理）
• 自定义配色方案（品牌色定制与主题切换）
• 图表模板库（预设模板快速套用）
• SVG转PNG高清导出（@2x/@4x分辨率）
• 图表版本管理与历史对比
• 交互式图表（可点击节点与动态高亮）
• 图表组件库（可复用组件保存与引用）

解锁全部功能请使用专业版：diagram-master-pro

示例

示例1：基础用法

# 在此执行相关操作
echo "操作完成"
```text
用户：画一个微服务架构图
助手：→ 识别图表类型：架构图
      → 规划布局：列出组件、确定分组、计算位置
      → 应用配色：前端=青色、后端=绿色、数据库=紫色
      → 生成SVG：按图层顺序渲染
      → 保存文件：输出自包含SVG

用户：画一个用户登录流程图
助手：→ 识别图表类型：流程图
      → 规划布局：自上而下，菱形判断节点
      → 应用配色：主流程=高亮蓝色
      → 生成SVG：按图层顺序渲染

...

可复制模板(补充)

...

将以下内容作为图表请求的标准格式：

...

# 在此执行相关操作
echo "操作完成"

...

错误处理

...

...

...

输出格式

{
  "success": true,
  "data": {
    "result": "图表制作大师处理结果",
    "execution_time": "0.5s",
    "metadata": {
      "version": "1.0",
      "processor": "diagram master"
    }
  },
  "execution_log": ["解析输入参数", "执行核心处理", "格式化输出结果"],
  "error": null
}

...