sysketch-mcp

Lets Claude, Cursor and other AI assistants draw clean, hand-sketched system design diagrams with sysketch. The assistant writes a short description of your system instead of drawing the image itself, which makes diagrams faster, cheaper and consistent.

Setup

You need Node.js 20 or newer.

Claude Code: run once in your terminal:

claude mcp add sysketch -- npx -y sysketch-mcp

Claude Desktop, Cursor and other assistants: add this to the assistant's MCP settings, then restart it:

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

Diagrams are saved in the folder your assistant runs the server in (your project, in Claude Code and Cursor). Claude Desktop starts servers outside any project, so there they go to a sysketch folder in your home folder. To choose a folder, add "--dir", "/path/to/folder" to args, or set the SYSKETCH_DIR environment variable.

ChatGPT, Claude on the web, Perplexity and other AI chats: you don't need this package. Add https://sysketch.vercel.app/mcp as a custom connector instead (details).

Use

Ask your assistant, for example:

Use sysketch to draw a ride-sharing system as a PNG.

The diagram is saved in diagrams/ inside that folder, together with its description, so you can ask for changes later: "add a notification service", "use the blueprint theme". Only a one-line summary comes back into the conversation, never the image data.

Measured with Claude Code (Sonnet) on 5 system design requests: 4,352 output tokens with sysketch vs 77,518 when the assistant drew the SVG itself, about 18x fewer (benchmark).

Tools

| Tool | What it does | | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | render_diagram | Draws a diagram from a description (spec) or a file (file) to .svg or .png, with an optional theme. preview: true returns the image to the assistant (off by default). | | list_icons | Lists the icons and recognized names; logos searches installed official logos. |

The tool definitions add about 450 tokens to each session.

Official logos (optional)

When official logos are installed, product names like s3 or stripe show the real logo. See the logos guide.

More examples, themes and the full spec: github.com/Tonys-Coding/sysketch

MIT License.