Install — Figcraft

Install via package manager

$ npm install figcraft

$ pnpm add figcraft

$ yarn add figcraft

Requirements

Node.js

≥ 18.0

Runs entirely in Node.js — no browser dependency.

TypeScript

Optional

Full type definitions included. Works with plain JS too.

Your first diagram in 3 steps

1

Create 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

Run it

$ npx tsx flowchart.ts

3

Open flowchart.svg

MCP Integration

Let AI agents generate diagrams directly — no code needed.

Claude Code / Cursor

Add to your MCP settings file:

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

Then simply describe your diagram: "Draw a neural network architecture with 3 layers"

Next steps

Explore the full API and learn every feature.

Read the Docs View on GitHub

Download & Install