It’s #FrontendFriday – Klassen / Modul-Diagramme in Frontend-Projekten

Hallo #FrontendFriday-Leser/in,

heute geht es um Tools, die Klassendiagramme aus Frontend-Projekten (speziell TypeScript, Angular) generieren.

Zu Beginn eines Projekt wird eine Architektur der Anwendung erstellt (die sich im Laufe des Projekts weiterentwickelt). Während des Projekts stellt sich die Frage, ob die geplante Soll-Architektur mit der tatsächlich umgesetzten Architektur übereinstimmt. Hierzu können unter anderem Klassendiagramme helfen, die automatisch aus dem entwickelten Code generiert werden.

Tools

Liste der getesteten Tools. Die Tools, sind verlinkt. Dort finden sich auch Beispiel-Diagramme.

1. IntelliJ nur in Ultimate verfügbar. Testklassen (.spec.ts) können nicht exkludiert werden.
2. NGD Generiert sehr breite Bilder. Das Dokumentationstool compodoc verwendet diese Library zur Darstellung einzelner Module.
3. ngrev Eigenständige Applikation mit UI. Wird von einem Entwickler vom Angular Team entwickelt.
4. tplant Generiert PlantUML Diagramme, aber ohne direkten Angular-Projekt Support.
5. tsviz Generiert sehr breite, unübersichtliche Bilder.
6. vscode-ts-uml Plugin für VS-Code, analysiert nur einzelne Dateien, kann keine Übersicht über ein Projekt erstellen.
7. TsUML Sendet den Quellcode an einen Onlinedienst, der Klassendiagramme generiert.

Die Tools sind nach Empfehlung geordnet.

Fazit

Mehrere, auch kostenpflichtige Tools, wurden getestet. Ein ganz zufriedenstellendes Ergebnis konnte bisher keines liefern. Für einen schnellen Überlick kann dies aber reichen.
Für andere Programmiersprachen (z.B. Java) sind ausgereiftere Tools verfügbar. Sind euch bessere Möglichkeiten bekannt?