Sketchitor

Loading editor...

Initializing environment
Loading Monaco Editor
Configuring language support
Setting up UI components
Sketchitor
| -

Preview updates automatically as you type

100%

Reference

Sketchitor Language

Basic Shapes

rectangle
id, x, y, width, height, fill, stroke, corner
circle
id, x, y, radius, fill, stroke
ellipse
id, x, y, width, height, fill, stroke
text
x, y, value, font, fontSize
line
x1, y1, x2, y2 OR from, to, shapeStart, shapeEnd, shapeSize
linearpath
points="x1,y1 x2,y2", stroke, strokeWidth
polygon
vertices="x1,y1 x2,y2", fill, stroke
arc
x, y, width, height, start, stop, closed
curve
points="x1,y1 x2,y2", stroke, strokeWidth
path
d="SVG path", stroke, fill, strokeWidth

Advanced Shapes

page
Document with folded corner: x, y, width, height, foldSize
parallelogram
Slanted rectangle (I/O): x, y, width, height, slant
document
Wavy bottom doc: x, y, width, height
cylinder
Database/storage: x, y, width, height
queue
Message queue: x, y, width, height
package
Module/component: x, y, width, height, tabWidth
step
Process step: x, y, width, height, arrowDepth
callout
Speech bubble: x, y, width, height, tailDirection, tailLength
stored_data
Tape storage: x, y, width, height
person
User/actor: x, y, width, height (use fill="none")
diamond
Decision point: x, y, width, height
hexagon
Six-sided: x, y, width, height, orientation="horizontal|vertical"
cloud
Cloud services: x, y, width, height

Lines & Arrows

line
Position (use one):
• from=shape.anchor to=shape.anchor (preferred)
• x1=# y1=# x2=# y2=#
End Shapes (optional):
shapeStart: none, arrow, circle, square, diamond
shapeEnd: none, arrow, circle, square, diamond
shapeSize: size of end shapes (default: 10)
Labels:
label="text", labelPosition: center, start, end
labelFont, labelFontSize
Examples:
line from=a.right to=b.left stroke="#666"
line from=a.right to=b.left shapeEnd=arrow
line x1=50 y1=50 x2=200 y2=50 shapeEnd=circle
line from=a.top to=b.bottom shapeStart=circle shapeEnd=arrow label="Flow"
arrow
LEGACY Use line with shapeEnd=arrow instead

Anchor Points

Use for lines and positioning:

center top bottom left right
topleft topright bottomleft bottomright
💡 Coordinate Extraction
x=box.right.x y=box.top.y - Extract x or y
x=box.center.x+20 - Arithmetic expressions
y=box.bottom.y-15 - Subtract from anchor
⚠️ Note on Anchor Names
Use names without dashes: topleft not top-left

Style Options

Colors
fill="#e3f2fd" - Fill color (hex)
stroke="#2196f3" - Stroke color (hex)
fill="theme:fill.primary" - Theme color (light/dark aware)
stroke="theme:accent.blue" - Theme accent
⚠️ Important
Color values must be enclosed in double quotes!
💡 Theme Colors
Use @theme directive and theme: prefix for automatic light/dark mode support. See Themes section below.
Fill Styles
hachure solid zigzag cross-hatch dots dashed zigzag-line
Hachure Options
hachureAngle - Angle in degrees
hachureGap - Gap between lines (px)
fillWeight - Line width
Roughness
roughness=0.5 - Smooth
roughness=1 - Default
roughness=3 - Very rough
💡 Tip: Use @seed 42 directive for consistent sketchy patterns across renders
Stroke Styles
strokeWidth - Line thickness (pixels)
strokeStyle - solid | dashed | dotted
strokeDash="5,5" - Custom dash pattern (overrides strokeStyle)
strokeDash Examples:
strokeDash="5,5" - 5px dash, 5px gap
strokeDash="10,5" - 10px dash, 5px gap
strokeDash="10,5,2,5" - Dash-dot pattern
strokeDash="15,3,3,3" - Complex pattern
Text & Labels
font - hand-drawn | normal | monospace
fontSize - Font size in pixels
label - Text label for shapes
labelFont - Font for labels
labelFontSize - Font size for labels
wrapWidth - Max width for text wrapping (text primitive)
Positioning
origin - center | topleft | topright | bottomleft | bottomright | top | bottom | left | right
corner - Radius for rounded rectangle corners (default: 0)
Origin Point

The origin attribute determines which point of the shape the x/y coordinates refer to:

origin=topleft - x/y is top-left corner
origin=center - x/y is center (default)
origin=bottomright - x/y is bottom-right corner
⚠️ Use no dashes: topleft not top-left
Rounded Corners

Use the corner attribute on rectangles for rounded corners:

corner=0 - Sharp corners (default)
corner=10 - Slightly rounded
corner=20 - More rounded
Multi-Instance Rendering

Draw shapes three times with slight offsets to show multiple instances:

multi=false - Single instance (default)
multi=true - Three instances with stack effect
✨ Use Cases:
• Replicated databases or servers
• Multiple copies of documents
• Clusters or pools of resources
• Scaling or redundancy in diagrams
Examples:
cylinder x=0 y=0 width=80 height=120 multi=true label="DB Replicas"
rectangle x=100 y=0 width=100 height=80 multi=true label="Servers"
cloud x=200 y=0 width=120 height=80 multi=true label="Services"

Preprocessor Features

Grid
@grid on - Enable coordinate grid
@grid off - Disable grid (default)
Grid displays with coordinate labels every 2nd line for easy positioning
Randomization Seed
@seed 42 - Set random seed for deterministic rendering
💡 The editor automatically uses a session seed for consistent patterns. Use @seed to override with a specific value.
Drop Shadows
@shadow on - Enable drop shadows for all elements
@shadow off - Disable drop shadows (default)
Adds depth and visual hierarchy by applying shadows to all shapes and connectors
Themes
@theme neutral-default - Set color theme with light/dark mode support
Available Themes:
neutral-default dark-mauve cool-classic mixed-berry grape-soda forest oceanic sunset monochrome
Theme Colors:
Fill: theme:fill.primary theme:fill.secondary theme:fill.tertiary
Stroke: theme:stroke theme:stroke.bold
Accent: theme:accent.blue theme:accent.green theme:accent.red theme:accent.yellow theme:accent.purple
Text: theme:text.primary theme:text.secondary theme:text.tertiary
Background: theme:bg
Example:
@theme forest
rectangle fill="theme:fill.primary" stroke="theme:stroke"
circle fill="theme:accent.green" stroke="theme:stroke.bold"
✨ Generated SVGs automatically switch between light/dark mode based on viewer's system preference!
Variables
$variable = value - Define variable
$x = 100 - Numeric value
$color = "#ff0000" - String value
$spacing = $x + 20 - Arithmetic expressions
Example:
$size = 100
$fill = "#e3f2fd"
rectangle x=0 y=0 width=$size height=$size fill=$fill
String Interpolation
${"{expression}"} - Embed expressions in text and parameters
value="Step ${"{i}"}" - In text labels
x=${"{i*spacing}"} - In coordinates with arithmetic
value="Total: ${"{width*height}"}" - Complex expressions
Example:
$count = 5
$spacing = 120
text x=0 y=0 value="Item ${"{count}"}" fontSize=14
rectangle x=${"{count*spacing}"} y=${"{spacing/2}"} width=100 height=60
Operators: + - * /
For Loops
for $var in start..stop: - Loop syntax
... loop body ...
end - Close loop
Example:
for $i in 1..5:
circle x=$i*50 y=0 radius=20
end
⚠️ Reserved Keywords
Cannot use for, in, end, while, if, elif, else, endif, or break as shape IDs
Conditionals (if/elif/else)
if condition: - Start conditional
elif condition: - Else-if branch (optional)
else: - Else branch (optional)
endif - Close conditional
Operators:
Comparison: == != < > <= >=
Logical: && (and) || (or) ! (not)
Arithmetic: + - * / % (modulo)
Example:
$count = 7
if $count > 10:
text x=0 y=0 label="Many"
elif $count > 5:
text x=0 y=0 label="Some"
else:
text x=0 y=0 label="Few"
endif
While Loops
while condition: - Loop while condition is true
... loop body ...
end - Close loop
Example:
$i = 0
while $i < 5:
circle x=${"{i*50}"} y=0 radius=10
$i = ${"{i + 1}"}
end
⚠️ Infinite Loop Protection
Maximum 1000 iterations (configurable with @maxIterations)
Break Statement
break - Exit current loop immediately
Works in both for and while loops
Example:
for $i in 1..10:
if $i > 5:
break
endif
circle x=${"{i*50}"} y=0 radius=10
end
Creates only 5 circles

Markdown Text

markdown
Render markdown text: x, y, content, fontSize, width, height
Supported Markdown:
**bold** - Bold text
*italic* - Italic text
`code` - Inline code
# Heading - Headings (H1-H6)
- item - Bullet lists
1. item - Numbered lists
Example:
markdown x=0 y=0 width=300 content="""
# Title
**Bold** and *italic*
- List item
"""

Example

# Enable grid for positioning
@grid on
@shadow on  # Enable drop shadows
# @seed 123  # Optional: override editor's auto-generated seed

# Define variables
$size = 100
$spacing = 150
$count = 3

# Create boxes with for loop
for $i in 1..$count:
  rectangle id=box$i x=${i*$spacing} y=0 width=$size height=80 fill="#e3f2fd" stroke="#2196f3"
  text x=box$i.center.x y=box$i.center.y label="Box ${i}" fontSize=14
end

# Conditional rendering based on count
if $count > 2:
  text x=${($count+1)*$spacing/2} y=-50 label="Multiple items" fontSize=12 fill="#4caf50"
else:
  text x=${($count+1)*$spacing/2} y=-50 label="Few items" fontSize=12 fill="#ff9800"
endif

# While loop example
$i = 1
while $i <= $count:
  circle x=box$i.center.x y=120 radius=8 fill="#f44336"
  $i = ${i + 1}
end

# Connect boxes with arrows
for $k in 1..${$count-1}:
  line from=box$k.right to=box${$k+1}.left shapeEnd=arrow label="Flow" labelPosition=center
end

Shortcuts & Tips

Preview updates automatically as you type (1s delay)
Force regenerate Ctrl+Enter
Auto-complete Ctrl+Space
Comment Ctrl+/
Move line Alt+↑/↓