sysketch

sysketch-mcp

让 Claude、Cursor 和其他 AI 助手使用 sysketch 绘制简洁的手绘风格系统设计图。助手只需编写一段简短的系统描述，而不是亲自绘制图像，因此绘图更快、更省成本，也更一致。

设置

你需要使用 Node.js 20 或更高版本。

Claude Code： 在终端中运行一次：

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

Claude Desktop、Cursor 和其他助手： 将以下内容添加到助手的 MCP 设置中，然后重启助手：

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

图表会保存到助手运行服务的文件夹中（在 Claude Code 和 Cursor 中即为你的项目文件夹）。Claude Desktop 会在项目外启动服务，因此图表会保存到你的主目录下的 sysketch 文件夹中。若要选择文件夹，请在 args 中添加 "--dir", "/path/to/folder"，或设置 SYSKETCH_DIR 环境变量。

ChatGPT、网页版 Claude、Perplexity 和其他 AI 聊天工具： 无需安装此软件包。只需将 https://sysketch.vercel.app/mcp 添加为自定义连接器（详情）。

使用

例如，可以这样向助手提问：

使用 sysketch 将一个网约车系统绘制为 PNG。

图表会与描述一起保存在该文件夹中的 diagrams/ 目录内，因此你之后可以要求修改，例如：“添加一个通知服务”“使用蓝图主题”。对话中只会返回一行摘要，不会返回图像数据。

使用 Claude Code（Sonnet）处理 5 个系统设计请求进行测量：使用 sysketch 时输出 4,352 个 token，而让助手自行绘制 SVG 时为 77,518 个 token，减少了约 18 倍（基准测试）。

工具

工具	功能
render_diagram	根据描述（spec）或文件（file）绘制 .svg 或 .png 图表，并可选择使用 theme。preview: true 会将图像返回给助手（默认关闭）。
list_icons	列出图标及其可识别名称；logos 用于搜索已安装的官方 Logo。

这些工具定义会为每个会话增加约 450 个 token。

官方 Logo（可选）

安装官方 Logo 后，s3 或 stripe 等产品名称会显示为真实 Logo。请参阅Logo 指南。

更多示例、主题和完整规范：github.com/Tonys-Coding/sysketch

MIT 许可证。