Sive
ai-figure SVG 图表
可视化

ai-figure SVG 图表

当用户希望通过 AI 生成可继续编辑的 SVG 技术图示，或明确要求 AI Figure 时，使用此 Skill。该库擅长：流程图、树形图、思维导图、架构图、时序图、象限图、甘特图、状态机图、实体关系图、时间线、泳道图、气泡图、雷达图。不要用于以文本源码和 Markdown 可维护性为核心的 Mermaid 图、交互式节点编排器或统计数据仪表盘。

去使用
hustcc
hustcc
浏览1,235
使用100

Skill 文件

SKILL.md
name
ai-figure
title
ai-figure SVG 图表
description
当用户希望通过 AI 生成可继续编辑的 SVG 技术图示，或明确要求 AI Figure 时，使用此 Skill。该库擅长：流程图、树形图、思维导图、架构图、时序图、象限图、甘特图、状态机图、实体关系图、时间线、泳道图、气泡图、雷达图。不要用于以文本源码和 Markdown 可维护性为核心的 Mermaid 图、交互式节点编排器或统计数据仪表盘。

ai-figure SVG 图表

使用 ai-figure 在 HTML 中通过 JSON 配置或 Markdown 语法生成纯 SVG 图表。支持 13 种图表类型，自动布局，无需手动指定坐标。

核心依赖 (ESM)

html
<​script type="module"​>  import { fig } from 'https://cdn.jsdmirror.com/npm/ai-figure@1.0.0/+esm';<​/script​>

fig(input) — 唯一入口，返回 SVG 字符串

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​>AI Figure 图表<​/title​>  <​style​>    * { margin: 0; padding: 0; box-sizing: border-box; }    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f5f5f5; display: flex; justify-content: center; padding: 24px; }    #container { background: #fff; border-radius: 8px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }  <​/style​><​/head​><​body​>  <​div id="container"​><​/div​>  <​script type="module"​>    import { fig } from 'https://cdn.jsdmirror.com/npm/ai-figure@1.0.0/+esm';
    const svg = fig({      figure: 'flow',      title: '用户注册流程',      nodes: [        { id: 'start', label: '开始', type: 'terminal' },        { id: 'input', label: '输入信息', type: 'io' },        { id: 'validate', label: '校验?', type: 'decision' },        { id: 'save', label: '保存数据', type: 'process' },        { id: 'end', label: '完成', type: 'terminal' },      ],      edges: [        { from: 'start', to: 'input' },        { from: 'input', to: 'validate' },        { from: 'validate', to: 'save', label: '通过' },        { from: 'validate', to: 'input', label: '失败' },        { from: 'save', to: 'end' },      ],      theme: 'light',      palette: 'default',      direction: 'TB',    });
    document.getElementById('container').innerHTML = svg;  <​/script​><​/body​><​/html​>

API 概览

入口函数

javascript
import { fig } from 'https://cdn.jsdmirror.com/npm/ai-figure@1.0.0/+esm';
fig(input) // 返回 SVG 字符串

input 可以是：

  • JSON 配置对象 — 带 figure 字段的类型化配置
  • Markdown 字符串 — 类 Mermaid 语法，流式安全（部分输入不会抛错）

13 种图表类型

1. 流程图 (figure: 'flow')

javascript
fig({  figure: 'flow',  title: '审批流程',  direction: 'TB',  // 'TB' | 'LR'  theme: 'light',   // 'light' | 'dark'  palette: 'default',  nodes: [    { id: 'start', label: '开始', type: 'terminal' },    { id: 'review', label: '审核', type: 'process' },    { id: 'check', label: '通过?', type: 'decision' },    { id: 'end', label: '结束', type: 'terminal' },  ],  edges: [    { from: 'start', to: 'review' },    { from: 'review', to: 'check' },    { from: 'check', to: 'end', label: '是' },  ],  groups: [    { id: 'g1', label: '核心流程', nodes: ['review', 'check'] }  ],})

节点类型 (NodeType): process(矩形) | decision(菱形) | terminal(圆角) | io(平行四边形)

2. 树形图 (figure: 'tree')

javascript
fig({  figure: 'tree',  title: '组织架构',  nodes: [    { id: 'ceo', label: 'CEO' },    { id: 'cto', label: 'CTO', parent: 'ceo' },    { id: 'coo', label: 'COO', parent: 'ceo' },    { id: 'dev', label: '开发组', parent: 'cto' },  ],})

3. 思维导图 (figure: 'mindmap')

javascript
fig({  figure: 'mindmap',  title: '产品规划',  nodes: [    { id: 'root', label: '产品规划' },    { id: 'market', label: '市场', parent: 'root', side: 'left' },    { id: 'tech', label: '技术', parent: 'root', side: 'right' },    { id: 'smb', label: '中小企业', parent: 'market' },    { id: 'ai', label: 'AI 能力', parent: 'tech' },  ],})

4. 架构图 (figure: 'arch')

javascript
fig({  figure: 'arch',  title: '系统架构',  direction: 'TB',  layers: [    { id: 'fe', label: '前端', nodes: [{ id: 'react', label: 'React' }, { id: 'next', label: 'Next.js' }] },    { id: 'be', label: '后端', nodes: [{ id: 'nest', label: 'NestJS' }] },    { id: 'db', label: '存储', nodes: [{ id: 'pg', label: 'PostgreSQL' }, { id: 'redis', label: 'Redis' }] },  ],})

5. 时序图 (figure: 'sequence')

javascript
fig({  figure: 'sequence',  title: '登录流程',  actors: ['浏览器', 'API', '数据库'],  messages: [    { from: '浏览器', to: 'API', label: 'POST /login' },    { from: 'API', to: '数据库', label: 'SELECT user' },    { from: '数据库', to: 'API', label: '用户数据', style: 'return' },    { from: 'API', to: '浏览器', label: '200 OK + token', style: 'return' },  ],})

6. 象限图 (figure: 'quadrant')

javascript
fig({  figure: 'quadrant',  title: '功能优先级',  xAxis: { label: '工作量', min: '低', max: '高' },  yAxis: { label: '价值', min: '低', max: '高' },  quadrants: ['快速见效', '重点项目', '填充项', '低优先级'],  points: [    { id: 'a', label: '功能A', x: 0.2, y: 0.85 },    { id: 'b', label: '功能B', x: 0.75, y: 0.80 },    { id: 'c', label: '功能C', x: 0.8, y: 0.25 },  ],})

7. 甘特图 (figure: 'gantt')

javascript
fig({  figure: 'gantt',  title: '项目计划',  tasks: [    { id: 'design', label: '设计', start: '2025-01-06', end: '2025-01-24' },    { id: 'fe', label: '前端开发', start: '2025-01-20', end: '2025-02-28', groupId: 'dev' },    { id: 'be', label: '后端开发', start: '2025-01-13', end: '2025-03-07', groupId: 'dev' },    { id: 'qa', label: '测试', start: '2025-02-24', end: '2025-03-14' },  ],  milestones: [    { date: '2025-01-24', label: '设计冻结' },    { date: '2025-03-21', label: '上线' },  ],})

8. 状态机 (figure: 'state')

javascript
fig({  figure: 'state',  title: '订单状态',  nodes: [    { id: 'start', label: '', type: 'start' },    { id: 'idle', label: '待处理' },    { id: 'processing', label: '处理中' },    { id: 'done', label: '已完成' },    { id: 'failed', label: '失败', accent: true },    { id: 'end', label: '', type: 'end' },  ],  transitions: [    { from: 'start', to: 'idle' },    { from: 'idle', to: 'processing', label: '提交' },    { from: 'processing', to: 'done', label: '成功' },    { from: 'processing', to: 'failed', label: '出错' },    { from: 'failed', to: 'idle', label: '重试' },    { from: 'done', to: 'end' },  ],})

9. ER 图 (figure: 'er')

javascript
fig({  figure: 'er',  title: '博客数据模型',  entities: [    { id: 'user', label: 'User', fields: [      { name: 'id', type: 'uuid', key: 'pk' },      { name: 'email', type: 'text' },    ]},    { id: 'post', label: 'Post', fields: [      { name: 'id', type: 'uuid', key: 'pk' },      { name: 'author_id', type: 'uuid', key: 'fk' },      { name: 'title', type: 'text' },    ]},  ],  relations: [    { from: 'user', to: 'post', label: 'writes', fromCard: '1', toCard: 'N' },  ],})

10. 时间线 (figure: 'timeline')

javascript
fig({  figure: 'timeline',  title: '产品里程碑',  events: [    { date: '2024-01', label: '项目启动' },    { date: '2024-03', label: 'MVP 发布', major: true },    { date: '2024-06', label: '公测上线', major: true },    { date: '2024-09', label: '正式发布' },  ],})

11. 泳道图 (figure: 'swimlane')

javascript
fig({  figure: 'swimlane',  title: '跨部门审批',  lanes: [    { id: 'pm', label: '产品' },    { id: 'dev', label: '开发' },    { id: 'qa', label: '测试' },  ],  nodes: [    { id: 'req', label: '提需求', lane: 'pm' },    { id: 'impl', label: '开发', lane: 'dev' },    { id: 'test', label: '测试', lane: 'qa' },    { id: 'release', label: '发布', lane: 'dev' },  ],  edges: [    { from: 'req', to: 'impl' },    { from: 'impl', to: 'test' },    { from: 'test', to: 'release' },  ],})

12. 气泡图 (figure: 'bubble')

javascript
fig({  figure: 'bubble',  title: '技术评估',  xAxis: { label: '成熟度', min: '低', max: '高' },  yAxis: { label: '影响力', min: '低', max: '高' },  bubbles: [    { id: 'ai', label: 'AI', x: 0.7, y: 0.9, size: 0.8 },    { id: 'blockchain', label: '区块链', x: 0.4, y: 0.5, size: 0.4 },  ],})

13. 雷达图 (figure: 'radar')

javascript
fig({  figure: 'radar',  title: '能力评估',  axes: ['前端', '后端', '架构', '沟通', '管理'],  series: [    { label: '当前', values: [0.8, 0.6, 0.7, 0.9, 0.5] },    { label: '目标', values: [0.9, 0.8, 0.85, 0.9, 0.8] },  ],})

Markdown 语法（替代 JSON）

javascript
import { fig } from 'https://cdn.jsdmirror.com/npm/ai-figure@1.0.0/+esm';
fig(`  figure flow  direction: LR  palette: antv  title: 认证流程
  start((开始)) --> login[输入凭证]  login --> validate{有效?}  validate --> dashboard((进入)): 是  validate --> error[报错]: 否  error --> login`)

主题与调色板

主题

值说明
light浅色背景（默认）
dark深色背景

内置调色板 (palette)

default | antv | drawio | figma | vega | mono-blue | mono-green | mono-purple | mono-orange

也支持自定义十六进制数组：palette: ['#4A90E2', '#E74C3C', '#2ECC71']

注意事项

  1. 版本：使用 ai-figure@1.0.0 ESM 构建。
  2. ESM 导入：<​script type="module"​> 中使用 import { fig } from 'https://cdn.jsdmirror.com/npm/ai-figure@1.0.0/+esm'。
  3. 返回值是 SVG 字符串：通过 innerHTML 插入 DOM，或在 Node.js 中写入 .svg 文件。
  4. 自动布局：无需指定坐标，dagre 自动计算节点位置。
  5. 流式安全：Markdown 模式下部分输入不会抛错，返回空 SVG。
  6. 纯 SVG：零 DOM 依赖，浏览器和 Node.js 均可运行。
Ln 1, Col 1MarkdownSpaces: 2
No errors