Privacy Sketch Documentation

Documentation

Everything you need to create stunning hand-drawn diagrams programmatically or through the visual editor.

Getting Started

Quick introduction to Privacy Sketch. Create your first hand-drawn diagram in under 5 minutes using the visual editor or JSON.

Start Tutorial

Elements & Shapes

Complete reference for all 40+ shape types including rectangles, ellipses, stars, hearts, flowchart symbols, connectors, and more.

View All Shapes

Styling & Colors

Learn about colors, fill styles, stroke options, roughness settings, and how to achieve the perfect hand-drawn aesthetic.

Explore Styling

Layout Patterns

Master positioning, alignment, and common layout patterns for creating timelines, grids, flowcharts, and complex diagrams.

Learn Layouts

Icons & Images

Add AWS, Azure, GCP cloud icons, 6,000+ Tabler icons, and custom images to create professional cloud architecture diagrams.

Browse Icons

Example Gallery

Browse ready-to-use examples: timelines, flowcharts, architecture diagrams, infographics, mind maps, and more with full JSON code.

View Examples

JSON Schema Reference

Complete JSON specification for programmatic diagram creation. Perfect for developers and LLMs generating diagrams via code.

View API Docs

LLM Reference Guide

Optimized documentation for AI agents. Includes full schema, icon lists (AWS/Azure/GCP), and multi-shot examples.

View LLM Guide

Quick Start: Your First Diagram

Privacy Sketch diagrams are defined as JSON. Here's a simple example you can copy and paste:

{
  "elements": [
    {
      "type": "rectangle",
      "id": "card-1",
      "x": 100,
      "y": 100,
      "w": 200,
      "h": 100,
      "borderRadius": 12,
      "options": {
        "fill": "#fef3c7",
        "stroke": "#f59e0b",
        "strokeWidth": 3,
        "roughness": 1.8
      }
    },
    {
      "type": "text",
      "id": "label-1",
      "x": 100,
      "y": 135,
      "w": 200,
      "h": 30,
      "text": "Hello World!",
      "fontSize": 20,
      "align": "center",
      "options": { "stroke": "#92400e" }
    }
  ]
}

Open Privacy Sketch → Click Code button → Paste this JSON → Click Apply

Why Privacy Sketch?

The only diagramming tool that's truly private, beautiful, and developer-friendly.

🔒

100% Private

Runs entirely in your browser. No servers, no uploads, no tracking. Your diagrams never leave your device.

✏️

Hand-Drawn Style

Beautiful sketchy aesthetics powered by Rough.js. Make technical diagrams look approachable and human.

🎨

40+ Shape Types

Rectangles, ellipses, stars, hearts, flowchart symbols, speech bubbles, banners, and many more shapes.

📦

6,000+ Icons

Built-in Tabler icons plus AWS, Azure, and GCP cloud provider icons for architecture diagrams.

📤

Export Anywhere

Export as PNG (1x, 2x, 3x) or SVG. Perfect for presentations, documentation, and social media.

🤖

LLM-Friendly

JSON-based format makes it easy for AI to generate complex diagrams programmatically.