Mermaid vs. PlantUML: Was überlebt den Kontakt mit einer Präsentation
Kurze Antwort: Mermaid gewinnt bei Reichweite und Tempo — es rendert nativ in GitHub, GitLab, Notion und Obsidian, und seine Syntax liegt nah genug an Markdown, dass eine Kollegin ein Diagramm bearbeiten kann, ohne ein Werkzeug zu lernen. PlantUML gewinnt bei der Tiefe — ein deutlich breiterer Diagrammkatalog, strikte UML-Konformität und eine Layout-Kontrolle, die auch bei wirklich großen Systemen trägt. Die meisten Vergleiche hören hier auf. Dieser geht einen Schritt weiter: Keines von beiden animiert, und genau daran scheitern beide auf einer Folie.
Die ehrliche Fassung des Vergleichs
PlantUML ist eine Java-Engine, die seit weit über einem Jahrzehnt Diagramme rendert. Sie ist praxiserprobt, ihr Diagrammkatalog ist der breiteste aller gängigen Textnotationen, und sie beherrscht Verteilungsdiagramme, Komponentendiagramme, Zustandsautomaten und striktes UML dort, wo Mermaid entweder annähert oder passt.
Mermaid ist JavaScript, jünger und bewusst viel enger gefasst. Der Gewinn dieser Enge: Es rendert dort, wo Ihr Team ohnehin schreibt. Ein `mermaid`-Codeblock in einem GitHub-README wird zum Diagramm — ohne Build-Schritt, ohne Server, ohne Plugin. Diese eine Eigenschaft hat für die Verbreitung von Diagram as Code mehr getan als jedes Feature, das PlantUML je ausgeliefert hat.
Die eigentliche Frage lautet also nicht, was besser ist. Sie lautet, welchen Fehlschlag Sie lieber hätten: ein Diagramm, das Ihr Werkzeug nicht ausdrücken kann, oder ein Diagramm, das Ihr Team nicht pflegen wird.
Worin unterscheiden sich Mermaid und PlantUML tatsächlich?
| | Mermaid | PlantUML | |---|---|---| | Engine | JavaScript, rendert im Browser | Java, meist ein Server oder eine lokale JAR | | Rendert nativ in GitHub, Notion, Obsidian | Ja | Nein, braucht ein Plugin oder ein gerendertes Bild | | Lernkurve der Syntax | Flach, nah an Markdown | Steiler, mehr Direktiven | | Diagrammkatalog | Flowchart, Sequenz, Klasse, Zustand, ER, Gantt, Pie, Journey und eine wachsende Liste | Breiter, inklusive Verteilung, Komponente, Objekt, Timing und striktem UML | | Layout-Kontrolle | Begrenzt, die Engine entscheidet weitgehend | Umfangreich, mit unsichtbaren Kanten und expliziter Positionierung | | Verhalten bei sehr großen Diagrammen | Lässt nach, das Layout wird unberechenbar | Hält besser stand | | Animation | Keine | Keine |
Die letzte Zeile ist die, die niemand in die Tabelle schreibt — und sie entscheidet, was passiert, wenn das Diagramm auf einer Folie landet.
Wann sollte ich Mermaid wählen?
Wählen Sie Mermaid, wenn das Diagramm direkt neben dem lebt, was es beschreibt, und von denselben Leuten bearbeitet wird, die auch dieses bearbeiten.
Architekturnotizen in einem README, ein Sequenzdiagramm in einem Pull Request, ein Flowchart in einem Design-Dokument, eine ER-Skizze auf einer Notion-Seite. In all diesen Fällen ist der Wert des Diagramms proportional dazu, wie aktuell es ist — und Aktualität entsteht durch geringen Pflegeaufwand. Bei Mermaid ist das eine Textänderung in der Datei, die Sie ohnehin offen haben.
Wählen Sie Mermaid auch dann, wenn nicht nur Sie die Quelle zu sehen bekommen. Ein Produktmanager wird ein Label in einem Mermaid-Flowchart plausibel selbst korrigieren. Dieselbe Person wird keine Java-Laufzeitumgebung installieren.
Wann sollte ich PlantUML wählen?
Wählen Sie PlantUML, wenn das Diagramm das Ergebnis ist und nicht eine Randnotiz.
Formales UML für eine regulierte Übergabe, ein Komponentendiagramm mit einer bestimmten vorgeschriebenen Notation, eine Verteilungstopologie mit fünfzig Knoten, bei der automatisches Layout Spaghetti produzieren würde, ein Zustandsautomat mit verschachtelten zusammengesetzten Zuständen. PlantUML drückt all das aus; Mermaid größtenteils nicht, und es dazu zu zwingen, ergibt ein schlechteres Diagramm, als gleich das richtige Werkzeug zu nehmen.
Wählen Sie es auch, wenn Sie ein deterministisches Layout brauchen. PlantUML gibt Ihnen unsichtbare Kanten und Positionierungshinweise, mit denen Sie darauf bestehen können, dass ein Diagramm so aussieht, wie Sie es am Whiteboard gezeichnet haben. Mermaid wird Ihnen das Layout umbrechen, und bei einem großen Graphen ist das kein kleines Ärgernis.
Was passiert, wenn eines von beiden in einer Präsentation landet?
Hier ist der Fehlschlag, den sich beide Notationen teilen, und er tritt in dem Moment auf, in dem das Diagramm die Dokumentation verlässt und in ein Deck wandert.
Beide rendern ein vollständiges statisches Bild. Jeder Knoten, jede Kante, alles auf einmal gezeichnet. In einem README ist das richtig — eine Leserin überfliegt, zoomt und liest im eigenen Tempo noch einmal nach. In einer Präsentation kehrt sich das um: Das Publikum bekommt in der ersten Sekunde das ganze Bild und verbringt Ihre Erklärung damit, vorauszulesen — oder schlimmer, die falsche Ecke zu lesen.
Als Vortragende merken Sie das. Sie ertappen sich dabei, wie Sie sagen „ignorieren Sie die rechte Seite vorerst", auf einen Beamer zeigen oder ein ehrliches Diagramm über vier Folien verteilen, damit es sich in Teilen aufdecken lässt. Dieser letzte Behelf ist der teure, denn jetzt bedeutet eine Änderung am System, vier Folien zu bearbeiten, die längst von der Quelle abgewichen sind.
Weder Mermaid noch PlantUML hat darauf eine Antwort. Mermaid trägt seit Jahren offene Feature-Anfragen für animierte Diagramme mit sich. PlantUML hat nie eine versprochen. Beide beschreiben Struktur, und eine Präsentation braucht Abfolge.
Die Formatseite davon haben wir in Mermaid zu PowerPoint behandelt, die Präsentationsseite in Wie man Systemarchitektur präsentiert.
Die dritte Möglichkeit: Text behalten, Abfolge ergänzen
Sie müssen sich nicht zwischen Diagram as Code und einem präsentierbaren Diagramm entscheiden.
Der Mermaid-Konverter von FluxDiagram liest beide Notationen — Mermaid-Definitionen für Flowchart, Sequenz, Klasse, Gantt und Pie sowie PlantUML-`@startuml`-Blöcke —, extrahiert Knoten und Kanten und generiert eine animierte Fassung, die sich in der Flussrichtung aufbaut, die Ihre Quelle ohnehin deklariert. Exportieren Sie als GIF, MP4 oder WebM und betten Sie das Ergebnis in PowerPoint, Google Slides oder Keynote ein.
Die entscheidende Eigenschaft: Ihre Definition bleibt dort, wo sie hingehört — im Repository, unter Review, neben dem Code. Die Folie bekommt ein generiertes Artefakt statt eines Screenshots, der sofort zu veralten beginnt. Ändert sich das System, ändern Sie den Text, wie Sie es ohnehin tun, und generieren neu.
Das rückt die Frage Mermaid versus PlantUML in ein anderes Licht. Beide funktionieren als Eingabe. Entscheiden Sie also nach den Kriterien oben — Reichweite und Pflegeaufwand gegen Katalog und Layout-Kontrolle — und nicht danach, was im Deck besser aussehen wird, denn das wird keines von beiden, und keines muss es. Unser breiterer Werkzeugvergleich steht in FluxDiagram vs. Alternativen.
FAQ
Kann ich Mermaid und PlantUML im selben Projekt verwenden?
Ja, und viele Teams tun das. Eine gängige Aufteilung ist Mermaid für alles, was im README oder Wiki gerendert wird, und PlantUML für formale Design-Dokumente, die ohnehin exportiert werden. Der Preis sind zwei Syntaxen im Kopf des Teams — einigen Sie sich also darauf, was wo lebt, und schreiben Sie es auf.
Ist die PlantUML-Syntax schwerer als Mermaid?
Spürbar, ja, wenn auch bei einfachen Diagrammen nicht dramatisch. Ein einfaches PlantUML-Sequenzdiagramm und ein einfaches Mermaid-Sequenzdiagramm sehen ähnlich aus. Der Abstand wächst mit Skins, Layout-Direktiven, Includes und den strikteren UML-Konstrukten — und genau dort liegt die Stärke von PlantUML.
Was ist speziell für Architekturdiagramme besser?
Für eine kleine Service-Landkarte, die aktuell bleiben muss: Mermaid, weil es im Repository rendert. Für eine große Verteilungstopologie oder alles, was C4 oder strikte UML-Notation braucht: PlantUML, das für beides etablierte Bibliotheken hat. Als statisches Bild wird sich keines von beiden gut präsentieren; das ist ein Problem, das von der Wahl der Notation getrennt ist.
Probieren Sie es mit dem Diagramm, das Sie schon haben
Ganz gleich, in welcher Notation Sie schreiben — das Präsentationsproblem ist dasselbe.
Fügen Sie Ihren Mermaid- oder PlantUML-Code in den Konverter ein.
FluxDiagram generiert animierte Diagramme, die Sie in das Deck einbetten, das Sie bereits haben — in PowerPoint, Google Slides oder Keynote.