Schnell hübsche Flowcharts zeichnen

Excalidraw ist eine tolle Web-Anwendung. Sie erfüllt drei Zwecke:

1. Sie macht es unglaublich einfach, ein Flussdiagramm (Flowchart) zu zeichnen.
2. Sie verleiht den Grafiken den Charme einer Handzeichnung.
3. Und sie führt vor Augen, wie unkompliziert das Web sein könnte (oder müsste).

Wir brauchen weder Log-in, noch müssen wir irgendwelche Nutzungsbestimmungen oder sonst etwas akzeptieren. Nein; alles, was wir tun müssen, ist 1) die Website aufzurufen und 2) mit Zeichnen zu beginnen.

Schneller Werkzeugwechsel

In der Leiste am oberen Rand gibt es die Haupt-Werkzeuge: Das sind Rechteck, Raute, Ellipse, Pfeil, Linie, Freihand-Stift, Text, Bild und Radierer. Die können nicht nur per Maus, sondern auch über die Ziffern- oder Buchstaben-Tasten aktiviert werden.

In einem Untermenü findet sich ferner auch das Rahmenwerkzeug, das Einbettungs-Tool zur Anzeige von Webinhalten, sowie der Laserpointer. Mit dem zeichnen wir rote Linien in unserem Diagramm, die dann verblassen und schliesslich verschwinden: Perfekt, um während Präsentationen den Blick des Publikums zu lenken.

Die Elemente, die wir platzieren, haben keine exakte Geometrie, sondern leichte Abweichungen von der geraden Linie. Auch die Strichdicke ist nicht immer auf dem Pixel gleich; und mitunter gibt es auch leichte Doppellinien. Das wirkt, als habe jemand die Elemente von Hand auf eine Tafel gezeichnet. Die Variationen sind sind unauffällig genug, dass sie nicht ablenken, aber ausreichend prononciert, dass die Grafiken nicht so steril wirken, wie das normalerweise bei am Computer gezeichneten Grafiken der Fall ist. Mir gefällt das ausgezeichnet: Es rückt die Grafiken aus der bürokratisch-nüchternen Ecke in einen künstlerisch-kreativen Bereich.

Architekt, Künstler oder Karikaturist?

Wie ausgeprägt dieser Effekt ist, lässt sich über das Objektmenü bestimmen. Das erscheint, wenn wir ein Element markieren, am linken Rand. Zuständig für die zeichnerischen Variationen ist der Abschnitt Sauberkeit mit den drei Knöpfen Architekt, Künstler und Karikaturist.

Excalidraw beherrscht auch den wichtigen Trick, den wir von anderen Flowchart-Apps nicht missen möchten: Wenn wir Elemente per Linie oder Pfeil verbinden, docken die am Anfangs- und Endpunkt an. Sie halten die Verbindung, auch wenn Elemente verschoben werden. Das erlaubt es, die Anordnung der Elemente zu ändern und Kästchen umzuplatzieren, ohne dass Linien und Pfeile neu gezogen werden müssten.

Nochmals zurück zum Objektmenü: In dem wählen wir die Farbe, Dicke und den Stil des Strichs, geben bei zweidimensionalen Objekten die Füllung an (bestimme Farbe oder Transparenz). Wir können die Ecken abgerundet oder spitz darstellen, die Deckkraft anpassen und auch die vertikale Schichtung verändern. Sie bestimmt bei überlagernden Elementen, welches oben und welches unten liegt.

Alles, was wir brauchen

Drei Geheimtipps zum Abschluss:

• Beim Rechtsklick erscheint ein Kontextmenü mit weiteren Befehlen. In dem finden wir den praktischen Befehl Gruppieren, mit dem wir z.B. einen Rahmen mit dem dazu passenden Textfeld koppeln.
• Wenn wir auf ein Reckteck, ein Oval oder eine andere Flächenform doppelklicken, können wir den Text direkt hineinschreiben – ohne, dass ein separates Textfeld aufgezogen werden müsste.
• Pfeile können gerade verlaufen, aber auch mit der Option Curved oder Elbow (Zickzack) ausgestattet werden.

Das war es schon fast: Excalidraw hat keinen opulenten Funktionsumfang, bietet aber alles, was wir brauchen.

Über den Knopf Teilen erzeugen wir einen Link für Drittnutzer, die eine schreibgeschützte Ansicht der Grafik erhalten. Es gibt auch die Option Sitzung starten, mit der wir via Netz mit anderen Leuten zusamenarbeiten. Auch dafür benötigen wir keinen Account, sondern nur den Link. Über das Menü ist der Befehl Sign-up zuständig, mit dem wir ein Benutzerkonto anlegen. Falls wir ein Diagramm später überarbeiten möchten, ist das keine dumme Idee.

Es geht aber auch ohne: Es ist möglich, eine Grafik auf die lokale Festplatte zu speichern und später von dort zu laden und zu bearbeiten. Die älteren unter euch erinnern sich vielleicht: Das war früher, als wir noch mit lokal installierten Programmen gearbeitet haben, die Standardmethode.

Die Plus-Variante macht auch PDFs

Im Excalidraw-Menü gibt es auch die Möglichkeit, unser Werk in gebrauchsfertiger Form zu exportieren. Dafür stehen das Pixelformat PNG und das Vektorformat SVG zur Verfügung. Es finden sich hier auch eine Suchfunktion und die Option Excalidraw+: Mit der Plus-Variante lassen sich auch Präsentationen in Echtzeit abhalten und Zeichnungen im Powerpoint-Format PPTX sowie PDF exportieren. Es gibt eine Umgebung für die Zusammenarbeit und Kommentare. Diese Plus-Variante kostet sechs US-Dollar pro Monat und User.

Als ob das nicht toll genug wäre, darf ich hier mitteilen, dass Excalidraw Open-Source ist. Die Quellen finden sich auf Github, und man kann die Software auch via NPM oder Docker ausführen. Schön, dass es die Welt der freien Software noch gibt. Fragt sich, wie lange noch.

Beitragsbild: So geht es natürlich auch (Startup Stock Photos, Pexels-Lizenz).