excalidraw

name	excalidraw
description	Hand-drawn style diagrams with Excalidraw
category	Design & Frontend
status	active

Excalidraw

Purpose

Create collaborative hand-drawn style diagrams and wireframes with end-to-end encryption. Excalidraw renders shapes, arrows, and freehand drawings as sketches to communicate design ideas, system diagrams, and collaborative whiteboarding without formal design tool overhead.

When to Use

• Wireframing UI layouts and user flows for rapid iteration
• Architecture sketches and system design discussions
• Collaborative real-time diagramming with teams (encryption-secured)
• Informal technical drawings that benefit from casual aesthetic
• Exporting diagrams as PNG, SVG, or editable .excalidraw JSON format
• Creating site maps, flowcharts, and entity relationship sketches

Do NOT use when: Requiring formal publication-ready styling, precise node positioning/alignment, or automatic graph layout algorithms (use Mermaid or tech-graph instead).

Workflow

1. Access the editor — Visit excalidraw.com or embed @excalidraw/excalidraw npm package into your app
2. Draw shapes & connections — Use rectangle, circle, diamond, arrows, lines, freehand, eraser tools from toolbar
3. Add text labels — Double-click shapes to annotate; use arrow tools for flow connections
4. Customize appearance — Set colors, stroke width, fill, background; enable dark mode if needed
5. Enable collaboration — Generate invite link (with end-to-end encryption) for real-time multi-user editing
6. Export & save — Download PNG/SVG; save JSON file for later edits; enable autosave to browser storage

Key Concepts

Hand-Drawn Aesthetic

Excalidraw renders all shapes with soft, irregular edges mimicking pencil sketches. This casual style reduces design pressure, making it ideal for brainstorming and early-stage design communication. Maintains hand-drawn feel even in PNG/SVG exports.

Canvas-Based Architecture

Infinite zoomable whiteboard with panning and keyboard shortcuts (Ctrl+Z undo, delete, arrow keys). No page constraints; suitable for large, exploratory diagrams. Real-time synchronization updates all collaborative clients.

End-to-End Encryption

Collaboration links encrypt diagram data client-side; server never sees unencrypted content. No login required for sharing. Invite links remain valid indefinitely.

Multi-Format Export

PNG (raster), SVG (vector), clipboard copy, and JSON (.excalidraw) format. JSON preserves all editable layer data; SVG/PNG suitable for documentation and sharing.

Example

// Embed Excalidraw in React app
import { Excalidraw } from "@excalidraw/excalidraw";

export default function MyDiagram() {
  return <Excalidraw />;
}

Create a simple wireframe: draw a rectangle (top navigation), smaller rectangles below (content), arrows showing navigation flow, add text labels. Export as SVG for README or PNG for Slack sharing.

Common Pitfalls

• Expecting automatic layout (manual positioning only; use Mermaid for flowcharts)
• Sharing links without understanding encryption scope (encryption per session/link)
• Saving only PNG export without keeping .excalidraw JSON (loses editability)
• Assuming team members retain offline edits (sync requires reconnection)
• Using for complex graph layouts requiring precise node distances (not optimized for this)

References

• Excalidraw GitHub — Official open-source repository with npm integration docs and feature list
• Excalidraw Documentation — Integration guide for embedding editor, API reference, contributor guide
• Excalidraw Web App — Live editor; used by Google Cloud, Meta, Notion, Obsidian for collaborative design