Stack Sketch Documentation

Stack Sketch runs in the browser — nothing to install. Create an account at app.stacksketch.site (free, no card), or try the editor first without an account in the sandbox — it is the full editor, it just doesn't persist anything.

Create a diagram from the dashboard, or start from one of the 26 templates covering web apps, homelab setups, cloud infrastructure and more. Diagrams autosave as you work — there is no save button.

Press ⌘K (or Ctrl+K) to open the icon palette and search 640+ real technology icons — Postgres, Kubernetes, React, Cloudflare and everything in between — then drag them onto the infinite canvas. Drag between node handles to draw edges; labels, colors and routing are editable per edge.

The editor includes smart alignment guides, multi-select and bulk moves, grouping, auto-layout, z-ordering, sticky notes, text nodes and shapes. Right-click anything — canvas, node, edge or selection — for its context menu, and open the keyboard icon in the editor for the full shortcut cheat sheet.

Describe a system in plain English — "a Next.js app on Vercel with Postgres, Redis and a Stripe integration" — and Stack Sketch drafts the full diagram onto the canvas. AI can also append to an existing diagramwithout disturbing what's already there.

Bring your own API key: Google Gemini, OpenAI, Anthropic Claude, or any OpenAI-compatible endpoint (OpenRouter, Together, a local proxy). Configure it in Settings, pick the exact model you want, and generation runs entirely in your browser— prompts and keys never pass through Stack Sketch servers. Keys are encrypted with a non-extractable key held by your browser, so they can't be read out of storage.

The template library covers common architectures — fullstack web apps, homelab racks, Kubernetes clusters and more. Every template is a normal diagram once opened: edit freely.

Missing an icon? Upload your own (SVG, image, or paste) and it joins your My Nodes library, available in the palette across all your diagrams. Organize diagrams into folders from the dashboard.

Publish a read-only share link from the Share menu. The link renders the live diagram — update the canvas and every shared copy is current. Nobody screenshots a stale diagram again.

Diagrams can also be embedded in docs and wikis via an iframe. Append branding=false to the embed URL to hide the watermark.

Export from the Share menu: PNG (all plans), SVG (Pro and Lifetime — crisp at any resolution for docs and slides), and JSON (all plans — the full diagram structure, ready for version control or programmatic use). JSON files can be re-imported into any diagram.

Stack Sketch ships an MCP (Model Context Protocol) server, so AI editors like Claude Code and Cursor can create and edit your diagrams. Create an API key in Settings → API Keys, then add to your MCP client config:

{
  "mcpServers": {
    "stacksketch": {
      "command": "npx",
      "args": ["@stack-sketch/mcp"],
      "env": { "STACKSKETCH_API_KEY": "sk_..." }
    }
  }
}

The server exposes 11 tools: create_diagram, get_diagram, update_diagram, delete_diagram, list_diagrams, add_node, add_edge, share_diagram, create_folder, list_folders and get_quota — enough for an agent to draft an architecture diagram of your repo and hand you the share link.

Free — $0: up to 10 diagrams, all 640+ icons, AI generation, PNG export. Pro — $4.99/month: unlimited diagrams, SVG export, priority support. Lifetime — $49.99 one-time: everything in Pro, forever. See pricing for details.