Napkin

Examples

A few things you can build with Napkin.

System Architecture 3-tier web app with cloud gateway, services, and data stores

User Flow Onboarding flowchart with decision diamonds and annotations

Sprint Board Kanban board with color-coded sticky notes across 4 columns

Features

• Instant and private — opens immediately, works offline, nothing leaves your computer
• Hand-drawn feel — rough.js rendering gives diagrams a natural, sketchy look
• Desktop native — built with Tauri, runs as a real app, not a browser tab
• Simple file format — .napkin files are JSON, easy to version control or script
• AI-ready — built-in MCP server lets AI agents create and edit diagrams

Drawing

• 13 shape types: rectangles, ellipses, triangles, diamonds, hexagons, stars, clouds, cylinders, sticky notes, lines, arrows, freehand, and text
• Lines and arrows with direct, elbow, or curved routing
• 7 endpoint styles (arrow, open-arrow, triangle, circle, diamond, square, none)
• Configurable fill styles: hachure, solid, zigzag, cross-hatch, dots
• Paste images from clipboard directly onto the canvas
• Resize, rotate, snap, align, and style everything
• Smart guides: alignment lines and equal-spacing indicators when dragging shapes
• Snap to grid, object snap, and alignment hints (independently toggleable)
• Auto-layout: grid and force-directed arrangement via context menu or MCP
• Adjustable roughness (0 = clean, 3 = very sketchy)

Workflow

• Multiple tabs with collection save/restore
• Undo/redo (single undo for drag, resize, and rotate gestures), copy/paste, duplicate
• Export to PNG or SVG
• Presentation mode with fullscreen and pan navigation
• Auto-save with recovery
• Native file dialogs on desktop

Getting Started

Download the latest build for your platform from the GitHub Releases page:

• macOS — .dmg (Apple Silicon and Intel)
• Windows — .msi or .exe
• Linux — .deb or .AppImage

Want to build from source or contribute? See the Contributing Guide.

Shapes

All shapes support: stroke color, fill color, fill style, opacity, rotation, roughness (0–3), and text content.

Connections

Lines and arrows can bind to shapes at 5 connection points: top, right, bottom, left, center. Bound connections follow their shapes when moved, resized, or rotated.

Routing modes

• Direct — straight line between endpoints
• Elbow — orthogonal segments (right angles)
• Curved — quadratic bezier via control points

Keyboard Shortcuts

Tools

Actions

MCP Server

Napkin includes a built-in Model Context Protocol (MCP) server that lets AI agents — like Claude — create and manipulate diagrams programmatically. The server runs locally and bridges tool calls from an AI client through to the Napkin canvas.

Architecture

The MCP server uses a bridge pattern:

1. AI client sends JSON-RPC request to http://127.0.0.1:21420/mcp
2. Rust (Axum) HTTP server receives the request
3. Request is forwarded to the Svelte frontend via Tauri event
4. Frontend executes the tool and returns results
5. Response flows back to the AI client

MCP Setup

1. Enable the server

In Napkin, click the Settings gear icon in the header bar, then toggle Enable MCP Server. The server listens on port 21420. The setting persists across sessions.

2. Configure your AI client

For Claude Code, add to your .claude.json or project MCP settings:

{
  "mcpServers": {
    "napkin": {
      "type": "url",
      "url": "http://127.0.0.1:21420/mcp"
    }
  }
}

3. Use it

Ask Claude to "draw a diagram in Napkin" or "create a flowchart". The AI agent will use the MCP tools to create shapes, connect them, and arrange the canvas.

MCP Tool Reference

All tools are called via JSON-RPC tools/call method. 22 tools are available:

File Format

Napkin saves files as .napkin — plain JSON that is easy to version control, diff, and script against.

A collection file contains multiple tabs:

{
  "napkin": "1.0",
  "documents": [
    {
      "title": "Tab 1",
      "shapes": [...],
      "viewport": { "x": 0, "y": 0, "zoom": 1 },
      "metadata": { ... }
    }
  ],
  "activeDocumentIndex": 0
}

License

MIT