Figcraft - Code-driven SVG Diagram Generator

by zeqinlee

356 downloads

Not rated

GitHub

Developer Tools

About

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

Details

Author: zeqinlee
Downloads: 356
Categories: Developer Tools

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below

Plugin Name Figcraft - Code-driven SVG Diagram Generator

Command (node, npx, python, etc.)

Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "figcraft - code-driven svg diagram generator": {
            "figcraft": {
                "command": "npx",
                "args": [
                    "figcraft-mcp"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figcraft - code-driven svg diagram generator": {
            "figcraft": {
                "command": "npx",
                "args": [
                    "figcraft-mcp"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figcraft - code-driven svg diagram generator": {
            "figcraft": {
                "command": "npx",
                "args": [
                    "figcraft-mcp"
                ]
            }
        }
    }
}

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

{
    "mcpServers": {
        "figcraft - code-driven svg diagram generator": {
            "figcraft": {
                "command": "npx",
                "args": [
                    "figcraft-mcp"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figcraft - code-driven svg diagram generator": {
            "figcraft": {
                "command": "npx",
                "args": [
                    "figcraft-mcp"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figcraft - code-driven svg diagram generator": {
            "figcraft": {
                "command": "npx",
                "args": [
                    "figcraft-mcp"
                ]
            }
        }
    }
}

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "figcraft - code-driven svg diagram generator": {
            "figcraft": {
                "command": "npx",
                "args": [
                    "figcraft-mcp"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figcraft - code-driven svg diagram generator": {
            "figcraft": {
                "command": "npx",
                "args": [
                    "figcraft-mcp"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figcraft - code-driven svg diagram generator": {
            "figcraft": {
                "command": "npx",
                "args": [
                    "figcraft-mcp"
                ]
            }
        }
    }
}

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

{
    "mcpServers": {
        "figcraft - code-driven svg diagram generator": {
            "figcraft": {
                "command": "npx",
                "args": [
                    "figcraft-mcp"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figcraft - code-driven svg diagram generator": {
            "figcraft": {
                "command": "npx",
                "args": [
                    "figcraft-mcp"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figcraft - code-driven svg diagram generator": {
            "figcraft": {
                "command": "npx",
                "args": [
                    "figcraft-mcp"
                ]
            }
        }
    }
}

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "figcraft - code-driven svg diagram generator": {
            "figcraft": {
                "command": "npx",
                "args": [
                    "figcraft-mcp"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figcraft - code-driven svg diagram generator": {
            "figcraft": {
                "command": "npx",
                "args": [
                    "figcraft-mcp"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "figcraft - code-driven svg diagram generator": {
            "figcraft": {
                "command": "npx",
                "args": [
                    "figcraft-mcp"
                ]
            }
        }
    }
}

From the repository

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.

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

{
    "mcpServers": {
        "figcraft - code-driven svg diagram generator": {
            "figcraft": {
                "command": "npx",
                "args": [
                    "figcraft-mcp"
                ]
            }
        }
    }
}

McpServers

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

Features

- 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 - No browser required — pure Node.js ## MCP Tools - create_diagram — Generate SVG diagrams from TypeScript code - get_element_types — List all available shapes and their parameters ## Quick Start npm install figcraft ## Documentation https://figcraft.xflowing.com/docs.html

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Details

Jump to

Setting up with Highlight

From the repository

Claude Desktop / Cursor

McpServers

Features

Install

More like this

Sentry

Github

Git

GitLab

Context 7

Playwright