Erstellt handgezeichnete Systemdesign-Diagramme im SVG- oder PNG-Format aus prägnanten YAML-Spezifikationen.
Auch bekannt als Tonys-Coding/sysketch, sysketch-mcp
- Stars
- 1
- Tools
- 2
- Downloads, 30 Tage
- —
- Neueste Version
- 0.5.0
- Letzter Commit
- 29. Okt. 2026
- Lizenz
- MIT
Was ist sysketch MCP?
sysketch ist ein MCP server. Erstellt handgezeichnete Systemdesign-Diagramme im SVG- oder PNG-Format aus prägnanten YAML-Spezifikationen. Er stellt 2 Tools bereit, etwa render_diagram, list_icons.
Zusammenfassung generiert aus dem README des Projekts
Über sysketch MCP server
sysketch ermöglicht es AI Assistants wie Claude und Cursor, handgezeichnete Systemdesign-Diagramme mithilfe von YAML-Spezifikationen zu erstellen. Anstatt dass der Assistant komplexe Bilddaten direkt generiert, schreibt er eine kurze Beschreibung, die der Server in SVG- oder PNG-Dateien umwandelt. Diese Methode reduziert den Token-Verbrauch erheblich, was den Prozess für Entwickler schneller und kostengünstiger macht.
Nutzer können den Server lokal via npx für Desktop-Clients einrichten oder eine Verbindung zu einem Remote-Endpoint für webbasierte Chats herstellen. Der Server benötigt Node.js 20 oder neuer. Er stellt das render_diagram Tool bereit, um Visualisierungen aus einer Spezifikation oder Datei zu erstellen, sowie ein list_icons Tool, um verfügbare Icons und Logos zu identifizieren. Diagramme werden in einem lokalen Verzeichnis gespeichert, das über die Umgebungsvariable SYSKETCH_DIR oder ein spezifisches Verzeichnis-Argument angepasst werden kann.
Was du damit machen kannst
- 1Systemarchitektur-Visualisierungen erstellenBitte einen AI Assistant, ein PNG-Diagramm einer Ride-Sharing-Systemarchitektur zu erstellen.
- 2Bestehende Diagramme iterierenFordere spezifische Änderungen an einem zuvor generierten Diagramm an, wie zum Beispiel das Hinzufügen eines neuen Service.
- 3Verschiedene visuelle Stile anwendenÄndere die Ästhetik eines Diagramms, indem du ein anderes Theme wie blueprint angibst.
- 4Offizielle Markenlogos einbindenNutze bekannte Produktnamen, um tatsächliche Logos für Services wie S3 oder Stripe anzuzeigen.
Geschrieben aus dem README des Projekts. Jeder Use Case wurde gegen ein Zitat daraus geprüft.
So installierst du sysketch MCP
Formate geprüft am 10. Nov. 2026Zu Cursor hinzufügenZu Goose hinzufügensysketch MCP in Claude Code installieren
$ claude mcp add sysketch -- npx -y sysketch-mcpsysketch MCP in Cursor installieren
~/.cursor/mcp.json
{
"mcpServers": {
"sysketch": {
"command": "npx",
"args": [
"-y",
"sysketch-mcp"
]
}
}
}sysketch MCP in VS Code installieren
.vscode/mcp.json
{
"servers": {
"sysketch": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"sysketch-mcp"
]
}
}
}sysketch MCP in VS Code CLI installieren
$ code --add-mcp '{"name":"sysketch","type":"stdio","command":"npx","args":["-y","sysketch-mcp"]}'sysketch MCP in Claude Desktop installieren
claude_desktop_config.json
{
"mcpServers": {
"sysketch": {
"command": "npx",
"args": [
"-y",
"sysketch-mcp"
]
}
}
}sysketch MCP in Codex installieren
$ codex mcp add sysketch -- npx -y sysketch-mcpsysketch MCP in Codex config.toml installieren
~/.codex/config.toml
[mcp_servers.sysketch] command = "npx" args = ["-y", "sysketch-mcp"]
sysketch MCP in Gemini CLI installieren
$ gemini mcp add -s user sysketch npx -- -y sysketch-mcpsysketch MCP in Gemini settings.json installieren
~/.gemini/settings.json
{
"mcpServers": {
"sysketch": {
"command": "npx",
"args": [
"-y",
"sysketch-mcp"
]
}
}
}sysketch MCP tools 2
Erkannt aus dem READMErender_diagramlist_icons
| render_diagram | — | |
| list_icons | — |
Automatisierte Checks
Geluften am 13. Nov. 2026Vollständiger Bericht →Unsere automatisierten Checks bestanden. Das ist kein Security-Audit: Lies den Code und gib dem Server nur den minimal notwendigen Zugriff. Wie die Checks funktionieren
- Source Repository verknüpft und erreichbarBestanden
- Open Source Lizenz (OSI)Bestanden
- Commit oder Release im letzten JahrBestanden
- Package-Name ähnelt keinem populären PackageBestanden
- Remote Endpoint nutzt HTTPSBestanden
- Destruktive Tools sind markiertBestanden
- Keine versteckten Anweisungen an das ModellBestanden
- Keine kritischen Advisories im Paket oder seinen AbhängigkeitenBestanden
README
Auf GitHub ansehensysketch-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.
sysketch MCP Fragen
Wie füge ich sysketch MCP zu Claude Code hinzu?
Führe claude mcp add sysketch -- npx -y sysketch-mcp in deinem Terminal aus. Füge --scope user hinzu, damit der Server in jedem Projekt verfügbar ist.
Wie füge ich sysketch MCP zu Cursor hinzu?
Öffne ~/.cursor/mcp.json und füge den Server unter mcpServers hinzu, mit der Cursor-Config aus dem Installationsabschnitt oben.
Welche Tools bietet sysketch MCP?
Er stellt 2 Tools bereit, darunter render_diagram, list_icons.
Kann ich offizielle Logos in meinen Diagrammen verwenden?
Ja, sofern die offiziellen Logos installiert sind, werden Produktnamen wie s3 oder stripe mit dem tatsächlichen Logo angezeigt.
Verbraucht dieser Server viele Tokens?
Nein, er ist hocheffizient und verbraucht etwa 18-mal weniger Tokens, als wenn ein Assistant direkt rohes SVG zeichnen würde.