Figcraft — A Minimal Diagram Language for Humans & AI

Write code, or let AI do it.

Intuitive syntax for humans, perfectly understood by AI. A few lines produce professional vector graphics.

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' }

// ── Output ──
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,
})

// ── Decoder ×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,
})

// ── Encoder ×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,
})

// ── Embedding ──
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,
})

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

// Cross-attention: encoder → decoder
fig.arrow(eAN2, dCross, {
  from: 'top', to: 'left',
  path: 'polyline', curve: 63, cornerRadius: 12,
})

// Residual connections
fig.arrow(eMHA, eAN1, {
  from: 'left', to: 'left',
  path: 'polyline', curve: 35,
})
fig.arrow(dMasked, dAN1, {
  from: 'right', to: 'right',
  path: 'polyline', curve: 35,
})

// Groups
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

Two ways to use

Write code for precise control, or let AI generate via natural language — one syntax, two workflows.

AI-Native MCP Integration

Built-in MCP server. Claude, Cursor, and other AI tools generate professional diagrams from natural language. Don't want to code? Let AI handle it.

Minimal Syntax for Both

Concise and intuitive — humans pick it up in minutes. Low token overhead means AI generates correct code on the first try.

Publication-Ready Output

Professional vector diagrams. 10 shape types (2D & 3D), 11 arrow styles, smart layouts — rivaling hand-crafted designs.

Smart Auto-Layout

row(), col(), grid() auto-arrange elements. group() for labeled frames. Focus on structure, not coordinates.

Markdown Rich Text

Use **bold**, *italic*, `code`, and $math$ — markup syntax familiar to developers and AI alike.

Multi-Format Export

SVG, PNG, JPG, WebP, and PDF. Auto-fit cropping, configurable resolution, transparent backgrounds.

10 shapes, unlimited possibilities

From simple rectangles to 3D cuboids and stacked layers.

▭

rect

fig.rect()

○

circle

fig.circle()

◇

diamond

fig.diamond()

▵

trapezoid

fig.trapezoid()

T

text

fig.text()

☌

cylinder

fig.cylinder()

⬜

cuboid

fig.cuboid()

●

sphere

fig.sphere()

≡

stack

fig.stack()

🖼

image

fig.image()

Real-world diagrams

From neural network architectures to system flowcharts — hand-coded or AI-generated, always professional.

Get started in seconds

1

Install the package

$ npm install figcraft

2

Write your diagram

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

Run it

$ npx tsx diagram.ts
# diagram.svg created!

Recommended: Let AI draw via MCP

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

Add to Claude Code or Cursor settings, then just say "draw me a Transformer architecture diagram".

Minimal Diagrams For Humans & AI