图表制作大师

专业SVG图表生成工具，支持九种图表类型，统一暗色主题，输出自包含SVG文件，无需外部依赖。

Install

openclaw skills install @thcjp/diagram-master-free

图表制作大师（免费版）

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

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

核心理念

输入格式

参数名	类型	必填	说明
input	string	是	图表制作大师处理的输入数据或指令
options	object	否	附加配置选项,如模式选择、格式偏好等
callback_url	string	否	异步处理完成后的回调通知URL

text

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

使用流程

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

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

text

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

可复制模板

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

markdown

## 快速开始

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

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

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

核心能力

1. 九种图表类型

图表类型	适用场景	关键特征
架构图	系统组件与关系	分组方框、连接箭头、区域边界
流程图	决策逻辑与流程步骤	菱形判断、圆角步骤框、方向流
时序图	时序交互	垂直生命线、水平消息、激活条
结构图	类图/ER图/组织架构	分区方框、类型化关系
思维导图	头脑风暴/主题探索	中心节点、辐射分支、有机布局
时间线	按时间排列的事件	水平/垂直轴、事件标记、时段跨度
说明图	概念解释/对比	自由布局、图标、注释、视觉隐喻
状态机	状态转换/生命周期	圆角状态节点、标注转换、起止标记
数据流图	数据转换管道	处理气泡、数据存储、外部实体

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

2. 语义化配色系统

类别	填充色	描边色	用途
主要	rgba(8,51,68,0.4)	#22d3ee 青色	前端、用户界面、输入
次要	rgba(6,78,59,0.4)	#34d399 翠绿	后端、服务、处理
第三	rgba(76,29,149,0.4)	#a78bfa 紫色	数据库、存储、持久化
强调	rgba(120,53,15,0.3)	#fbbf24 琥珀	云、基础设施、区域
告警	rgba(136,19,55,0.4)	#fb7185 玫红	安全、错误、警告
连接	rgba(251,146,60,0.3)	#fb923c 橙色	总线、队列、中间件
中性	rgba(30,41,59,0.5)	#94a3b8 灰色	外部、通用、未知
高亮	rgba(59,130,246,0.3)	#60a5fa 蓝色	激活状态、焦点、当前步骤

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

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

3. 排版规则

字号层级：

角色	字号	字重
标题	16px	700
组件名称	11-12px	600
子标签/描述	9px	400
注释/备注	8px	400
箭头小标签	7-8px	400

间距规则（防止重叠）：

间距项	最小值
组件框高度	50-70px（标准），80-120px（大型）
组件间垂直间距	40px
组件间水平间距	30px
箭头标签与框边距	10px
区域边界内边距	20px
图例与最低元素间距	20px
viewBox四周留白	30px

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

4. SVG图层渲染顺序

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

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

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

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

5. 组件模式

标准方框：

svg

<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>

判断菱形：

svg

<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>

数据库圆柱：

svg

<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、需要文件处理、文档转换、格式互转、内容提取时使用、不适用于加密文件、适用于独立开发者、企业团队和自动化、工作流场景等.

使用场景

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

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

text

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

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

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

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

text

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

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

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

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

text

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

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

优秀实践

图表设计原则

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

SVG输出规范

输出单个.svg文件，除Google Fonts导入外无外部依赖
设置viewBox适配所有内容+30px留白，不设置固定width/height
在根<svg>元素上包含xmlns="http://www.w3.org/2000/svg"
所有<style>、<defs>、标记、图案放在SVG顶部
使用text-anchor="middle"居中标签，确保文字不溢出方框
保存位置：输入为文件时保存到{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生成与转换脚本）

依赖详情

依赖项	类型	是否必需	获取方式
LLM API	API	必需	由Agent平台内置LLM提供
Node.js 14+	运行时	必需	从nodejs.org安装
Google Fonts	字体	可选	在线加载（JetBrains Mono）

API Key 配置

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

可用性分类

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

License与版权声明

原始作品：Diagram（SVG图表生成工具）
原始license：MIT-0
改进license：MIT

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

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

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

免费版限制

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

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

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

示例

示例1：基础用法

bash

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

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

...

可复制模板(补充)

...

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

...

markdown

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

...

错误处理

...

错误场景	原因	处理方式
配置错误	参数缺失或格式错误	检查依赖说明中的配置要求
运行时错误	运行环境不满足	确认运行环境符合依赖说明
网络错误	连接超时或不可达	执行ping命令测试网络连通性,检查防火墙和代理设置连接后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令，参考国内替代方案

...

输出格式

json

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