Getting Started with Privacy Sketch

Learn how to create beautiful hand-drawn diagrams in just 5 minutes. This guide covers both the visual editor and the JSON code panel for programmatic diagram creation.

100% Private

Privacy Sketch runs entirely in your browser. No data is ever sent to any server. Your diagrams stay on your device.

Introduction

Privacy Sketch is a free, privacy-focused diagramming tool that creates beautiful hand-drawn style diagrams. Unlike other tools, everything runs locally in your browser - no accounts, no uploads, no tracking.

You can create diagrams in two ways:

Using the Visual Editor

The visual editor is the fastest way to create diagrams. Here's how to get started:

1

Open Privacy Sketch

Navigate to Privacy Sketch in your web browser. The canvas is ready immediately - no loading or login required.

2

Select a Tool

Use the left toolbar to select a drawing tool. The most common tools are:

  • Select (V) - Move and resize existing elements
  • Rectangle (R) - Draw rectangles and squares
  • Ellipse (O) - Draw circles and ovals
  • Text (T) - Add text labels
  • Arrow (A) - Draw connecting arrows
3

Draw on the Canvas

Click and drag on the canvas to create your shape. Hold Shift while drawing to create perfect squares or circles.

Pro Tip: Shape Library

Click the "Library" panel on the left to access 40+ pre-built shapes including flowchart symbols, speech bubbles, banners, and more.

Drawing Shapes

Privacy Sketch includes over 40 shape types. Here are the most commonly used:

Shape Keyboard Use Case
Rectangle R Process steps, containers, cards
Ellipse O Start/end nodes, icons
Diamond D Decision points in flowcharts
Text T Labels, headings, descriptions
Arrow A Connections, flow direction
Line L Separators, connections

For a complete list of all shapes, see the Shape Reference.

Styling Elements

After selecting an element, use the right sidebar to customize its appearance:

Colors

Choose from predefined colors or enter custom hex values:

Stroke Options

Sketch Effects

For detailed styling options, see the Styling Guide.

Using the Code Panel (JSON)

For developers or when generating diagrams with LLMs, you can write JSON directly:

1

Open the Code Panel

Click the Code button in the header toolbar (or press C).

2

Write or Paste JSON

Enter your diagram definition as JSON: 

{
  "elements": [
    {
      "type": "rectangle",
      "id": "box-1",
      "x": 100,
      "y": 100,
      "w": 150,
      "h": 80,
      "options": {
        "fill": "#dbeafe",
        "stroke": "#3b82f6",
        "strokeWidth": 2,
        "roughness": 1.5
      }
    }
  ]
}
3

Apply to Canvas

Click the Apply button (or press Ctrl+Enter) to render your diagram.

LLM-Friendly Format

The JSON format is designed for AI-generated diagrams. Ask an LLM to generate Privacy Sketch JSON and paste it directly into the code panel.

For complete JSON documentation, see the JSON Schema Reference.

Exporting Your Diagram

Once your diagram is complete, export it for use elsewhere:

Export as PNG

Click the Export PNG button and choose your resolution:

Export as SVG

Click the SVG button to export as a scalable vector graphic. SVGs can be scaled to any size without losing quality.

Save as JSON

Click the Save button to download your diagram as a JSON file. You can reload this file later to continue editing.

Keyboard Shortcuts

Speed up your workflow with these keyboard shortcuts:

Shortcut Action
V Select tool
R Rectangle tool
O Ellipse tool
T Text tool
A Arrow tool
L Line tool
D Diamond tool
C Open Code Panel
? Show all shortcuts
Ctrl+Z Undo
Ctrl+Y Redo
Ctrl+D Duplicate selected
Delete Delete selected
Ctrl+Scroll Zoom in/out
Shift+Drag Pan canvas

Next Steps

Now that you know the basics, explore these resources to create more complex diagrams:

Start Creating