personal design document creator
overview
i built this because i needed something quick and easy for design docs without the time or cost of heavier tools. it is a lightweight wireframe board for early design docs with boxes, arrows, and notes on a pannable canvas. the workflow is closer to tools like eraser: select and drag, click to insert, double-click to rename, export to pdf.
how to use it
- select: drag boxes to move, use handles to resize. double-click a square to edit its label.
- container / square: pick one, then click the canvas to place it. click inside a container to nest.
- arrow: click a square and drag to another square. snaps to side midpoints only.
- pan / zoom: hold space and drag, or scroll normally. ctrl+scroll (or pinch) to zoom.
- export pdf: download the full document from the toolbar.
- shortcuts:
vselect,aarrow,ddoc text,deleteremove selection,esccancel.