[Vortrag] Coding Diagrams

In diesem Vortag geht es darum, wie mit Hilfe von plantUML Diagramme einfacher gestaltet werden können, so dass Diagramme aus dem Editor per Text geschrieben und geteilt werden können.

TL;DR

Mit plantUML können wir einfach und bequem Diagramme erzeugen.

Slides

Script

Bei jedem Software-Projekt gibt es viele Diagramme in verschiedenen Arten:

Das können sein

• Klassendiagramme
• Zustandsdiagramme
• Sequenzdiagramme
• Aktivitätsdiagramme
• ER-Diagramme
• …

Aber wie zeichnen wir diese?

Mit vielen verschiedenen Tools, hier eine kleine Auswahl:

Draw.io https://www.draw.io/

MySQL Workbench https://www.mysql.com/de/products/workbench/

gimp https://www.gimp.org/

StarUML http://staruml.io/

Papdesigner http://friedrich-folkmann.de/papdesigner/Hauptseite.html

Microsoft Visio: https://products.office.com/de-de/visio/

Microsoft Project https://products.office.com/de-de/project/project-and-portfolio-management-software?tab=tabs-1

Diese massive Nutzung von Tools führt zu Chaos und massiven Problemen:

• Jede Software hat ein eigenes Dateiformat
• Datei unlesbar ohne Software, da in Binärformaten gearbeitet wird.
• Software ist zum Teil kostenpflichtig
• Änderungen sind nicht nachvollziehbar (SCM anyone?)

Eine Lösung ist plantUML.

plantuml ist ein quelloffenes Projekt, dass es ermöglicht, Diagramme in einfacher und intuitiver Sprache durch textuelle Notation zu beschrieben.

Ein Beispiel:

Wir wollen ein Klassendiagramm in VSCode erzeugen:

Zunächst müssen wir die Komponenten von plantUML installieren:

• Java
• Graphviz (Anleitung)
• plantUML selber

Als nächstes starten wir VSCode und installieren ein passendes Plugin, z.B. PlantUML

Dann schreiben wir den Code, hier ein Beispiel für ein Klassendiagramm:

@startuml

class Database {
 Database(path) : Database
 + getAccount(id, callback): void
 + listAccounts(callback): void
}

class Csvgen {
 +Csvgen(id, mail, database, callback): void
 - mail2DB(mail): bool
}

Csvgen *-- Database

@enduml

Jetzt noch die Tastenkombination [ALT] + [D] und schon sehen wir ein Diagramm:

Wunderbar, oder?

Leider hat auch so ein Projekt ein paar Nachteile:

Der einzige echte Nachteil ist die Komplexe Installation

• Java
• GraphViz
• Plugins für Editoren

Aber ich denke, die folgenden Vorteile überwiegen hier

• Die Diagramm-Dateien sind ohne Software lesbar, sogar im einfachsten Editor
• Die Nutzung und Verwendung ist völlig Kostenfrei!
• Die Diagramm-Quellen können wie beliebige andere Dateien in einer Source-Code-Verwaltung verwaltet werden.
• Verwendung von Plugins (hier gibt es sehr viele)

Fazit

• plantuml bietet einen einfacher Einstieg
• … auch für Nicht-Programmierer, da die Notation bewusst einfach gehalten ist.
• Diagramm-Dateien können direkt im eigenen Code-Editor, mit Notepad oder mit diversen GUIs erstellt werden.
• Dadurch kann sich ein Entwickler Zeit und damit Kosten sparen