Figcraft - Code-driven SVG Diagram Generator

亮点

	功能
10 种形状	rect、circle、diamond、trapezoid、text、image、cylinder、cuboid、sphere、stack	2D + 3D
11 种箭头样式	triangle、stealth、vee、circle、diamond、bar、dot + 开放式变体	完全可自定义
智能布局	row() col() grid() group()	自动对齐
Markdown 标签	**bold** *italic* `code` $math$	适用于任何元素
多种格式	SVG、PNG、JPG、WebP、PDF	fit 自动裁剪
MCP	AI Agent 通过自然语言生成图表	Claude / Cursor
无需浏览器	完全在 Node.js 中运行	可用于服务端

安装

npm install figcraft        # npm
pnpm add figcraft           # pnpm
yarn add figcraft           # yarn

需要 Node.js 18+

快速开始

import { Figure } from 'figcraft'

const fig = new Figure(800, 400, { bg: '#fff' })

const a = fig.rect('Input', {
  pos: [50, 100], size: [120, 50],
  fill: '#e3f2fd', radius: 6
})

const b = fig.rect('Output', {
  pos: [250, 100], size: [120, 50],
  fill: '#c8e6c9', radius: 6
})

fig.arrow(a, b, { head: 'stealth', label: 'data' })

await fig.export('diagram.svg', { fit: true, margin: 20 })

npx tsx diagram.ts

元素

类型	方法	描述
矩形	fig.rect()	圆角矩形
圆形	fig.circle()	圆形
菱形	fig.diamond()	决策节点
梯形	fig.trapezoid()	池化 / 降维
文本	fig.text()	Markdown 文本标签
图像	fig.image()	嵌入式图像
圆柱体	fig.cylinder()	3D 圆柱体（数据库）
长方体	fig.cuboid()	3D 长方体（张量）
球体	fig.sphere()	3D 球体
堆栈	fig.stack()	多层堆栈

箭头

fig.arrow(a, b)                                      // default
fig.arrow(a, b, { head: 'stealth', color: '#1565c0' }) // styled

// Anchors
fig.arrow(a, b, { from: 'right', to: 'left' })
fig.arrow(a, b, {
  from: { side: 'bottom', at: 30 },
  to: { side: 'top', at: 70 }
})

// Paths
fig.arrow(a, b, { path: 'curve', curve: 40 })
fig.arrow(a, b, { path: 'polyline', cornerRadius: 8 })

// Styles
fig.arrow(a, b, { style: 'dashed', bidirectional: true })

// Fan & Fork
fig.arrows(src, [a, b, c], { head: 'stealth' })  // fan-out
fig.fork(src, [a, b, c], { head: 'stealth' })     // shared trunk

布局

fig.row([a, b, c], { gap: 40 })            // horizontal
fig.col([a, b, c], { gap: 30 })            // vertical
fig.grid([a, b, c, d, e, f], { cols: 3 })  // grid
fig.group([a, b, c], { label: 'Pipeline' }) // group box

导出

await fig.export('out.svg')                           // SVG vector
await fig.export('out.png', { fit: true, scale: 3 })  // high-res PNG
await fig.export('out.jpg', { quality: 95 })           // JPEG
await fig.export('out.webp')                           // WebP
await fig.export('out.pdf')                            // PDF

const svg = fig.render({ fit: true })                  // SVG string

MCP 集成

让 AI Agent 为你创建图表。将其添加到 Claude Code 或 Cursor 配置中：

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

然后只需用自然语言描述你的需求。

参与贡献

欢迎贡献！你可以随时提交 issue 或发起 pull request。

链接

• 网站
• 文档
• npm
• GitHub

许可证

MIT — 由 XFlow 制作