Figcraft — 人与 AI 共用的极简图表语言

写代码出图，或让 AI 代劳。

语法极简直观，人类几行代码即可出图；AI 同样一看就懂、一写就对。

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

两种使用方式

手写代码精确控制，或交给 AI 用自然语言生成 — 同一套语法，两种工作流。

AI 原生 MCP 集成

内置 MCP 服务端，Claude、Cursor 等 AI 工具可用自然语言直接生成专业图表。不想写代码？让 AI 代劳。

人与 AI 共享的极简语法

语法简洁直观，人类几行代码即可上手；同时对 AI 友好，token 开销低，大模型一写就对。

专业级输出质量

出版级矢量图表。10 种 2D/3D 图形、11 种箭头样式、智能布局，媲美手工设计。

智能自动布局

row()、col()、grid() 自动排列，group() 分组框。AI 无需计算坐标，专注描述结构。

Markdown 富文本

支持 **粗体**、*斜体*、`代码` 和 $数学公式$，AI 天然熟悉的标记语法。

多格式导出

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

10 种图形，无限可能

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

▭

矩形

fig.rect()

○

圆形

fig.circle()

◇

菱形

fig.diamond()

▵

梯形

fig.trapezoid()

T

文本

fig.text()

☌

圆柱体

fig.cylinder()

⬜

长方体

fig.cuboid()

●

球体

fig.sphere()

≡

堆叠层

fig.stack()

🖼

图片

fig.image()

真实案例

从神经网络架构到系统流程图，无论手写还是 AI 生成，都能输出专业图表。

秒速上手

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 设置中，然后用自然语言告诉 AI「帮我画一个 Transformer 架构图」即可。

极简图表语言 人与 AI 共用