Figcraft — 代码驱动的 SVG 图表

写代码，出图表。

几行 TypeScript 即可生成专业矢量图。

transformer.ts

import { Figure } from 'figcraft'

const fig = new Figure(700, 900, { bg: '#fff' })

const W = 150, HA = 55, HF = 48, HN = 30, GAP = 20
const EX = 60, DX = 380

const cAttn = { fill: '#fff3e0', color: '#333' }
const cNorm = { fill: '#fffde7', color: '#333' }
const cFF   = { fill: '#e8eaf6', color: '#333' }
const cEmbed = { fill: '#fce4ec', color: '#333' }

// ── 输出层 ──
const softmax = fig.rect('Softmax', {
  pos: [DX, 30], size: [W, 32],
  fill: '#b2ebf2', radius: 4,
})
const linear = fig.rect('Linear', {
  pos: [DX, 82], size: [W, 32],
  fill: '#c8e6c9', radius: 4,
})

// ── 解码器 ×N ──
const dAN3 = fig.rect('Add & Norm', {
  pos: [DX, 148], size: [W, HN], ...cNorm,
})
const dFF = fig.rect('Feed Forward', {
  pos: [DX, 198], size: [W, HF], ...cFF,
})
const dCross = fig.rect('Multi-Head Attention', {
  pos: [DX, 286], size: [W, HA], ...cAttn,
})
const dMasked = fig.rect('Masked Multi-Head Attn', {
  pos: [DX, 381], size: [W, HA], ...cAttn,
})

// ── 编码器 ×N ──
const eAN2 = fig.rect('Add & Norm', {
  pos: [EX, 261], size: [W, HN], ...cNorm,
})
const eFF = fig.rect('Feed Forward', {
  pos: [EX, 311], size: [W, HF], ...cFF,
})
const eMHA = fig.rect('Multi-Head Attention', {
  pos: [EX, 381], size: [W, HA], ...cAttn,
})

// ── 嵌入层 ──
const eEmbed = fig.rect('Input Embedding', {
  pos: [EX, 511], size: [W, 36], ...cEmbed,
})
const dEmbed = fig.rect('Output Embedding', {
  pos: [DX, 511], size: [W, 36], ...cEmbed,
})

// ── 箭头 ──
fig.arrow(eMHA, eAN1, { from: 'top', to: 'bottom' })
fig.arrow(eAN1, eFF, { from: 'top', to: 'bottom' })
fig.arrow(eFF, eAN2, { from: 'top', to: 'bottom' })

// 交叉注意力：编码器 → 解码器
fig.arrow(eAN2, dCross, {
  from: 'top', to: 'left',
  path: 'polyline', curve: 63, cornerRadius: 12,
})

// 残差连接
fig.arrow(eMHA, eAN1, {
  from: 'left', to: 'left',
  path: 'polyline', curve: 35,
})
fig.arrow(dMasked, dAN1, {
  from: 'right', to: 'right',
  path: 'polyline', curve: 35,
})

// 分组
fig.group([eAN2, eFF, eAN1, eMHA], {
  label: 'Encoder ×N',
  stroke: { color: '#999', dash: [6, 3] },
})
fig.group([dAN3, dFF, dCross, dMasked], {
  label: 'Decoder ×N',
  stroke: { color: '#999', dash: [6, 3] },
})

fig.export('transformer.svg', { fit: true })

transformer.svg

你需要的一切

简洁、强大的 API，生成专业级图表。

10 种图形元素

矩形、圆形、菱形、梯形、圆柱体、长方体、球体、堆叠层、文本和图片。2D 与 3D 兼备。

智能布局

row()、col()、grid() 自动排列元素。group() 绘制带标签的分组框。

11 种箭头样式

三角形、隐形箭头、V 形、菱形、圆形、横杠等。支持直线、曲线和折线路径。

Markdown 标签

支持 **粗体**、*斜体*、`代码` 和 $数学公式$。

多格式导出

支持 SVG、PNG、JPG、WebP 和 PDF。自动裁切、可调分辨率、透明背景。

MCP 集成

内置 MCP 服务端，AI 智能体可直接生成图表。支持 Claude、Cursor 等任何兼容 MCP 的工具。

10 种图形，无限可能

从简单矩形到 3D 长方体和堆叠层，满足所有需求。

▭

矩形

fig.rect()

○

圆形

fig.circle()

◇

菱形

fig.diamond()

▵

梯形

fig.trapezoid()

T

文本

fig.text()

☌

圆柱体

fig.cylinder()

⬜

长方体

fig.cuboid()

●

球体

fig.sphere()

≡

堆叠层

fig.stack()

🖼

图片

fig.image()

真实案例

从神经网络架构到系统流程图，一切皆可绘制。

秒速上手

1

安装包

$ npm install figcraft

2

编写图表代码

import { Figure } from 'figcraft'
const fig = new Figure(600, 300)
const a = fig.rect('A', { fill: '#e3f2fd' })
const b = fig.rect('B', { fill: '#c8e6c9' })
fig.row([a, b])
fig.arrow(a, b, { head: 'stealth' })
fig.export('diagram.svg', { fit: true })

3

运行

$ npx tsx diagram.ts
# diagram.svg 已生成！

或通过 MCP 与 AI 智能体搭配使用

{
  "mcpServers": {
    "figcraft": {
      "command": "npx",
      "args": ["figcraft-mcp"]
    }
  }
}

添加到 Claude Code 或 Cursor 设置中，然后直接用自然语言描述你的图表。

代码驱动 SVG 专业图表