Architecture diagrams that keep the discussion open
Flocci Draw sketches software architecture diagrams free in the browser: boxes for services, cylinders for stores, arrows for data flow, all on an infinite canvas. The hand-drawn style signals 'proposal, not decree', and SVG export embeds crisply in design docs and RFCs.
Why engineers sketch architecture by hand
An architecture diagram's job is to trigger the right argument early. Hand-drawn boxes and arrows read as a draft — teammates challenge the queue choice instead of admiring the styling. That is why the sketchy-diagram style became the lingua franca of design docs and RFC culture.
The infinite canvas holds context and detail together: the C4-style zoom-out on the left, the hot path blown up on the right, failure-mode annotations in red wherever they apply. Arrows stay bound to shapes as the design gets rearranged mid-review.
Live review, versioned thinking
Share an edit link during design review and let reviewers draw their objections — a red arrow where the race condition lives says more than a paragraph of comments. Cursors and presence make a remote review feel like standing at the same wall.
Keep one canvas per system or per RFC; cloud autosave means the diagram evolves with the design. Export SVG into the doc when it stabilizes — text stays sharp at every zoom level, unlike pasted screenshots.
How to get started
- Block the systems. Draw services as rectangles, datastores as cylinders, users at the edge.
- Wire the flows. Connect with labelled arrows: sync calls solid, async queues dashed.
- Annotate the risks. Mark failure modes, bottlenecks, and open questions in a signal color.
- Review live, export SVG. Share an edit link for review, then export SVG into the design doc.
Frequently asked questions
Can I make C4 or UML diagrams?
You can sketch C4-style context/container views and informal UML freely; there is no formal stencil enforcement. For strict UML notation with validation, a formal modeling tool fits better — Flocci Draw optimizes for the design-discussion stage.
How do I put diagrams in my design doc?
Export SVG (sharp at any size) or PNG and embed it. Keep the live canvas linked in the doc so readers can visit the current version.
Can my team edit the diagram during review?
Yes — share an edit link and reviewers annotate live with visible cursors. Rotate the link after review to freeze access.