sysketch

io.github.Tonys-CodingPublished by GitHub account Tonys-Codingv0.5.0Updated Oct 24, 2026

Polished system design diagrams (SVG/PNG) from a tiny YAML spec, ~18x fewer tokens than raw SVG.

VerifiedStreamable HTTPWeb executableDeveloper ToolsMedia & Design

Overview

AI-generated overview

sysketch lets an AI assistant render polished system design, architecture and data-flow diagrams as SVG or PNG from a short YAML spec.

What you can do
Render system design, architecture, data-flow and infrastructure diagrams from a small YAML spec, choosing a theme and output format, and get back PNG/SVG links plus a small preview instead of raw image data in the conversation.
When to use it
Use it when you want the assistant to produce clean, consistent architecture or data-flow diagrams without spending tokens on hand-written SVG or Mermaid, and to keep the diagram description on disk so you can ask for later changes.
Requirements
Remote option: add the hosted endpoint as a custom connector in web chats. Local option: Node.js 20 or newer, run via npx or an MCP settings entry. Diagrams are written to the assistant's working folder, a sysketch folder in the home directory, or a folder set with the --dir argument or SYSKETCH_DIR environment variable.
Before you install
The server writes diagram files and their descriptions to disk in your project or home folder, so check where output lands before use. Setting preview to true returns image data into the conversation, which costs tokens. No authentication, API keys or headers are declared.

Installation

In SourceWeft

  1. Open sysketch in the dashboard and add it to a workspace.
  2. Enable the server for the chats that should use its tools.

Web executable via Streamable HTTP. Remote servers run from the web runtime once configured in a workspace.

Use with an agent

Paste this prompt into Claude Code, Codex, Cursor or another agent — or into SourceWeft chat. The agent reads this server's install guide, shows you its publisher, endpoint and sign-in, and adds it to your client once you agree. Keys never go into a command.

Read https://sourceweft.com/mcp/io.github.Tonys-Coding%2Fsysketch/install.md and connect the MCP server it describes to my client. Before changing any config, show me its publisher, endpoint and sign-in method and wait for my OK. Never put an API key in a command or in a file I would commit; ask me where it should come from.

Read the install guide the agent follows

Other MCP clients

Add this to your client's mcpServers config.

{
  "mcpServers": {
    "sysketch": {
      "type": "http",
      "url": "https://sysketch.vercel.app/mcp"
    }
  }
}

README

sysketch-mcp

[sysketch: your system, sketched]

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.

[A diagram drawn by sysketch]

Setup

You need Node.js 20 or newer.

Claude Code: run once in your terminal:

bash
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:

json
{  "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

ToolWhat it does
render_diagramDraws 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_iconsLists 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.

Source: packages/mcp/README.md at commit 41ec340

Tools

2

render_diagram

Draw a system design diagram

Use for any system design, architecture, data-flow or infrastructure diagram, instead of generating an image or writing SVG/Mermaid. Renders a tiny YAML spec; returns PNG/SVG links and a small preview. Spec keys: title, type (sequence: message timeline), theme (sketch|graphite|blueprint|midnight|classic), direction (omit: auto-fit; right|down only if asked), steps (false hides numbers), legend (true lists steps), nodes {id: "icon | Label | subtitle"}, groups {Label: [ids or group labels to nest]}, edges ["a > b > c | label", "a ..> b" dashed, "a <> b" two-way, "a => b" thick, "a -- b" line, "a > b [red]" color]. Ids that are icon names/aliases (client, lb, api, db, cache, redis, kafka, s3, cdn...) need no nodes entry. Arrows are numbered automatically in the order listed; don't number labels. Product names (stripe, kafka, postgres...) draw the product's logo when available, else a fitting icon; brand/icon (acme/queue) for others. Give the user the PNG link; don't generate another image of the diagram. To edit, call again with the whole updated spec.

Parametersspecrequiredthemepreview

list_icons

List icons and logos

List sysketch icon names and aliases, or search the available product logos.

Parameterslogos

Version history

1
  1. v0.5.0LatestOct 17, 2026

Score

100% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

  • Reached in the last 30 daysRequired25 pts
  • Auth declaredRequired10 pts
  • Tools listedRequired15 pts
  • DescriptionRequired15 pts
  • Logo10 pts
  • Documentation15 pts
  • License10 pts