首页 文档 下载安装 GitHub
EN

下载 & 安装

使用你喜欢的包管理器,秒速上手 Figcraft。

通过包管理器安装

$ npm install figcraft
$ pnpm add figcraft
$ yarn add figcraft

环境要求

Node.js
≥ 18.0

完全在 Node.js 中运行,无浏览器依赖。

TypeScript
可选

内置完整类型定义,也支持纯 JavaScript。

三步画出第一张图

1

创建 flowchart.ts

import { Figure } from 'figcraft'

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

const data = fig.rect('Raw Data', {
  size: [100, 50], fill: 'none', radius: 6,
  color: '#000', bold: true,
})
const preprocess = fig.rect('Preprocess', {
  size: [120, 120], fill: 'none', radius: 8,
  color: '#000', bold: true, padding: 20,
})
preprocess.rect('Clean', { ... })
preprocess.rect('Tokenize', { ... })

const model = fig.rect('Model', {
  size: [120, 120], fill: 'none', radius: 8,
  stroke: { color: '#000', dash: [6, 3] },
  color: '#000', bold: true, padding: 20,
})
const evaluate = fig.rect('Evaluate', { ... })
const deploy = fig.rect('Deploy', { radius: 25 })

fig.row([data, preprocess, model, evaluate, deploy])
fig.arrow(data, preprocess, { head: 'stealth' })
fig.arrow(evaluate, preprocess, {
  path: 'curve', curve: -80,
  style: 'dashed', head: 'vee', label: 'feedback',
})

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

运行脚本

$ npx tsx flowchart.ts
3

打开 flowchart.svg

生成的流程图

MCP 集成

让 AI 智能体直接生成图表 —— 无需编写代码。

Claude Code / Cursor

添加到你的 MCP 设置文件中:

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

然后用自然语言描述你的图表:"画一个三层神经网络架构图"

下一步

探索完整 API,学习每一个功能。