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 エージェントが自然言語で図表を生成	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 エージェントに図表を作成してもらえます。Claude Code または Cursor の設定に追加してください。

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

あとは、作成したいものを自然言語で説明するだけです。

コントリビューション

コントリビューションを歓迎します。イシューを作成するか、プルリクエストをお送りください。

リンク

• ウェブサイト
• ドキュメント
• npm
• GitHub

ライセンス

MIT — XFlow が制作