Excalidraw examples

Excalidraw scenes are drawn rather than written, so these pages describe what each example contains and how to build it, step by step.

The technique matters more than the file: each one explains why the sketch is drawn at that fidelity, and what feedback that fidelity gets you.

Excalidraw is a canvas. There is no text source to copy, so these are build recipes rather than pasteable files. Every step takes seconds once you know the tool.

#In this set

Wireframe (Excalidraw)A hand drawn UI wireframe on a Confluence page, editable in place.Mobile wireframe (Excalidraw)A mobile app screen mockup sketched in Excalidraw.Mindmap (Excalidraw)A freeform hand drawn mindmap built on the Excalidraw canvas rather than from text.Flowchart with images (Excalidraw)A flowchart combining hand drawn shapes with embedded images.Profiling diagram (Excalidraw)A performance profiling sketch kept alongside the analysis on a Confluence page.

Reference

The notation behind these.

Diagram types

Grouped by what you want to draw.

Examples

Every other set.

Rough on purpose, and quicker for it.