sysketch

io.github.Tonys-Coding由 GitHub 账号 Tonys-Coding 发布v0.5.0更新于 Oct 24, 2026

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

已验证Streamable HTTP可网页运行开发者工具媒体与设计

概览

AI 生成的概览

sysketch 让 AI 助手根据简短的 YAML 规格生成精美的系统设计、架构与数据流图，输出 SVG 或 PNG。

可以做什么
根据简短的 YAML 规格绘制系统设计、架构、数据流与基础设施图，可选择主题和输出格式，返回 PNG/SVG 链接和一张小预览图，而不是把原始图像数据放进对话。
适用场景
当你希望助手生成整洁一致的架构图或数据流图，又不想把 token 花在手写 SVG 或 Mermaid 上，并希望把图的描述保存在磁盘上以便之后修改时使用。
运行要求
远程方式：在网页版对话中把托管端点添加为自定义连接器。本地方式：需要 Node.js 20 或更高版本，通过 npx 或 MCP 设置项运行。图会写入助手的工作目录、主目录下的 sysketch 文件夹，或用 --dir 参数、SYSKETCH_DIR 环境变量指定的文件夹。
安装前请注意
该服务器会把图文件及其描述写入项目或主目录中的磁盘，使用前请确认输出位置。将 preview 设为 true 会把图像数据带回对话，消耗更多 token。未声明任何身份验证、API 密钥或请求头。

安装

在 SourceWeft 中

  1. 打开 控制台中的 sysketch，将其添加到工作区。
  2. 为需要使用其工具的对话启用该服务。

Web executable，通过 Streamable HTTP。 远程服务在工作区中配置后即可从网页运行时运行。

交给智能体安装

把这段提示词粘贴到 Claude Code、Codex、Cursor 等智能体，或 SourceWeft 对话中。智能体会读取该服务器的安装指南，先向你展示发布者、端点和登录方式，经你同意后再把它添加到你的客户端。密钥不会写进任何命令。

阅读 https://sourceweft.com/mcp/io.github.Tonys-Coding%2Fsysketch/install.md，并按其中说明把这个 MCP 服务器接入我的客户端。修改任何配置之前，先告诉我它的发布者、端点和登录方式，等我确认。不要把 API 密钥写进命令或我会提交的文件；问我密钥应从哪里获取。

查看智能体所依据的安装指南

其他 MCP 客户端

把它添加到你客户端的 mcpServers 配置中。

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

来源：packages/mcp/README.md，提交 41ec340

工具

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.

输入参数spec必填themepreview

list_icons

List icons and logos

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

输入参数logos

版本历史

1
  1. v0.5.0最新Oct 17, 2026

评分

已满足适用检查项的 100%

该评分衡量此收录条目的完整程度，依据注册中心条目、端点与公开来源计算得出。它不是对服务器本身的评价，也不表示服务器安全或当前可用：可连通性是带日期的检查结果，评分也不包含安装量或用户评价。

  • 近 30 天内可连通必需25 分
  • 已声明认证方式必需10 分
  • 已列出工具必需15 分
  • 描述必需15 分
  • 图标10 分
  • 文档15 分
  • 许可证10 分