Styling Elements
When you pick a drawing tool, or select one or more existing elements, a style panel appears on the left side of the screen. Changes apply immediately — to the element(s) you have selected, or to whatever you draw next if nothing is selected.
Stroke color
The outline color of the shape, line, or text. Pick one of the five presets, or click the small color swatch to open a full custom color picker.
Background color
The fill color used inside closed shapes (rectangle, diamond, ellipse). Choose transparent (the checkerboard swatch) for no fill.
Fill style
Only shown once a background color is set. Three hand-drawn fill patterns:
- Hachure — diagonal sketch lines (the default, matches the hand-drawn look)
- Cross-hatch — crossed diagonal lines, denser
- Solid — a flat fill color
Stroke width
S (thin), M (bold), or L (extra bold) — how thick the outline/line is drawn.
Stroke style
Solid, dashed, or dotted line style.
Sloppiness
Controls how "hand-drawn" the shape looks, from a wobbly pencil sketch to a cleaner technical drawing:
- Architect — straightest, least wobble
- Artist — the default, a natural sketch feel
- Cartoonist — the most exaggerated, wobbly hand-drawn look
Edges
Sharp (square corners) or Round (rounded corners) — applies to rectangles and frames.
Opacity
A slider from 0–100% controlling how see-through the element is.
Arrowheads
Shown when the Arrow tool is active or an arrow is selected. Set the start and end independently — each can be none, arrow, triangle, dot, or bar. This is how you make a plain connector, a one-way arrow, a two-way arrow, or a line with end-caps.
Text options
Shown when the Text tool is active or a text element is selected:
- Font family — Hand-drawn (default, matches the sketch aesthetic), Normal (a clean sans-serif), or Code (monospace).
- Font size — drag the slider.
- Alignment — left, center, or right.
(Screenshot suggestion: the full left style panel with each section visible, and a close-up of the arrowhead selectors on an actual arrow.)