# Excalidraw Excalidraw is a free, open-source virtual whiteboard tool for creating diagrams and sketches with a distinctive hand-drawn aesthetic. It runs entirely in the browser, requires no account, and supports real-time collaboration with end-to-end encryption. ## Key Features **Hand-drawn Style**: Everything drawn in Excalidraw has a casual, sketched appearance (powered by the Rough.js library), making diagrams feel approachable and informal rather than rigid and formal. **Infinite Canvas**: An unlimited workspace for drawing, with zoom and pan controls to navigate freely between overview and detail. **Drawing Tools**: - Shapes: rectangle, circle, diamond, arrow, line - Free-draw and eraser - Text labels and annotations - Arrow binding (arrows snap to shapes and follow them when moved) - Labeled arrows for annotated connections **Real-time Collaboration**: Multiple users can work on the same canvas simultaneously by sharing a link. All collaboration is protected with end-to-end encryption using Web Cryptography APIs. **Shape Libraries**: Hundreds of community-contributed, MIT-licensed icon and shape libraries are available at libraries.excalidraw.com, covering software architecture, UX wireframing, logos, and more. **Export Formats**: PNG, SVG, clipboard, and the native `.excalidraw` JSON format. Exported SVGs embed complete scene data, allowing full re-import with editing fidelity. **Local-first**: Autosaves to the browser. Works offline as a PWA. ## How to Use Excalidraw - **Web app**: Available at excalidraw.com with no installation required - **Excalidraw+**: Commercial tier at plus.excalidraw.com with cloud storage and enhanced collaboration features - **VS Code extension**: Opens `.excalidraw`, `.excalidraw.png`, and `.excalidraw.svg` files directly in VS Code - **Obsidian plugin**: Full-featured integration via the [[Excalidraw plugin for Obsidian]], maintained by [[Zsolt Viczián]] - **Embeddable component**: Available as the `@excalidraw/excalidraw` npm package for embedding in React applications - **Self-hosted**: Can be deployed on your own infrastructure using Docker ## Technical Details - Built with TypeScript and React - Uses a two-layer canvas architecture: a static content layer (expensive elements drawn once) and an interactive overlay layer (selection handles, cursors, snap lines) for performance - State management via Jotai - Native `.excalidraw` files are plaintext JSON containing schema info, canvas elements, editor state, and embedded file data - Licensed under MIT ## History Excalidraw was created by Christopher Chedeau (known as vjeux), a front-end engineer also known for his work on React, React Native, Prettier, and the Yoga layout engine. He started it as a prototype on CodeSandbox before moving it to its own GitHub repository, where it has grown to over 100k stars. ## References - https://excalidraw.com - https://plus.excalidraw.com - https://github.com/excalidraw/excalidraw - https://docs.excalidraw.com - https://libraries.excalidraw.com ## Related - [[Excalidraw plugin for Obsidian]] - [[Visual thinking]] - [[Obsidian Canvas]] - [[Mind Maps]] - [[Schematic Diagrams]] - [[Zsolt Viczián]]