element
label
x
y
w
h
100%
ASCII output — updates live
Tool guide
Select V
Click to select. Drag to move. Double-click to edit label. Delete key removes selected element.
Rectangle R
Drag to draw a box. Double-click to add a label centered inside. Use for panels, cards, modals, sidebars.
Placeholder P
Drag to draw a dashed box. A label prompt appears immediately — type the content type (image, avatar, chart, etc.). Renders as < label > in ASCII.
Arrow A
Draws an L-shaped arrow. Drag horizontally for horizontal-first, vertically for vertical-first. Shows flow direction.
Line L
Plain line with no arrowhead. Hold Shift to snap to horizontal or vertical. Use for dividers and separators.
Text T
Click anywhere to place a text label. Type and press Enter. Use for headings, annotations, or any freestanding text.
💡 Zoom with + / − keys or Ctrl+scroll. ASCII updates live as you draw. "Copy for AI" wraps it in a prompt.
Copied!