Example Gallery

Ready-to-use diagram templates. Copy the JSON, paste into Privacy Sketch, and customize to your needs.

E-Commerce Checkout Flow
Flowchart

E-Commerce Checkout Flow

Multi-payment gateway checkout with Stripe, PayPal, Apple Pay, 3D Secure verification, inventory checks, and retry logic.

Tutorial
History of AI Timeline
Timeline

History of AI Timeline

Epic 100+ element poster: 1950 Turing Test → 2024 AI Agents, with stars, banners, speech bubbles, and key stats.

Tutorial
Netlify Multi-Cloud Architecture
Architecture

Netlify Multi-Cloud Platform

Production-grade multi-cloud architecture with AWS, Azure & GCP: CDN layer, serverless compute, databases, storage, and cross-cloud replication.

Tutorial
Remote Work Infographic
Infographic

Remote Work Revolution 2024

Dark-mode poster with bar charts, stats bubbles (35% remote, 87% want flexibility), top tools, global hubs, and CEO quote.

Tutorial
CI/CD Pipeline Architecture
Flowchart

CI/CD Pipeline Architecture

GitHub Actions → Lint → Test → Build → Docker → Staging → Multi-cloud deploy (AWS/GCP) with monitoring and auto-rollback.

Tutorial
Enterprise Org Chart
Architecture

Enterprise IT Department

70-person IT org: CIO → 4 VPs → 10 teams (Frontend, Backend, Cloud, DevOps, AI/ML, Security) with budget and locations.

Tutorial

How to Use These Examples

  1. Copy the JSON - Click "Copy JSON" on any example above
  2. Open Privacy Sketch - Go to Privacy Sketch
  3. Open Code Panel - Click the "Code" button in the header (or press C)
  4. Paste & Apply - Paste the JSON and click "Apply"
  5. Customize - Edit text, colors, and positions as needed

Quick Start: Simple Card

Here's the simplest example to get started:

{
  "elements": [
    {
      "type": "rectangle",
      "id": "card",
      "x": 100, "y": 100, "w": 200, "h": 100,
      "borderRadius": 12,
      "options": {
        "fill": "#dbeafe",
        "stroke": "#3b82f6",
        "strokeWidth": 3,
        "roughness": 1.5
      }
    },
    {
      "type": "text",
      "id": "label",
      "x": 100, "y": 140, "w": 200, "h": 30,
      "text": "Hello World!",
      "fontSize": 18,
      "align": "center",
      "fontWeight": "bold",
      "options": { "stroke": "#1e40af" }
    }
  ]
}