PlantUML lokal in VSCode nutzen

PlantUML ist sehr praktisch für technische Diagramme aller Art, insbesondere im Informatik-Studium. Dafür allerdings immer den PlantText-Editor im Browser zu verwenden ist allerdings unpraktisch. Lokales Speichern, Verwalten und Kompilieren von UML-Diagrammen wäre hier durchaus nützlicher. Genau hier kommt die VSCode-Erweiterung PlantUML zum Einsatz. Zusätzlich können Einstellungen für den Workspace, also für das spezifische Projekt in VSCode, vorgenommen werden.

Nach Installation und Aktivierung der Erweiterung, können .puml-Dateien zur Diagrammerstellung erstellt werden können. Die Diagramme können mit dem Plugin in Echtzeit angezeigt werden, indem oben rechts das Split-Screen-Symbol mit der Lupe geklickt wird. Wenn das Diagramm soweit fertig ist, kann es über cmd/strg+shift+p > PlantUML: Export Current Diagram exportiert werden. Standardmäßig werden hierfür neue Ordner erzeugt, was allerdings durch Workspace-Settings angepasst werden kann.

Die Workspace-Einstellungen können in der settings.json vorgenommen werden. Die settings.json wird mit cmd/strg+shift+p > Preferences: Open Workspace Settings im .vscode-Ordner erstellt. Hier können Export-Ordner und Format für die Diagramme festgelegt werden.

{
  "plantuml.exportOutDir": "images",
  "plantuml.exportSubFolder": false,
  "plantuml.exportFormat": "png",
}

Sollen die kompilierten Diagramme als .png-Datei einen anderen Namen als die .puml-Datei haben, kann im Diagramm ein gesonderter Titel gesetzt werden, z.B.:

@startuml OtherDiagramName