How to Use Excalidraw: The Beginner's Guide (First Diagram, the Library Lesson, Collaboration Rooms, and the Where-Your-Drawings-Live Rule)
CodexFuse Team · 2026-11-01T06:22:35.633Z · 18 min read
Excalidraw is the free, open-source online whiteboard for hand-drawn-style diagrams — no account needed. This beginner's guide runs one complete arc: your first diagram, the toolbar and shortcuts, shape libraries, real-time collaboration rooms, PNG/SVG export, the self-hosted Docker image, and the where-your-drawings-live rule.
This guide answers how to use Excalidraw — the free, open-source online whiteboard for sketching hand-drawn-style diagrams, wireframes, and brainstorms right in your browser. No account, no install, no setup: open excalidraw.com and you are drawing in seconds. This excalidraw tutorial is the excalidraw for beginners walkthrough the field is missing: one complete arc from your first diagram through the toolbar, libraries, real-time collaboration rooms, exports, the self-host option, and the where-your-drawings-live rule that saves beginners from their biggest data-loss mistake. If you plan to self-host later, our Docker beginner guide covers the engine it runs on.
What is Excalidraw, exactly?
Excalidraw is a virtual whiteboard for sketching hand-drawn-like diagrams, built as an open-source web app under the MIT license. Its public repository (excalidraw/excalidraw) carries roughly 134,950 GitHub stars as of November 2026, making it one of the most-starred drawing tools on the platform. The current tagged release is v0.18.1, and the project is under active development with commits landing as recently as late October 2026.
The pitch is deliberately narrow: Excalidraw does one thing — fast, sketchy diagrams — and refuses to become a full design suite. Everything about it is local-first: drawings autosave into your browser, the app works offline as a PWA, and nothing is uploaded anywhere unless you explicitly export or share it. That combination of speed and privacy is why developers, teachers, and product teams keep it pinned as a browser tab.
How do you use Excalidraw for the first time?
Here is the full beginner arc in one pass. Each step below gets its own section later in this guide — follow the list once and you will know the whole app.
- Open excalidraw.com in any modern browser. There is no sign-up, no download, and no account screen standing between you and the canvas.
- Meet the infinite canvas: click the hand tool (or press H) and drag to pan; scroll to zoom. Nothing you draw ever runs out of room.
- Press V (selection) — this is your home base. You will return to it after every drawing action.
- Press R and drag out a rectangle. It looks hand-drawn on purpose — wobbly edges, sketchy strokes. That is the whole aesthetic.
- Press O and draw an ellipse next to it. Press D for a diamond if your diagram needs a decision node.
- Press A and drag from one shape to another: Excalidraw binds the arrow to both shapes, so they stay connected when you move things later.
- Press T, click inside a shape, and type its label. Press Enter to finish editing, Esc to step out.
- Open the style panel on the left: change stroke color, add a background fill, try the fill patterns, and play with the sloppiness setting until the diagram feels right.
- Select a shape and press Ctrl+D (Cmd+D on Mac) to duplicate it — or hold Alt and drag. Building diagrams is mostly duplicate-and-edit.
- Press Ctrl+S (Cmd+S on Mac) to save your scene as an .excalidraw file. This is the single most important habit in this guide, and the section on where drawings live explains why.
Why do hand-drawn diagrams work so well?
Hand-drawn diagrams signal "draft" the moment someone looks at them, and that signal changes how people respond. A polished, pixel-perfect diagram reads as finished — viewers hesitate to challenge it. A sketchy one invites correction, which is exactly what you want during brainstorming, architecture reviews, and planning sessions.
This is the same psychology behind napkin sketches and whiteboard photos: roughness lowers the cost of being wrong. Excalidraw weaponizes that effect deliberately — the wobbly strokes are not a rendering limitation, they are the feature. When you present an idea as a sketch, the conversation stays on the idea instead of the formatting. Hand drawn diagrams keep the critique on the idea, not the pixels — and that is the entire point of the aesthetic.
What does each tool on the toolbar do?
The toolbar is deliberately small: every tool does one job, and you can learn all of them in a minute. From left to right, the main row holds the selection tool, the hand (pan), and then the drawing tools.
The drawing tools are: rectangle (R), diamond (D), ellipse (O), arrow (A), line (L), freedraw pen (P), text (T), image insert, and the eraser (E). Arrows and lines bind to shapes automatically — drag an arrow endpoint onto a shape and it snaps on, then follows the shape when you move it. The eraser removes whole elements with one stroke; it is a "delete what you scribble over" tool, not a pixel eraser.
Two tools deserve a special mention. The image tool lets you drag photos and screenshots onto the canvas — great for annotating screenshots in bug reports. And the frame tool (on newer builds) groups elements into named frames you can export one by one, which is how teams turn one big canvas into a slide deck.
Which keyboard shortcuts should you learn first?
Excalidraw is a keyboard-first app: almost every tool has a single-letter shortcut, verified here against the app's own in-app shortcuts dialog (current source, fetched November 2026). Learn these ten and you will stop touching the toolbar.
| Key | Tool / action | Beginner tip |
|---|---|---|
| V or 1 | Selection | Your home base — return here after every drawing stroke |
| H | Hand (pan) | Drag to move around the infinite canvas |
| R or 2 | Rectangle | The workhorse of flowcharts and wireframes |
| D or 3 | Diamond | Decision nodes in flowcharts |
| O or 4 | Ellipse | Not E — E is the eraser, a classic beginner mix-up |
| A or 5 | Arrow | Drag endpoint onto a shape to bind it permanently |
| L or 6 | Line | Plain connectors without arrowheads |
| P or 7 | Freedraw pen | Freehand sketching; hold for smoother curves |
| T or 8 | Text | Click inside a shape to label it directly |
| E or 0 | Eraser | Scribble over elements to delete them in one pass |
| Ctrl+D | Duplicate | Alt+drag does the same thing with the mouse |
| Ctrl+S / Ctrl+O | Save / open scene | Saves and reopens .excalidraw files — your backup habit |
The one combo that changes everything: press Ctrl+D on a finished, styled shape, then edit the copy. Building a ten-node flowchart this way takes minutes; drawing each node from scratch takes three times as long.
How do Excalidraw libraries work?
Libraries are reusable shape packs — the feature that turns Excalidraw from a sketch pad into a serious diagramming tool. Instead of drawing the same cloud-architecture icon or UI wireframe element fifty times, you install a library once and drag ready-made shapes onto the canvas.
You browse community libraries at libraries.excalidraw.com, where each library page offers "Add to Excalidraw" (installs it straight into the app) or "Download" (saves it as a file you can import later). Inside the app, the library panel opens from the book-shaped icon in the toolbar, just right of the drawing tools. And you can build your own: right-click any element on your canvas and choose to add it to your library, turning today's careful diagram into tomorrow's reusable component.
The practical libraries beginners grab first are AWS/cloud-architecture icon sets, UI wireframe kits, and flowchart symbol packs. One caution: libraries are community-made, so quality varies — preview a library's shapes before installing, and prefer the ones with clear previews on the library site.
How do you make a diagram that looks good?
Good-looking Excalidraw diagrams come from the style panel on the left, not from drawing skill. Every selected element exposes the same controls: stroke color, background color, fill style, stroke width, sloppiness, edge sharpness, opacity, and font.
Fill style is the biggest lever: "solid" fills read as final, while "hachure" (diagonal sketch lines) and "cross-hatch" keep the hand-drawn feel even on colored shapes. Sloppiness has three levels — Architect (neat), Artist (medium), and Cartoonist (wild) — and most professional-looking diagrams live on Architect or Artist. For text, the Virgil font is the signature hand-drawn look; Helvetica and Cascadia Code (the monospace option) are there when you need labels that read as labels.
One rule of thumb: pick one stroke color, one fill color, and one sloppiness level for the whole diagram, then vary only those. Consistency is what separates a diagram that looks intentional from one that looks accidental.
How does real-time collaboration work?
Excalidraw collaboration needs no accounts and no setup: click the "Live collaboration" button, share the generated link, and everyone who opens it draws on the same canvas with live cursors showing where each person is. The official getting-started page confirms the free tier lets you invite as many people as you want and collaborate in real time.
The privacy story is genuinely strong: collaboration is end-to-end encrypted, with the room ID and encryption key embedded in the URL fragment (the part after the #), which never reaches the server. The server only relays encrypted bytes it cannot read. That is the same guarantee that lets teams whiteboard over sensitive architecture without a second thought.
Know the limit before you rely on it: free-tier rooms are live sessions, not permanent shared documents — the official docs do not document a persistence guarantee, and independent guides describe rooms as lasting only while people are connected. For work that must survive the meeting, export the scene (PNG or .excalidraw) before everyone leaves, or step up to the paid tier's cloud scenes.
How do you export and save your work?
Excalidraw export covers every way a diagram leaves the canvas: save as PNG (with an optional transparent background for slides), save as SVG (infinitely scalable for docs and print), or copy the selection straight to the clipboard and paste it into Slack, Notion, or a document. No account is required for any of it.
The format that matters most is the native one: .excalidraw. Press Ctrl+S (Cmd+S on Mac) to save your scene as a .excalidraw file, and Ctrl+O (Cmd+O) to reopen it later — the file holds the full editable scene, so it is both your backup and your shareable source of truth. Treat the PNG as the published artifact and the .excalidraw file as the source code; never keep only the PNG.
Where do your drawings actually live? The where-your-drawings-live rule
By default, your drawings live in your browser's localStorage — Excalidraw is local-first and autosaves to the browser automatically, which feels like magic until it bites you. Clearing site data, switching browsers, wiping a profile, or losing the machine means losing every drawing you never exported. There is no account to log back into on the free tier, so there is no cloud copy waiting for you.
The rule is simple and non-negotiable: export the .excalidraw file for every drawing you care about, the way you would save a document. The export takes two seconds; the lesson it prevents takes hours. If your drawings must live somewhere durable by default — synced across devices, shared with a team, backed up — that is what the paid Excalidraw+ tier's cloud scenes are for, or what self-hosting with your own storage gives you.
What is Excalidraw+ — and do you need it?
Excalidraw+ is the paid tier: $6 per user per month (USD, credit card only), with a 14-day free trial and a free plan that stays free forever. Say it once and move on, because the free tier is the scope of this guide and it covers everything a beginner needs.
What the $6 buys: unlimited scenes and folders saved on Excalidraw's cloud with automatic sync, sharing with explicit edit/view permissions, workspace teams with user management and role-based access control, presentations that export to PPTX and PDF, image uploads up to 4K, 100 AI requests per day (text-to-diagram, wireframe-to-code, Mermaid-to-Excalidraw — versus 10 per day on free), and an MCP + REST API in public beta for programmatic access. You need Plus when your whiteboards become team infrastructure; until then, the free tier plus .excalidraw exports is plenty.
How do you self-host Excalidraw?
You self-host Excalidraw when your diagrams cannot touch a third-party server — and the excalidraw self hosted answer is refreshingly simple: compliance rules, client data, or a team that simply wants its whiteboard on its own infrastructure. The official Docker image (excalidraw/excalidraw, roughly 9.94 million pulls, last updated May 2026) runs the full app with one command and is explicitly free of analytics and tracking libraries:
docker run --rm -dit --name excalidraw -p 5000:80 excalidraw/excalidraw:latestThe container serves the app on internal port 80 (mapped to host port 5000 in the example above), so it is reachable at your server's IP on port 5000 the moment the container starts. You will want a small VPS for this — see our guide on what is VPS hosting if that is new — and a reverse proxy with HTTPS in front of it, which our Caddy beginner guide walks through step by step.
Read the official caveat before you commit to this path: the Docker Hub description states that self-hosting your own instance does not currently support the sharing or collaboration features. You get the full editor, libraries, and export — but the live collaboration rooms only work on excalidraw.com. For a team that needs both self-hosting and real-time collaboration, the Enterprise tier is the documented direction.
Excalidraw vs draw.io: which one should you pick?
Excalidraw vs draw.io is the beginner diagramming decision, and the answer is about the phase of the work, not the quality of the tools. Both are free; they serve different moments.
| Excalidraw | draw.io (diagrams.net) | |
|---|---|---|
| Visual style | Hand-drawn, sketch-like whiteboard | Professional, polished diagrams with grid snapping |
| Best for | Brainstorms, wireframes, architecture sketches, teaching | Formal flowcharts, UML, network diagrams, org charts |
| Shape scope | Deliberately minimal — quick shapes plus community libraries | Extensive built-in libraries and templates for formal diagramming |
| Where drawings live | Browser localStorage by default; .excalidraw files you export | Your own Google Drive, OneDrive, or GitHub — you pick the storage |
| Collaboration | Free link rooms, no account, end-to-end encrypted, ephemeral | Via the connected storage backend (Drive/OneDrive/GitHub sharing) |
| Export formats | PNG, SVG, clipboard, .excalidraw | PNG, SVG, PDF, XML, HTML |
| Desktop app | No — browser PWA that works offline | Yes, a dedicated desktop build exists |
| Cost | Free; Plus at $6/user/month for cloud teams | Free |
The one-line rule: sketching an idea to think with it — Excalidraw; documenting a system that must look authoritative — draw.io. An August 2026 G2 comparison snapshot puts Excalidraw at 4.5/5 from 32 reviews versus draw.io at 4.4/5 from 452 reviews, with Excalidraw leading on ease of use 9.9 to 8.8 — which matches the experience exactly: Excalidraw is easier to start, draw.io goes further when formality matters. Many teams simply use both, and there is nothing wrong with that.
Can you use Excalidraw inside other apps?
Yes — the most developed integration is the Obsidian plugin, a community plugin by Zsolt Viczian that embeds the full Excalidraw editor inside your Obsidian vault. Install it from Settings, then Community plugins, then Browse, and search "Excalidraw". New drawings become .excalidraw.md files that live alongside your notes: you can embed drawings in notes, link notes to drawings, and drag images onto the canvas for annotation.
The plugin's hidden power is its Script Engine — since v1.5.0 it can run ExcalidrawAutomate macros from the command palette, with a downloadable script library, so repetitive diagram chores (charts from data, batch styling) become one-click operations. For students and researchers, this is the online whiteboard that finally lives where the notes live, instead of in another browser tab you will lose.
What mistakes do beginners always make?
Every beginner makes the same five mistakes in their first week. Learn them from this table instead of from experience.
| Mistake | Why it hurts | The fix |
|---|---|---|
| Never exporting the scene | Drawings live in localStorage — one browser wipe erases them | Ctrl+S to a .excalidraw file after every session that matters |
| Forgetting you are on the wrong tool | You keep drawing rectangles when you meant to select and move one | Press V after every stroke until selection becomes muscle memory |
| Pressing E for ellipse | E is the eraser — you just deleted the shape you were admiring | Ellipse is O; Ctrl+Z undoes the damage |
| Styling every shape differently | The diagram looks accidental instead of intentional | One stroke color, one fill, one sloppiness level per diagram |
| Treating a collaboration room as permanent | Free rooms are live sessions — the canvas may not be there tomorrow | Export before the meeting ends, or move persistent work to Plus |
Sources
- GitHub API, excalidraw/excalidraw (fetched 2026-11-01) — ~134,950 stars, MIT license, default branch master, last push 2026-10-31; latest release v0.18.1 published 2026-04-21.
- excalidraw/excalidraw README (GitHub, fetched 2026-11-01) — PWA offline support, real-time collaboration, end-to-end encryption, local-first browser autosave, shareable readonly links.
- Docker Hub API, excalidraw/excalidraw (fetched 2026-11-01) — ~9.94 million pulls, last updated 2026-05-06; official run command and port 80; image free of analytics; self-hosting caveat on sharing/collaboration.
- Excalidraw, "How to start" (plus.excalidraw.com/how-to-start, fetched 2026-11-01) — free with no account, unlimited free real-time collaboration, share button, keyboard shortcut list, command palette.
- Excalidraw, pricing (plus.excalidraw.com/pricing, fetched 2026-11-01) — Plus $6/user/month USD, 14-day trial, free-forever plan, cloud scenes, teams with RBAC, PPTX/PDF presentations, 4K uploads, AI request tiers, credit-card-only payments.
- Excalidraw app source, HelpDialog.tsx (GitHub master, fetched 2026-11-01) — verified shortcut list: H, V/1, R/2, D/3, O/4, A/5, L/6, P/7, T/8, E/0.
- Excalidraw app source, actionExport.tsx and data/json.ts (GitHub master, fetched 2026-11-01) — Ctrl/Cmd+S saves scene to file, Ctrl/Cmd+O opens a scene file, native .excalidraw extension.
- Excalidraw Libraries (libraries.excalidraw.com, fetched 2026-11-01) — community library browsing with "Add to Excalidraw" and "Download" actions.
- dev.to / nologintools, "Excalidraw: Free Online Whiteboard, No Login Required" (fetched 2026-11-01) — live-collaboration flow, URL-fragment encryption-key mechanics, localStorage autosave, PNG/SVG/clipboard export, ephemeral-room behavior.
- G2, "draw.io vs Excalidraw" comparison (crawled 2026-11-01) — 4.5/5 (32 reviews) vs 4.4/5 (452 reviews), ease of use 9.9 vs 8.8, August 2026 snapshot.
- gadgetmates, "Excalidraw vs draw.io" (fetched 2026-11-01) — style/precision framing, scope comparison, export-format lists.
- omnicanvasnotes, "Excalidraw Alternatives" (fetched 2026-11-01) — draw.io storage backends and desktop app, minimal-vs-extensive scope framing.
- app.studyraid.com, "Understand installing Excalidraw for Visual Notes" (crawled 2026-11-01) — Obsidian community-plugin install arc, .excalidraw.md files, note linking, script engine.
- socket.dev, obsidian-excalidraw-plugin overview (crawled 2026-11-01) — plugin author Zsolt Viczian (@zsviczian), script engine since v1.5.0.
- Webex App Hub, Excalidraw listing (crawled 2026-11-01) — end-to-end encrypted collaboration without an account.
Frequently Asked Questions
Is Excalidraw really free?
Yes. The core app at excalidraw.com is free with no account — you visit and start drawing. The open-source codebase is MIT-licensed, and the official Docker image is free to self-host. The paid Excalidraw+ tier ($6/user/month) only adds team infrastructure: cloud scenes, workspaces, and presentations.
Can I collaborate without creating an account?
Yes. Click "Live collaboration," share the link, and anyone who opens it draws with you in real time — no accounts on either side. The session is end-to-end encrypted, with the encryption key embedded in the link's URL fragment where the server never sees it. Treat free rooms as live sessions: export the scene before everyone leaves.
Where are my Excalidraw drawings saved?
In your browser's localStorage by default — the app autosaves locally and nothing is uploaded. That means clearing browser data or switching browsers loses unexported drawings. The habit that fixes it: press Ctrl+S (Cmd+S on Mac) and keep the .excalidraw file, which is the full editable scene.
How do I reopen a saved Excalidraw file?
Press Ctrl+O (Cmd+O on Mac) and pick your .excalidraw file, or drag the file onto the canvas. You can also open a .excalidraw.md drawing inside the Obsidian plugin. Keep the .excalidraw file as your source of truth and export PNG or SVG only when you need a published copy.
Is there an Excalidraw desktop app?
There is no dedicated desktop build — Excalidraw is a browser app with PWA support, so you can install it as an app-like window and keep drawing offline. If you specifically want a native desktop diagramming app, draw.io ships one; that is one of the real differences in the excalidraw vs draw.io decision.
