Über dieses Projekt

Ich bin ein riesiger Fan von PlantUML. Mit den öffentlich verfügbaren Online-Editoren bin ich aber nie richtig warm geworden. Deshalb habe ich mir meinen eigenen gebaut: den PlantUML Power Editor.

Warum PlantUML?

Diagramme als Text zu schreiben ist für mich unschlagbar: Sie lassen sich versionieren, in Code-Reviews vergleichen, schnell anpassen und sehen trotzdem ordentlich aus. PlantUML deckt dabei fast alles ab, von Sequenz- und Klassendiagrammen bis zu Mindmaps und Gantt-Charts.

Warum ein eigener Editor?

Mir haben bei den verfügbaren Editoren immer Dinge gefehlt: eine sofortige Vorschau, die beim Tippen nicht ständig verschwindet, Fehlermeldungen direkt an der betroffenen Zeile, eine sinnvolle Autovervollständigung und die Möglichkeit, Elemente einfach anzuklicken und zu gestalten. Dazu ein modernes, aufgeräumtes Design, das auch auf dem Smartphone funktioniert. Also habe ich dieses Projekt gestartet, zunächst für mich selbst. Wer es nützlich findet, darf es gern mitbenutzen.

Kein offizielles PlantUML-Projekt

Ich gehöre nicht zum PlantUML-Team und stehe in keiner Verbindung zu den Entwicklern. Ich bin einfach ein übereifriger Nutzer. PlantUML selbst wird von Arnaud Roques und vielen Mitwirkenden als Open-Source-Projekt entwickelt. Alle Informationen zur Sprache findest du auf der offiziellen PlantUML-Website.

Gerendert direkt in deinem Browser

Der Editor verwendet die offizielle JavaScript-Implementierung von PlantUML: Der Java-Code von PlantUML wird dafür mit TeaVM nach JavaScript übersetzt, das Layout übernimmt Graphviz als WebAssembly. Deine Diagramme werden deshalb vollständig lokal in deinem Browser gerendert. Es gibt keinen Remote-Server, der deinen Quelltext empfängt oder Bilder erzeugt, und deine Diagramme verlassen dein Gerät nicht. Details stehen in der Datenschutzerklärung.

Verwendete Technologien

• @plantuml/core: PlantUML als JavaScript (mit TeaVM kompiliert), inklusive Graphviz als WebAssembly
• Angular mit Signals und Angular Material (Material 3)
• CodeMirror 6 für Editor, Syntax-Highlighting und Autovervollständigung
• Schriften Inter und JetBrains Mono sowie Material Symbols, alle von diesem Server ausgeliefert
• Local Storage des Browsers für gespeicherte Diagramme und Einstellungen
• Auslieferung als statische Website über nginx in einem Docker-Container

Open Source

Der Quelltext liegt auf GitHub. Fehler und Ideen kannst du dort gern als Issue melden.

Manuel Seiche, mseiche.de