Das ist eine für den Ausdruck optimierte Ansicht des gesamten Kapitels inkl. Unterseiten. Druckvorgang starten.
Diagrams-as-Code
1 - Mermaid
Einführung
Mermaid ist eine JavaScript-basierte Diagramm- und Visualisierungsbibliothek, die es ermöglicht, Diagramme und Flussdiagramme mithilfe von Textbeschreibungen zu erstellen. Mermaid wird häufig in Markdown-Dokumenten (z. B. in GitHub, GitLab oder Confluence) verwendet, um komplexe Zusammenhänge visuell darzustellen.
Vorteile von Mermaid:
- Einfache Integration in Markdown-Dokumente.
- Keine externen Tools nötig – Diagramme werden direkt im Browser gerendert.
- Unterstützt eine Vielzahl von Diagrammtypen.
- Ideal für Dokumentationen, Präsentationen und technische Spezifikationen.
Mögliche Diagramme
Ablauf-Diagramm (Flowchart)
Ablaufdiagramme visualisieren Prozesse oder Workflows. Sie bestehen aus Knoten (Schritte) und Verbindungen (Pfeile), die die Reihenfolge der Schritte darstellen.
Beispiel:
flowchart TD
A[Start] --> B{Entscheidung}
B -->|Ja| C[Prozess 1]
B -->|Nein| D[Prozess 2]
C --> E[Ende]
D --> E
flowchart TD
A[Start] --> B{Entscheidung}
B -->|Ja| C[Prozess 1]
B -->|Nein| D[Prozess 2]
C --> E[Ende]
D --> E
Erklärung:
flowchart TD: Definiert ein Ablaufdiagramm von oben nach unten.A[Start]: Ein Knoten mit der Beschriftung “Start”.-->: Verbindung zwischen Knoten.|Ja|und|Nein|: Beschriftungen für die Verbindungen.
Klassen-Diagramm (Class Diagram)
Klassendiagramme zeigen die Struktur von Klassen, ihre Attribute, Methoden und Beziehungen zueinander.
Beispiel:
classDiagram
class Tier {
-name: String
+essen()
}
class Hund {
+bellen()
}
Tier <|-- Hund
classDiagram
class Tier {
-name: String
+essen()
}
class Hund {
+bellen()
}
Tier <|-- Hund
Erklärung:
classDiagram: Definiert ein Klassendiagramm.TierundHund: Klassen mit Attributen (-name) und Methoden (+essen()).<|--: Vererbungsbeziehung (Hund erbt von Tier).
Sequenz-Diagramm (Sequence Diagram)
Sequenzdiagramme visualisieren Interaktionen zwischen Objekten oder Akteuren in einer zeitlichen Abfolge.
Beispiel:
sequenceDiagram Alice->>Bob: Hallo!
Bob-->>Alice: Hallo zurück!
sequenceDiagram Alice->>Bob: Hallo! Bob-->>Alice: Hallo zurück!
Erklärung:
sequenceDiagram: Definiert ein Sequenzdiagramm.Alice->>Bob: Nachricht von Alice an Bob.-->>: Antwort von Bob an Alice.
Entity-Relationship-Diagramm (ER-Diagramm)
ER-Diagramme zeigen die Beziehungen zwischen Entitäten in einer Datenbank.
Beispiel:
erDiagram
KUNDE ||--o{ BESTELLUNG : "hat"
KUNDE {
int *id PK
string name
}
BESTELLUNG {
int *id PK
date datum
}
erDiagram KUNDE ||--o{ BESTELLUNG : hat KUNDE { int id PK string name } BESTELLUNG { int id PK date datum }
Erklärung:
erDiagram: Definiert ein ER-Diagramm.KUNDE ||--o{ BESTELLUNG: Ein Kunde hat viele Bestellungen.PK: Primärschlüssel.
Status-Diagramm (State Diagram)
Statusdiagramme zeigen die Zustände eines Systems und die Übergänge zwischen diesen Zuständen.
Beispiel:
stateDiagram-v2
[*] --> Off
Off --> On: Einschalten
On --> Off: Ausschalten
stateDiagram-v2
[*] --> Off
Off --> On: Einschalten
On --> Off: Ausschalten
Erklärung:
stateDiagram-v2: Definiert ein Statusdiagramm.[*]: Startzustand.Off --> On: Übergang von “Off” zu “On” durch “Einschalten”.
Mindmap-Diagramm
Mindmaps visualisieren hierarchische Ideen oder Konzepte.
Beispiel:
mindmap
root((Thema))
Zweig 1
Unterthema 1
Unterthema 2
Zweig 2
Unterthema 3
mindmap
root((Thema))
Zweig 1
Unterthema 1
Unterthema 2
Zweig 2
Unterthema 3
Erklärung:
mindmap: Definiert eine Mindmap.root((Thema)): Zentrales Thema.- Einrückungen definieren die Hierarchie.
Anforderungs-Diagramm (Requirement Diagram)
Anforderungsdiagramme zeigen Anforderungen und ihre Beziehungen.
Beispiel:
requirementDiagram
requirement Anforderung1 {
id: 1
text: "Das System muss sicher sein."
}
element System {
type: software
}
System - satisfies -> Anforderung1
requirementDiagram
requirement Anforderung1 {
id: 1
text: "Das System muss sicher sein."
}
element System {
type: software
}
System - satisfies -> Anforderung1
Erklärung:
requirementDiagram: Definiert ein Anforderungsdiagramm.requirement: Definiert eine Anforderung.satisfies: Beziehung zwischen Element und Anforderung.
Gantt-Diagramm
Gantt-Diagramme visualisieren Projektpläne und Zeitachsen.
Beispiel:
gantt
title Projektplan
dateFormat YYYY-MM-DD
section Phase 1
Aufgabe 1 :a1, 2024-01-01, 7d
Aufgabe 2 :after a1, 3d
gantt title Projektplan dateFormat YYYY-MM-DD section Phase 1 Aufgabe 1 :a1, 2024-01-01, 7d Aufgabe 2 :after a1, 3d
Erklärung:
gantt: Definiert ein Gantt-Diagramm.dateFormat: Format für Datumsangaben.Aufgabe 1 :a1, 2024-01-01, 7d: Aufgabe 1 dauert 7 Tage ab dem 1. Januar 2024.
Zeitlinie (Timeline)
Zeitlinien zeigen Ereignisse in einer chronologischen Abfolge.
Beispiel:
timeline
title Wichtiges Ereignisse 2024 - 2025
2024 : Ereignis 1
2025 : Ereignis 2
timeline
title Wichtiges Ereignisse 2024 - 2025
2024 : Ereignis 1
2025 : Ereignis 2
Erklärung:
timeline: Definiert eine Zeitlinie.2024 : Ereignis 1: Ereignis im Jahr 2024.
Weiterführende Informationen
Weblinks
2 - PlantUML
Einführung
PlantUML ist ein Open-Source-Tool, das es ermöglicht, Diagramme aus einfachen Textbeschreibungen zu generieren. Es unterstützt eine Vielzahl von Diagrammtypen, sowohl UML-basierte als auch nicht-UML-basierte Diagramme. PlantUML ist besonders nützlich für Entwickler, Architekten und Projektmanager, da es die Erstellung und Pflege von Diagrammen vereinfacht und in viele Entwicklungsumgebungen integriert werden kann.
Mögliche UML-basierte Diagramme
Sequenz-Diagramm
Beschreibung: Ein Sequenzdiagramm zeigt die Interaktion zwischen Objekten in einer bestimmten Reihenfolge. Es wird häufig verwendet, um den Ablauf von Nachrichten zwischen Objekten in einem System zu visualisieren.
Beispiel in PlantUML:
@startuml
Alice -> Bob: Hallo!
Bob --> Alice: Hallo zurück!
@enduml
Erklärung:
->zeigt eine Nachricht von einem Objekt zum anderen.-->zeigt eine Antwort.
Ablauf-Diagramme
Beschreibung: Ablaufdiagramme (auch Aktivitätsdiagramme genannt) zeigen den Ablauf von Aktivitäten und Entscheidungen in einem Prozess. Sie sind besonders nützlich, um Geschäftsprozesse oder Algorithmen zu visualisieren.
Beispiel in PlantUML:
@startuml
start
:Aktivität 1; :Aktivität 2;
if (Bedingung?) then (Ja)
:Aktivität 3;
else (Nein)
:Aktivität 4;
endif
stop
@enduml
Erklärung:
startundstopmarkieren den Beginn und das Ende des Prozesses.ifundelsezeigen Entscheidungen.
Klassendiagramm
Beschreibung: Klassendiagramme zeigen die Struktur eines Systems durch Klassen, ihre Attribute, Methoden und die Beziehungen zwischen den Klassen.
Beispiel in PlantUML:
@startuml
class Auto {
-marke: String
-modell: String +fahren()
}
class Fahrer {
-name: String +lenken()
}
Auto "1" *-- "1" Fahrer
@enduml
Erklärung:
-zeigt private Attribute,+zeigt öffentliche Methoden.-->zeigt eine Assoziation zwischen Klassen.
Objektdiagramm
Beschreibung: Objektdiagramme zeigen die Instanzen von Klassen zu einem bestimmten Zeitpunkt und deren Beziehungen zueinander.
Beispiel in PlantUML:
@startuml
object Auto1 {
marke = "VW"
modell = "Golf"
}
object Fahrer1 {
name = "Max"
}
Auto1 --> Fahrer1
@enduml
Erklärung:
objectdefiniert eine Instanz einer Klasse.-->zeigt eine Beziehung zwischen Objekten.
Zustandsdiagramm
Beschreibung: Zustandsdiagramme zeigen die verschiedenen Zustände eines Objekts und die Übergänge zwischen diesen Zuständen.
Beispiel in PlantUML:
@startuml
[*] --> Aus
Aus --> An : einschalten
An --> Aus : ausschalten
@enduml
Erklärung:
[*]zeigt den Startzustand.-->zeigt einen Übergang zwischen Zuständen.
Mögliche nicht UML-basierte Diagramme
Visualisierung von JSON-/YAML-Daten
Beschreibung: PlantUML kann JSON- oder YAML-Daten visualisieren, um die Struktur und Hierarchie der Daten besser zu verstehen.
Beispiel in PlantUML:
@startjson
{
"name": "Max",
"alter": 30,
"adresse": {
"straße": "Hauptstraße 1",
"stadt": "Berlin"
}
}
@endjson
Erklärung:
@startjsonund@endjsonumschließen den JSON-Code.
Archimate-Diagramm
Beschreibung: Archimate-Diagramme werden verwendet, um Unternehmensarchitekturen zu modellieren. Sie zeigen die Beziehungen zwischen Geschäftsprozessen, Anwendungen und Technologien.
Beispiel in PlantUML:
@startuml
archimate #Business "Geschäftsprozess" as bp <<business-process>>
archimate #Application "Anwendung" as app <<application-component>>
bp --> app
@enduml
Erklärung:
archimatedefiniert ein Archimate-Element.-->zeigt eine Beziehung zwischen Elementen.
Gantt-Diagramm
Beschreibung: Gantt-Diagramme zeigen Projektpläne und den zeitlichen Ablauf von Aufgaben.
Beispiel in PlantUML:
@startgantt
[Aufgabe 1] lasts 5 days
[Aufgabe 2] starts at [Aufgabe 1]'s end and lasts 3 days
@endgantt
Erklärung:
lastsdefiniert die Dauer einer Aufgabe.starts atzeigt den Beginn einer Aufgabe relativ zu einer anderen.
Mindmap-Diagramm
Beschreibung: Mindmaps visualisieren Ideen und Konzepte in einer hierarchischen Struktur.
Beispiel in PlantUML:
@startmindmap
* Root
** Zweig 1
*** Blatt 1
** Zweig 2
@endmindmap
Erklärung:
*zeigt den Root-Knoten.**und***zeigen Unterknoten.
Netzwerkdiagramm
Beschreibung: Netzwerkdiagramme zeigen die Struktur und Verbindungen in einem Netzwerk.
Beispiel in PlantUML:
@startuml
node "Server" as s node
"Client" as c
s -- c
@enduml
Erklärung:
nodedefiniert einen Knoten im Netzwerk.--zeigt eine Verbindung zwischen Knoten.
Projektstrukturplan
Beschreibung: Ein Projektstrukturplan (PSP) zeigt die Hierarchie und Struktur eines Projekts.
Beispiel in PlantUML:
@startwbs
* Projekt
** Phase 1
*** Aufgabe 1
*** Aufgabe 2
** Phase 2
@endwbs
Erklärung:
*zeigt das Hauptprojekt.**und***zeigen Unterelemente.