Figcraft - Code-driven SVG Diagram Generator MCP Server

@zeqinlee

リポジトリ

基本情報

カテゴリ

開発者ツール

トランスポート

stdio

作者

zeqinlee

投稿者

ZEQIN LI

Figcraft - Code-driven SVG Diagram Generator MCP Server について

Code-driven SVG diagram library for TypeScript/Node.js. Generate publication-quality architecture diagrams, flowcharts, and neural network diagrams with just a few lines of code. Features 10

#svg #diagram #flowchart #architecture #typescript #node #mcp

Figcraft - Code-driven SVG Diagram Generator MCP Server の設定

以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。

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

Figcraft - Code-driven SVG Diagram Generator MCP Server のツール

ツール一覧はまだありません

この掲載には表示できるツール一覧がまだありません。サーバーにツールがないという意味ではありません。対応機能はプロジェクトのドキュメントをご確認ください。

上のボタンで一時的なサンドボックスでこのサーバーを実行し、ツール一覧を取得できます。

概要

What is Figcraft - Code-driven SVG Diagram Generator?

Figcraft is a code-driven SVG diagram generator that runs entirely in Node.js and exposes two MCP tools: create_diagram for generating SVG diagrams from TypeScript code, and get_element_types for listing all available shapes and parameters. It is built for developers who need to programmatically create diagrams without a browser dependency.

How to use Figcraft - Code-driven SVG Diagram Generator?

Install via npm install figcraft, then invoke the MCP tools create_diagram (to generate diagrams from TypeScript code) or get_element_types (to see available shapes and their parameters). Refer to the online documentation at https://figcraft.xflowing.com/docs.html for full usage details.

Key features of Figcraft - Code-driven SVG Diagram Generator

10 built-in shapes: Rect, Circle, Diamond, Trapezoid, Cylinder, Cuboid, Sphere, Stack, Text, Image
11 arrow head styles with open variants
Smart auto-routing with obstacle avoidance (v0.2.0+)
Layout helpers: row(), col(), grid(), group()
Export to SVG, PNG, JPG, WebP, PDF
Pure Node.js — no browser required

Use cases of Figcraft - Code-driven SVG Diagram Generator

Generate flowcharts and architectural diagrams programmatically from TypeScript code
Automate diagram creation in CI/CD pipelines or backend services
Create diagrams with custom layouts using built-in layout helpers
Export diagrams to multiple raster and vector formats for documentation
Integrate diagram generation into MCP-compatible assistants and workflows

よくある質問

What shapes are available in Figcraft?

Figcraft includes 10 built-in shapes: Rect, Circle, Diamond, Trapezoid, Cylinder, Cuboid, Sphere, Stack, Text, and Image.

Does Figcraft require a browser or headless browser?

No — Figcraft is pure Node.js and runs entirely server-side with no browser dependency.

What export formats are supported?

Figcraft can export diagrams to SVG, PNG, JPG, WebP, and PDF.

How do I install Figcraft?

Installation is done via npm: `npm install figcraft`. No additional runtime dependencies are required.

Does Figcraft support automatic routing of connectors?

Yes, as of version v0.2.0+, Figcraft provides smart auto-routing with obstacle avoidance for connector lines.

「開発者ツール」の他のコンテンツ

UXMachine

UXMachine measures a web page in a real browser and returns verifiable observations, each with its evidence and its limits. It opens the address on desktop (1280×800) and mobile (390×844) and follows the site's own links

Moxie Docs

Jackalope-Dev

Automated codebase documentation for GitHub: searchable docs, MCP context for AI agents, doc drift detection, and Friday Cleanup PRs.

Routebase

Routebase keeps your API's design, docs, contract tests, mocks and monitoring in one living OpenAPI spec so they can't drift apart. Agents work on that same source of truth, under your team's permissions.

Foremerge

naw103

Catch intent conflicts before code conflicts. The open-source coordination protocol for coding agents, built above Git.

Mobbin

Mobbin MCP connects your AI agents to 600,000+ real product screens, so what they build starts with what already works.