Shape Reference

Privacy Sketch includes over 40 shape types for creating diagrams, flowcharts, infographics, and illustrations. Each shape supports the hand-drawn sketch aesthetic.

Basic Shapes

The fundamental building blocks for most diagrams. These shapes are used for containers, cards, nodes, and general-purpose elements.

▢
Rectangle
rectangle
○
Ellipse
ellipse
◇
Diamond
diamond
△
Triangle
triangle

Rectangle Properties

Property Type Default Description
x number 0 X position (left edge)
y number 0 Y position (top edge)
w number 100 Width in pixels
h number 100 Height in pixels
borderRadius number 0 Corner rounding (0-50) 
{
  "type": "rectangle",
  "id": "card-1",
  "x": 100,
  "y": 100,
  "w": 200,
  "h": 120,
  "borderRadius": 12,
  "options": {
    "fill": "#dbeafe",
    "stroke": "#3b82f6",
    "strokeWidth": 2,
    "roughness": 1.5
  }
}

Geometric Shapes

Decorative and special-purpose geometric shapes for icons, badges, and visual accents.

★
Star
star
♥
Heart
heart
⬡
Hexagon
hexagon
⬠
Pentagon
pentagon
☁
Cloud
cloud
⬢
Cylinder
cylinder
🎀
Banner
banner

Star Properties

Property Type Default Description
points number 5 Number of points (3-12)
innerRadius number 0.4 Inner radius ratio (0.1-0.9)

Flowchart Symbols

Standard flowchart notation symbols for process diagrams, decision trees, and workflow visualizations.

⬭
Process
rectangle
◇
Decision
diamond
⬭
Terminal
ellipse
▱
Data
parallelogram
⬢
Database
cylinder
📄
Document
document

Annotations & Bubbles

Speech bubbles, callouts, and annotation shapes for adding commentary and labels.

💬
Speech Bubble
speechBubble
💭
Thought Bubble
thoughtBubble
📝
Callout
callout
📌
Note
stickyNote

Lines & Connectors

Connect shapes with lines, arrows, and curved connectors. 📖 See full Connectors documentation →

━
Line
line
→
Arrow
arrow
↝
Curved Arrow
curvedArrow
↔
Bidirectional
bidirectionalArrow

Line/Arrow Properties

Property Type Description
x number Start X position
y number Start Y position
w number Horizontal distance (can be negative)
h number Vertical distance (can be negative)

Creating Diagonal Lines

Set both w and h to draw diagonal lines. For a horizontal line, set h: 1. For vertical, set w: 1. 

// Horizontal arrow from (100,100) to (300,100)
{
  "type": "arrow",
  "x": 100,
  "y": 100,
  "w": 200,
  "h": 1,
  "options": {
    "stroke": "#374151",
    "strokeWidth": 2
  }
}

Special Shapes

A
Text
text
🧑
Actor
actor
🖼
Image
image
🔷
Icon
tablerIcon
🔲
Frame
frame

Text Properties

Property Type Default Description
text string "" Text content (use \n for newlines)
fontSize number 20 Font size in pixels
fontWeight string "normal" "normal" or "bold"
fontStyle string "normal" "normal" or "italic"
align string "left" "left", "center", or "right"

Common Properties (All Shapes)

These properties are available on all shape types:

Property Type Description
type string Required. The shape type name
id string Required. Unique identifier
x number X position
y number Y position
w number Width
h number Height
angle number Rotation in degrees
options object Styling options (see below)

Options Object (Styling)

Property Type Default Description
fill string "transparent" Fill color (hex)
stroke string "#000000" Stroke color (hex)
strokeWidth number 2 Stroke thickness (px)
roughness number 1.5 Sketchiness (0-3)
bowing number 1 Line bowing (0-5)
fillStyle string "hachure" solid, hachure, cross-hatch, zigzag, dots
seed number random Random seed for consistent rendering

Complete JSON Examples

Simple Card

{
  "elements": [
    {
      "type": "rectangle",
      "id": "card",
      "x": 50, "y": 50, "w": 200, "h": 100,
      "borderRadius": 12,
      "options": { "fill": "#fef3c7", "stroke": "#f59e0b", "strokeWidth": 3 }
    },
    {
      "type": "text",
      "id": "title",
      "x": 50, "y": 85, "w": 200, "h": 30,
      "text": "Hello World",
      "fontSize": 18,
      "align": "center",
      "options": { "stroke": "#92400e" }
    }
  ]
}

Flowchart Decision

{
  "elements": [
    {
      "type": "diamond",
      "id": "decision",
      "x": 150, "y": 100, "w": 120, "h": 80,
      "options": { "fill": "#fce7f3", "stroke": "#db2777" }
    },
    {
      "type": "text",
      "id": "question",
      "x": 150, "y": 130, "w": 120, "h": 20,
      "text": "Yes?",
      "align": "center",
      "options": { "stroke": "#9d174d" }
    }
  ]
}