A Claude Code plugin for collaborative system design. Claude scans your codebase to render what you already have, or designs a new architecture from your description — then you iterate together on a shared canvas until the design is ready for execution.
Back-of-napkin system design, but collaborative. You and Claude share a canvas. Either of you can put things on it. You go back and forth — editing, questioning, refining — until the diagram is ready to turn into real output.
Claude proposes ──► Canvas ──► You edit ──► Complete
▲ │
└──────────── Claude reviews + refines ◄─────────┘
repeat until ready
│
▼
architecture doc · Mermaid · IaC · scaffolding
/sysnapkin
Claude asks one question: scan existing or propose new?
Scan — Claude reads your codebase (package.json, docker-compose.yml, env files, directory structure) and renders what it finds as a system diagram. Good for mapping what you already have.
Propose — Describe the system you want to build. Claude designs an architecture and puts it on the canvas. Good for greenfield design.
Either way, Claude opens the canvas at http://localhost:3344, renders Round 1, and waits. You edit, click Complete, Claude reviews the diff, refines, and pushes Round 2. Repeat until you say "ready" — then Claude generates your chosen output format.
System design only — no wireframe mode.
| Tool | Shortcut | Use for |
|---|---|---|
| Select | V | Move, select, delete objects |
| Arrow | A | Connections between components (prompts for a label) |
| Text | T | Notes and labels |
| Freehand | F | Free annotations; pressure-sensitive with a stylus |
| Component | Shortcut | Represents |
|---|---|---|
| Server | S | Services, backends, microservices |
| Database | D | SQL / NoSQL stores |
| Cloud | O | External services, third-party APIs |
| Client | B | Browsers, mobile apps |
| Queue | Q | Message queues, event buses |
| API Gateway | G | Gateways, proxies, BFF |
| Load Balancer | — | Traffic distribution |
| Cache | — | Redis, CDN, in-memory |
| Container | — | Docker, namespaces, pods |
| User | U | Actors, end users |
| Action | How |
|---|---|
| Undo | Ctrl+Z or Undo button |
| Delete selected | Delete / Backspace |
| Clear all | Clear button |
| Toggle grid snap | Grid button |
| Stroke width / style | Dropdowns in toolbar |
| Connection label | Prompted after drawing an arrow — type or skip |
When Claude pushes a design, it may include annotation notes — questions or comments rendered as italic amber text on a dark teal-accented pill. These are visually distinct from text you add yourself. If you delete an annotation, Claude takes that as a signal you disagreed with it.
The Round N badge in the toolbar and status bar tracks which iteration you're on. It increments automatically after each Complete.
- Claude renders Round 1 → teal banner appears → click Load (replace) or Merge
- Edit the canvas — move components, add/remove connections, relabel, annotate
- Click Complete — the round is saved and Claude is notified
- Claude reads the diff vs. the previous round, incorporates your changes, adds any new questions, and pushes Round N+1
- Repeat until the design settles
- When diff is small and no open questions remain, Claude asks: "Shall I generate output?"
- Say "ready" (or any round) and Claude generates your chosen artifacts
When the design is ready, Claude can generate any combination of:
| Format | File | Description |
|---|---|---|
| Architecture doc | output/architecture.md |
Component table, data flow narrative, open decisions |
| Mermaid diagram | output/diagram.md |
graph LR block, nodes from components, edges from arrows |
| IaC stubs | output/infra/ |
Terraform or Pulumi stub per component type |
| Scaffolding | output/scaffold/ |
Folder structure + boilerplate matching the services |
cd sysnapkin
npm install --no-bin-linksGlobal (available in all projects):
node bin/setup.jsThis copies commands/sysnapkin.md to ~/.claude/commands/sysnapkin.md with the correct install path baked in.
Manual / project-level:
mkdir -p /path/to/your/project/.claude/commands
cp commands/sysnapkin.md /path/to/your/project/.claude/commands/sysnapkin.md
# Then edit the file and replace {{SYSNAPKIN_ROOT}} with the absolute path to this directoryRestart Claude Code, then type /sysnapkin — it should appear in the command list.
The server runs on port 3344 by default (set SYSNAPKIN_PORT to change it).
| Method | Endpoint | Who calls it | Description |
|---|---|---|---|
POST |
/api/complete |
Canvas | Submit a completed round — saves PNG, metadata, appends to history |
POST |
/api/render |
Claude | Push an objects array to display on the canvas |
GET |
/api/pending |
Canvas | Poll for Claude's latest pushed design |
DELETE |
/api/pending |
Canvas | Clear pending design after loading |
GET |
/api/history |
Claude | Read all round records for diff computation |
DELETE |
/api/history |
Claude | Reset session — clears history and latest signal |
| File | Description |
|---|---|
output/round-N-<ts>.png |
Canvas snapshot for round N |
output/round-N-<ts>.json |
Object metadata for round N |
output/latest.json |
Signal file — Claude polls this to detect new submissions |
output/history.json |
All round records (capped at 20) — used for diff computation |
output/pending-load.json |
Claude's current pending design — canvas polls this |
output/architecture.md |
Generated architecture doc (if requested) |
output/diagram.md |
Generated Mermaid diagram (if requested) |
output/infra/ |
Generated IaC stubs (if requested) |
output/scaffold/ |
Generated scaffolding (if requested) |
| Variable | Default | Description |
|---|---|---|
SYSNAPKIN_PORT |
3344 |
Port for the canvas server |
Sysnapkin runs on 3344 so it can coexist with the sketchpad plugin on 3333.
| sketchpad | sysnapkin | |
|---|---|---|
| Modes | UI wireframe + system design | System design only |
| Entry | User draws first | Claude renders first (scan or propose) |
| Iteration | Single round | Multi-round with history and diff |
| Annotations | None | Claude adds teal annotation pills with questions |
| Output | Production UI code | Architecture doc, Mermaid, IaC, scaffolding |
| Port | 3333 | 3344 |
| Command | /sketch |
/sysnapkin |