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 分