Sketchitor Reference Manual

Quick Start

Each line of a .sketch file is either a directive, a command, or a comment. Commands describe shapes and connections; directives configure global rendering.

# Lines starting with # are comments.

# Global settings
@seed 42
@roughness 1.2

# A simple flowchart
rectangle id=start x=0 y=-150 width=160 height=60 fillColor="#d5f4e6" strokeColor="#27ae60" label="Start"
diamond   id=check x=0 y=0    width=160 height=100 fillColor="#fef9e7" strokeColor="#f39c12" label="OK?"
rectangle id=done  x=0 y=150  width=160 height=60  fillColor="#fdedec" strokeColor="#e74c3c" label="Done"

arrow from=start.bottom to=check.top
arrow from=check.bottom to=done.top

Every shape is positioned by its centre using x= and y=. The canvas origin (0, 0) is the centre of the SVG viewport.

Directives

Directives start with @ and set global rendering options for the entire diagram.

@seed 123
@roughness 1.5
@bowing 0.8
@background "#f8f9fa"

Canvas Command

Alternatively use the canvas command inline to set the viewport:

canvas width=1200 height=800 background="#ffffff"

Coordinate System

The canvas origin (0, 0) is at the centre of the SVG. Positive x goes right, positive y goes down.

#  (-400,-300)  ──────────  (400,-300)
#       │           ↑              │
#       │           │ y-           │
#       │       ←── 0 ──→          │
#       │           │ y+           │
#  (-400,300)  ──────────  (400,300)

Use the origin= parameter to change the reference point for x= and y=:

Basic Shapes

rectangle  (alias: rect)

rectangle id=box x=0 y=0 width=200 height=120 corner=8
          fillColor="#e3f2fd" strokeColor="#2196f3" label="My Box"

circle

circle id=c1 x=0 y=0 radius=50 fillColor="#fff3e0" strokeColor="#ff9800"

ellipse

ellipse x=0 y=0 width=180 height=90 fillColor="#f3e5f5" strokeColor="#9c27b0"

Advanced Shapes

All advanced shapes accept the same common parameters (x, y, width, height, id, style, label…) unless noted.

diamond

A rotated square with vertices at the four cardinal edges. Commonly used for decision nodes in flowcharts.

diamond id=d1 x=0 y=0 width=140 height=100 fillColor="#fef9e7" strokeColor="#f39c12" label="Decision?"

hexagon

A regular six-sided polygon. The width and height control the bounding box.

hexagon x=0 y=0 width=120 height=100 fillColor="#e8f5e9" strokeColor="#4caf50"

parallelogram

parallelogram x=0 y=0 width=150 height=70 slant=0.2 fillColor="#e3f2fd" strokeColor="#2196f3"

triangle

Isoceles triangle pointing upward. Tip at top-centre, base at bottom.

triangle x=0 y=0 width=120 height=100 fillColor="#fff8e1" strokeColor="#ffc107"

cylinder

A 3D-style cylinder with elliptical caps. Used for databases and storage.

cylinder id=db x=0 y=0 width=100 height=140 fillColor="#e8eaf6" strokeColor="#5c6bc0" label="Database"

cloud

A bumpy cloud silhouette. Useful for external services, internet, or abstract groups.

cloud x=0 y=0 width=180 height=100 fillColor="#e3f2fd" strokeColor="#2196f3" label="Internet"

page

A rectangle with a folded top-right corner. Represents documents or files.

page x=0 y=0 width=110 height=85 foldSize=0.15 fillColor="#e8f6f3" strokeColor="#27ae60" label="Report.pdf"

document

A rectangle with a wavy bottom edge, used for documents or reports.

document x=0 y=0 width=140 height=90 fillColor="#fff9c4" strokeColor="#f9a825" label="Contract"

step

A hexagonal chevron/step shape, useful for pipeline or process steps.

step x=0 y=0 width=140 height=75 arrowDepth=0.1 fillColor="#fef5e7" strokeColor="#d35400" label="Build"

callout

A speech-bubble with a triangular tail pointing from one edge.

callout x=0 y=0 width=130 height=80 tailDirection="bottom" tailLength=0.25
        fillColor="#d6eaf8" strokeColor="#2874a6" label="Note!"

package

A UML package symbol: rectangle with a small tab on the top-left edge.

package x=0 y=0 width=130 height=85 tabWidth=0.35 fillColor="#f4ecf7" strokeColor="#7d3c98" label="com.example"

person

A simple stick-figure actor icon (circle head + rectangle body).

person x=0 y=0 width=80 height=120 fillColor="#e3f2fd" strokeColor="#2196f3" label="User"

queue

A horizontal cylinder seen from the side. Used to represent queues, buffers or message brokers in system diagrams.

queue x=0 y=0 width=140 height=70 fillColor="#e0f2f1" strokeColor="#00897b" label="Queue"

stored-data  (alias: storeddata)

A rounded tape/storage symbol.

stored-data x=0 y=0 width=130 height=70 fillColor="#e8f5e9" strokeColor="#388e3c" label="Archive"

Connections

arrow  / line  / connect

arrow renders with an arrowhead at the endpoint. line renders with no arrowhead (unless shapeEnd=arrow). connect is an alias for line.

Using anchor references (preferred):

arrow from=box1.right to=box2.left strokeColor="#666" strokeWidth=2

Using absolute coordinates:

line x1=-200 y1=0 x2=200 y2=0 strokeColor="#333" strokeDash="5,5"

Path Shapes

polygon

A closed polygon defined by a list of x,y points.

polygon x=0 y=0 points="0,-50 50,30 -50,30" fillColor="#e3f2fd" strokeColor="#2196f3"

linearpath

An open polyline through a list of points. Not filled.

linearpath points="0,0 50,50 100,0 150,50" strokeColor="#e74c3c" strokeWidth=2

curve

A smooth Catmull-Rom spline through the given points.

curve points="0,0 25,50 50,0 75,50 100,0" strokeColor="#9c27b0" strokeWidth=3

arc

arc x=0 y=0 width=100 height=100 start=0 stop=3.14 closed=false strokeColor="#ff5722"

path

A raw SVG path data string:

path x=0 y=0 d="M -50,0 Q 0,-80 50,0 T 150,0" strokeColor="#3f51b5"

Text Shape

The text shape is a transparent-border bounding box — no stroke, no fill background — designed for floating rich-text content areas. It accepts full markdown in its label= and exposes the same anchor points and id= references as any other box shape, so arrows and connections can reference it.

text x=0 y=0 width=400 height=200 label="""# My Title
**Bold**, *italic*, and ~~strikethrough~~.
- Item one
- Item two
[Link text](https://example.com)""" size=14

Because text is a proper box shape, arrows can connect to it:

text id=note x=200 y=0 width=300 height=150 label="""## Note
Some **important** information here.""" size=14
rectangle id=box x=-100 y=0 width=120 height=60 label="Box"
arrow from=box to=note

See Markdown Labels for all supported markdown syntax.

Markdown Labels

Every label= on every shape is parsed as CommonMark markdown (with the strikethrough extension). Plain text with no markdown syntax renders exactly as before.

Inline formatting

Block elements

Multi-line label syntax

Use triple-quoted strings to write multi-line markdown. The opening """ must be on the same line as the parameter name.

rectangle x=0 y=0 width=300 height=180 fillColor="#f0f4ff" label="""## Summary
**Bold** and *italic* work everywhere.
- Point one
- Point two

Visit [example.com](https://example.com)""" size=14

Notes

• The entire rendered block is vertically centred around the label's anchor point (shape centre for box shapes, midpoint for lines).
• Text wraps at wrapWidth= (default: 88% of box width). Styled spans are treated as atomic tokens; breaks occur at word boundaries between spans.
• The font= parameter sets the base font. Inline `code` and fenced code always use the monospace family regardless of font=.
• Link colours use a fixed blue (#3b82f6) regardless of the active theme.
• Block images require a publicly accessible URL or a data: URI.

Anchor Points

Anchor points identify named positions on a shape for use in from=, to=, and arithmetic expressions.

arrow from=box1.right to=box2.left
arrow from=box1.bottomright to=box2.topleft
x=(a.right.x + b.left.x) / 2   # x coordinate of midpoint

The .x / .y axis extraction form returns a scalar:

rectangle x=ref.right.x+20 y=ref.center.y width=100 height=50

Arithmetic Expressions

Numeric parameters accept arithmetic expressions. Parentheses set precedence. Operators: + - * / %

rectangle x=(a.right.x + b.left.x) / 2 y=a.center.y width=80 height=60

# Align below another shape
circle x=ref.center.x y=ref.bottom.y+60 radius=30

# Unary minus
ellipse x=-200 y=-ref.bottom.y width=100 height=50

Fill Styles

Controlled by fillStyle=. Requires fillColor= to take effect.

rectangle x=-200 y=0 width=120 height=80 fillColor="#e3f2fd" fillStyle=hachure hachureAngle=45 hachureGap=8
rectangle x=0    y=0 width=120 height=80 fillColor="#fce4ec" fillStyle=cross-hatch fillWeight=1.5
rectangle x=200  y=0 width=120 height=80 fillColor="#e8f5e9" fillStyle=dots

Stroke Styles

rectangle x=-150 y=0 width=120 height=60 strokeStyle=dashed   strokeColor="#2196f3"
rectangle x=0    y=0 width=120 height=60 strokeStyle=dotted   strokeColor="#e91e63"
rectangle x=150  y=0 width=120 height=60 strokeDash="10,4,2,4" strokeColor="#4caf50"

Common Parameters

Available on all shapes unless otherwise noted.