Wer schnell eine Architekturskizze, ein Ablaufdiagramm oder einen Entwurf auf einem digitalen Whiteboard festhalten möchte, kommt an Excalidraw kaum vorbei. Das Open-Source-Tool läuft vollständig im Browser, erfordert keine Registrierung und besticht durch seinen unverwechselbaren handgezeichneten Stil. In diesem Artikel erfahren Sie, was Excalidraw kann, wo die Grenzen liegen und wie es sich gegenüber Alternativen wie draw.io und Miro schlägt.
Was ist Excalidraw?
Excalidraw ist eine Open-Source-Whiteboard-Anwendung, die 2020 von Vjeux und Christopher Chedeau ins Leben gerufen wurde. Das Besondere: Alle gezeichneten Formen, Pfeile und Texte sehen aus, als wären sie mit der Hand auf Papier gezeichnet worden. Dieser bewusst unfertige Look senkt die Hemmschwelle beim Skizzieren – niemand muss sich um perfekte Ausrichtung oder Pixel-genaue Gestaltung sorgen. Das Ergebnis wirkt lebendig und einladend, was gerade in frühen Projektphasen hilfreich ist, wenn es mehr um Ideen als um ausgefeiltes Design geht.
Die Anwendung speichert alle Daten standardmäßig lokal im Browser – es verlassen also keine sensiblen Informationen das eigene Gerät. Wer dennoch zusammenarbeiten möchte, kann über eine Echtzeit-Kollaborationsfunktion einen Link teilen, der andere Teilnehmer direkt auf das gleiche Whiteboard bringt.
Der handgezeichnete Stil: Mehr als nur Optik
Excalidraw verwendet unter der Haube die Bibliothek Rough.js, die geometrische Formen mit einer leicht unregelmäßigen, organisch wirkenden Linienführung rendert. Rechtecke haben leicht gewölbte Kanten, Pfeile wirken geschwungen, und Freihandlinien sehen aus, als kämen sie von einem echten Stift. Dieser Ansatz hat einen entscheidenden Vorteil: In Präsentationen oder Workshops kommuniziert ein handgezeichnetes Diagramm sofort, dass es sich um einen Entwurf handelt – das reduziert Missverständnisse und lädt zur Diskussion ein.
Echtzeit-Kollaboration
Excalidraw bietet eine Live-Kollaboration direkt im Browser. Per Klick auf „Live-Kollaboration starten" wird ein einzigartiger Link erzeugt, den man mit Kolleginnen und Kollegen teilen kann. Alle Änderungen sind für alle Teilnehmer sofort sichtbar – inklusive des Mauszeigers der anderen Personen. Der Kollaborationsserver wird von den Entwicklern betrieben, lässt sich aber auch selbst hosten.
Shape Libraries: Vorgefertigte Formen nutzen
Obwohl Excalidraw von Haus aus eher minimalistisch ist, gibt es ein wachsendes Ökosystem an Bibliotheken. Über die offizielle Excalidraw Libraries-Seite lassen sich Pakete mit vorgefertigten Formen herunterladen und in die eigene Zeichenfläche einbinden. Verfügbar sind unter anderem:
- AWS- und Azure-Cloud-Architektur-Icons
- UML-Diagrammelemente (Klassen, Sequenzen, Zustände)
- Wireframe-Komponenten für Web- und Mobile-Design
- Netzwerktopologie-Symbole
- Flowchart-Bausteine nach BPMN-ähnlichem Standard
Export: PNG, SVG und mehr
Fertige Diagramme lassen sich in mehreren Formaten exportieren. Der PNG-Export eignet sich für Präsentationen und Dokumentationen, während SVG verlustfreie Skalierbarkeit bietet und sich ideal für Webseiten oder weiterverarbeitende Tools eignet. Darüber hinaus speichert Excalidraw Dateien im eigenen .excalidraw-Format, einem JSON-basierten Schema, das alle Elemente inklusive Stile und Positionen enthält. Dieses Format lässt sich problemlos in Versionskontrollsystemen wie Git verwalten.
Wichtige Tastaturkürzel
Excalidraw lässt sich fast vollständig mit der Tastatur bedienen. Die wichtigsten Shortcuts im Überblick:
| Tastenkürzel | Funktion |
|---|---|
| R | Rechteck zeichnen |
| E | Ellipse zeichnen |
| A | Pfeil zeichnen |
| T | Textwerkzeug aktivieren |
| P | Stift / Freihand |
| Ctrl + Shift + K | Hintergrundfarbe entfernen |
| Ctrl + Z | Rückgängig |
| Ctrl + Enter | Element bearbeiten |
Selbst-Hosting: Volle Kontrolle über die Daten
Für Unternehmen mit strengen Datenschutzvorgaben ist Selbst-Hosting eine attraktive Option. Excalidraw kann als Docker-Container oder direkt als Node.js-Anwendung betrieben werden. Der Kollaborationsserver (excalidraw-room) sowie der Backend-Dienst für das persistente Speichern von Zeichnungen (excalidraw-json) sind ebenfalls Open Source und lassen sich auf eigener Infrastruktur deployen.
Vergleich: Excalidraw vs. draw.io vs. Miro
Je nach Anwendungsfall eignet sich ein anderes Tool besser. Die folgende Tabelle gibt einen schnellen Überblick:
| Kriterium | Excalidraw | draw.io | Miro |
|---|---|---|---|
| Preis | Kostenlos (Open Source) | Kostenlos (Open Source) | Freemium (3 Boards gratis) |
| Stil | Handgezeichnet | Professionell/technisch | Modern/flexibel |
| Kollaboration | Echtzeit (Link-basiert) | Echtzeit (Google Drive etc.) | Echtzeit (Konto erforderlich) |
| Offline-Nutzung | Ja (PWA / Desktop-App) | Ja (Desktop-App) | Eingeschränkt |
| Selbst-Hosting | Ja | Ja | Nein |
| Shape-Bibliotheken | Community-basiert | Umfangreich (UML, BPMN) | Templates, keine technischen Shapes |
| Dateiformat | JSON (.excalidraw), PNG, SVG | XML (.drawio), PDF, PNG | Proprietär |
Anwendungsfälle: Wann ist Excalidraw die beste Wahl?
Excalidraw glänzt in bestimmten Szenarien besonders:
- Architekturdiagramme: Schnelle Systemskizzen für Entwicklungsteams, etwa für Microservice-Architekturen oder Datenbankmodelle.
- Wireframes: Erste Entwürfe für Webseiten oder Apps, bei denen noch keine genaue Gestaltung feststeht.
- Brainstorming: Ideen sammeln und strukturieren in Workshops oder Remote-Meetings.
- Technische Dokumentation: Diagramme im handgezeichneten Stil machen technische Konzepte zugänglicher.
- Unterricht und Lehre: Einfaches Erstellen von Erklärskizzen ohne Einarbeitungszeit.
Für sehr formale, genormte Diagramme (etwa für regulatorische Dokumentation oder offizielle UML-Modelle) ist draw.io oder ein spezialisiertes UML-Tool besser geeignet. Für kollaborative Workshops mit vielen Teilnehmern und umfangreiche Projektboards punktet Miro mit seinen ausgefeilten Teamfunktionen. Excalidraw findet seine Stärke genau dazwischen: schnell, leichtgewichtig, datenschutzfreundlich und überraschend mächtig.
Die Anwendung ist auch als VS Code-Extension verfügbar, womit Entwicklerinnen und Entwickler Diagramme direkt neben ihrem Code bearbeiten können, ohne den Editor zu verlassen. Das macht Excalidraw zu einem festen Bestandteil moderner Entwicklungs-Workflows.
Fazit
Excalidraw ist ein bemerkenswert durchdachtes Werkzeug für alle, die schnell und ohne Ablenkung visuelle Ideen festhalten möchten. Der handgezeichnete Stil, die reibungslose Kollaboration und die Open-Source-Natur machen es zu einer erstklassigen Wahl für Entwickler, Designer und alle, die auf der Suche nach einem leichtgewichtigen, datenschutzfreundlichen Whiteboard sind. Ein kostenloses Ausprobieren auf excalidraw.com lohnt sich in jedem Fall.
Häufig gestellte Fragen
- Ist Excalidraw wirklich komplett kostenlos?
- Ja. Die Kernfunktionen von Excalidraw sind vollständig kostenlos und Open Source unter der MIT-Lizenz. Es gibt eine kostenpflichtige „Excalidraw+"-Variante mit persistentem Cloud-Speicher und erweiterten Kollaborationsfunktionen, der kostenlose Einstieg deckt aber alle wesentlichen Anwendungsfälle ab.
- Kann ich Excalidraw ohne Internetverbindung nutzen?
- Ja. Excalidraw funktioniert als Progressive Web App (PWA) und lässt sich im Browser installieren. Sobald die App einmal geladen wurde, steht sie auch offline zur Verfügung. Eine Desktop-Version ist ebenfalls verfügbar.
- Wie groß kann eine Excalidraw-Zeichenfläche sein?
- Die Zeichenfläche ist theoretisch unbegrenzt und lässt sich beliebig zoomen und verschieben. In der Praxis können sehr große Diagramme mit Tausenden von Elementen die Browserperformance beeinträchtigen.
- Kann ich Excalidraw in meine eigene App einbinden?
- Ja. Excalidraw stellt ein offizielles React-Paket als npm-Modul bereit, das sich in eigene Webanwendungen integrieren lässt. Die vollständige API-Dokumentation findet sich im GitHub-Repository des Projekts.