Einführung: Die Dokumentationsrevolution beginnt hier
In der schnelllebigen Welt der Softwareentwicklung gibt es eine unangenehme Wahrheit, der wir alle gegenüberstehen: unsere Dokumentation fast immer veraltet ist. Wir haben unzählige Stunden damit verbracht, uns mit Drag-and-Drop-Diagramm-Tools herumzuschlagen, sorgfältig Boxen und Pfeile auszurichten, nur um zuzusehen, wie unsere sorgfältig gestalteten Visualisierungen im selben Moment veralten, in dem sich der Code ändert.
Doch was wäre, wenn die Dokumentation mit der Entwicklung Schritt halten könnte? Was wäre, wenn das Erstellen professioneller Architekturdiagramme so einfach wäre wie das Schreiben einer Funktion?
Willkommen zur Diagram-as-Code-Revolution. Dieses Tutorial führt Sie durch VPasCode, die browserbasierte Plattform von Visual Paradigm, die die Art und Weise verändert, wie Teams Systemarchitekturdiagramme erstellen, teilen und pflegen. Indem Sie Diagramme als Code behandeln, werden Sie entdecken, wie Sie in Minuten – nicht Stunden – visuals in Publikationsqualität erzeugen und gleichzeitig sicherstellen, dass Ihre Dokumentation nahtlos mit Ihren Systemen weiterentwickelt wird.
Egal, ob Sie ein Entwickler sind, der Microservices dokumentiert, ein Architekt, der Stakeholdern präsentiert, oder ein DevOps-Ingenieur, der Infrastruktur kartiert: Dieser umfassende Leitfaden wird Sie mit den Fähigkeiten ausstatten, VPasCode zu beherrschen und das Dokumentationsniveau Ihres Teams zu steigern.
1. Erste Schritte: Ihr erstes Diagramm in 5 Minuten {#getting-started}
Keine Installation, kein Setup, nur Code
Eine der leistungsstärksten Funktionen von VPasCode ist die reibungslose Onboarding-Erfahrung ohne Hürden. Es gibt nichts zu installieren, keine Konten zu erstellen und keine komplexe Konfiguration. Erstellen wir jetzt Ihr erstes Diagramm.
Schritt-für-Schritt-Schnellstart:
-
Navigieren Sie zu VPasCode: Öffnen Sie Ihren Browser und besuchen Sie https://www.vpascode.com/editor/
-
Wählen Sie Ihre Engine: Wählen Sie aus dem Dropdown-Menü:
-
Mermaid – Am besten geeignet für Flussdiagramme und moderne Dokumentation
-
PlantUML – Ideal für UML und Unternehmensarchitektur
-
Graphviz – Perfekt für komplexe Netzwerktopologien
-
-
Laden Sie eine Vorlage: Klicken Sie auf “Beispiele” und wählen Sie eine Startvorlage aus
-
Bearbeiten und Vorschau: Ändern Sie den Code im linken Panel; beobachten Sie, wie sich Ihr Diagramm rechts sofort aktualisiert
-
Exportieren oder Teilen: Laden Sie als SVG/PNG herunter oder kopieren Sie die teilbare URL
Abbildung 1: VPasCode wandelt textbasierten Code sofort in professionelle Architekturdiagramme um
2. Verständnis der VPasCode-Oberfläche {#interface}
Bevor wir uns tief in die Syntax einarbeiten, machen wir uns mit dem Arbeitsbereich vertraut.
Abbildung 2: Die zweigeteilte VPasCode-Oberfläche – Code links, Live-Vorschau rechts
Aufschlüsselung der Oberflächenelemente:
Linkes Panel (Code-Editor):
-
Syntax-farbig markierter Texteditor
-
Zeilennummern zur einfachen Orientierung
-
Unterstützung für Autovervollständigung
-
Echtzeit-Fehlermarkierung
Rechtes Panel (Live-Vorschau):
-
Sofortige visuelle Darstellung
-
Steuerung für Verschieben und Zoomen
-
Vektorbasierte Anzeige (scharf in jeder Zoomstufe)
-
Elemente per Klick untersuchen
Obere Symbolleiste:
-
Engine-Auswahl (Mermaid/PlantUML/Graphviz)
-
Vorlagengalerie
-
Exportoptionen (SVG, PNG, PDF)
-
Teilen-Schaltfläche (erzeugt eine permanente URL)
-
Einstellungen und Präferenzen
Untere Statusleiste:
-
Status der Syntaxvalidierung
-
Zeichenanzahl
-
Zeitstempel des letzten Speichervorgangs
-
Referenz für Tastenkombinationen
Grundlegendes Arbeitsprinzip:
Code schreiben → Sofortige Vorschau anzeigen → Verfeinern → Export/Teilen
Diese unmittelbare Feedbackschleife macht VPasCode so leistungsstark. Es gibt keinen „Render“-Button zum Klicken, kein Warten auf die Kompilierung – nur reine, sofortige visuelle Rückmeldung beim Tippen.
3. Beherrschen von Mermaid.js: Flussdiagramme und mehr {#mermaid-tutorial}
Mermaid.js hat sich zum De-facto-Standard für entwicklerfreundliche Diagrammerstellung entwickelt. Seine Syntax ist intuitiv, lesbar und perfekt für Dokumentation, die neben dem Code lebt.
Tutorial 1: Erstellen eines Benutzer-Authentifizierungsflusses
Lassen Sie uns ein praktisches Diagramm für einen Authentifizierungsfluss erstellen, das Sie in Ihrer nächsten Sprint-Planung verwenden könnten.
Beispielcode:
graph TD
A[Benutzer gibt Anmeldeinformationen ein] --> B{Gültiges Format?}
B -->|Nein| C[Validierungsfehler anzeigen]
B -->|Ja| D[An Authentifizierungsdienst senden]
C --> A
D --> E{Anmeldeinformationen stimmen überein?}
E -->|Nein| F[401 Unauthorized zurückgeben]
E -->|Ja| G[JWT-Token generieren]
G --> H[Token in HttpOnly-Cookie speichern]
H --> I[Zum Dashboard weiterleiten]
F --> A
style A fill:#e1f5ff,stroke:#0066cc
style I fill:#d4edda,stroke:#28a745
style F fill:#f8d7da,stroke:#dc3545
Was dies demonstriert:
-
Entscheidungsknoten (Rauten mit
{?}) -
Richtungsfluss (
TD= Von oben nach unten) -
Individuelles Styling mit Farben
-
Selbstreferenzierende Schleifen
-
Klare Beschriftung
Tutorial 2: Diagramm der Microservices-Architektur
Erstellen wir nun eine komplexere Systemarchitektur, die Dienstbeziehungen zeigt.
Beispielcode:
graph LR
subgraph Client["Client-Schicht"]
Web[Web-App<br/>React]
Mobile[Mobile-App<br/>Flutter]
end
subgraph API["API-Gateway"]
Gateway[ Kong Gateway ]
Auth[Auth-Dienst]
Rate[Rate-Limiter]
end
subgraph Services["Geschäftsdienste"]
User[User-Dienst]
Order[Bestelldienst]
Product[Produkt-Dienst]
Payment[Zahlungsdienst]
end
subgraph Data["Datenschicht"]
UserDB[(User DB<br/>PostgreSQL)]
OrderDB[(Order DB<br/>MongoDB)]
ProductDB[(Product DB<br/>PostgreSQL)]
Cache[(Redis-Cache)]
end
Web --> Gateway
Mobile --> Gateway
Gateway --> Auth
Gateway --> Rate
Rate --> User
Rate --> Order
Rate --> Product
User --> UserDB
User --> Cache
Order --> OrderDB
Order --> Payment
Product --> ProductDB
Payment --> OrderDB
style Gateway fill:#ff6b6b,stroke:#c92a2a,color:white
style UserDB fill:#4ecdc4,stroke:#087f5b
style OrderDB fill:#4ecdc4,stroke:#087f5b
style ProductDB fill:#4ecdc4,stroke:#087f5b
style Cache fill:#ffe66d,stroke:#f08c00
Schlüsselkonzepte:
-
subgraphfür logische Gruppierung -
LRfür Links-nach-Rechts-Layout -
Mehrzeilige Beschriftungen mit
<br/> -
Datenbank-Zylinder-Notation mit
[( )] -
Komplexe Routing- und Beziehungsstrukturen
Tutorial 3: Sequenzdiagramm für die Auftragsverarbeitung
Sequenzdiagramme sind unerlässlich, um zeitliche Interaktionen zwischen Komponenten zu verstehen.
Beispielcode:
sequenceDiagram
autonumber
participant C as Kunde
participant W as Web-App
participant O as Auftragsdienst
participant P as Zahlungsdienst
participant I als Inventardienst
participant N als Benachrichtigungsdienst
C->>W: Artikel zum Warenkorb hinzufügen
C->>W: Auf "Zur Kasse gehen" klicken
W->>O: POST /orders {Artikel, Versand}
O->>I: Inventar reservieren
I-->>O: Reservierung bestätigt
O->>P: Zahlung verarbeiten
P-->>O: Zahlung erfolgreich
O->>O: Auftragsdatensatz erstellen
O->>N: Auftragsbestätigung senden
N-->>C: E-Mail-Bestätigung
O-->>W: 201 Created {orderId}
W-->>C: Erfolgsseite anzeigen
Note over O,P: Kritischer Abschnitt<br/>muss transaktional sein
rect rgba(200, 200, 0, 0.2)
O->>P: Karte belasten
P-->>O: Transaktions-ID
end
Funktionen von Sequenzdiagrammen:
-
autonumberfür automatische Schrittnummerierung -
participantDeklarationen -
->>für synchrone Aufrufe -
-->>für Antworten -
Note overfür Anmerkungen -
rectzum Hervorheben von Abschnitten
Tutorial 4: Gantt-Diagramm für Sprint-Planung
Mermaid unterstützt auch die Visualisierung von Projektzeitplänen.
Beispielcode:
gantt
Titel Sprint 24 - Authentifizierungsmodul
Datumsformat YYYY-MM-DD
Achsenformat %m/%d
Abschnitt Backend
API-Verträge entwerfen :done, des1, 2024-06-01, 2d
JWT-Dienst implementieren :active, des2, 2024-06-03, 3d
Datenbankmigration : des3, nach des2, 2d
Unit-Tests : des4, nach des3, 2d
Abschnitt Frontend
Login-Komponente : front1, 2024-06-03, 3d
Token-Verwaltung : front2, nach front1, 2d
Geschützte Routen : front3, nach front2, 2d
Abschnitt Integration
API-Integration : int1, nach des4, 2d
E2E-Tests : int2, nach int1, 3d
Sicherheitsaudit : int3, nach int2, 2d
4. PlantUML im Detail: Unternehmensarchitektur {#plantuml-tutorial}
PlantUML ist hervorragend für formale UML-Diagramme und die Dokumentation von Unternehmensarchitekturen geeignet. Lassen Sie uns praktische Beispiele erkunden.
Tutorial 1: Komponentendiagramm für eine E-Commerce-Plattform
Beispielcode:
@startuml
!theme plain
skinparam backgroundColor #FFFFFF
skinparam componentStyle uml2
titel "E-Commerce-Plattform - Komponentenarchitektur"
package "Präsentationsschicht" {
[Web-Frontend] as Web
[Mobile App] as Mobile
[Admin-Dashboard] as Admin
}
package "API-Schicht" {
[API-Gateway] as Gateway
[Authentifizierung] as Auth
[Rate Limiter] as RateLimit
}
package "Geschäftsdienste" {
[Katalogdienst] as Catalog
[Bestelldienst] as Order
[Zahlungsdienst] as Payment
[Versanddienst] as Shipping
[Benachrichtigungsdienst] as Notify
}
package "Datenschicht" {
database "Produkt-DB" as ProdDB
database "Bestell-DB" as OrderDB
database "Benutzer-DB" as UserDB
queue "Nachrichtenwarteschlange" as MQ
}
Web --> Gateway
Mobile --> Gateway
Admin --> Gateway
Gateway --> Auth
Gateway --> RateLimit
Gateway --> Catalog
Gateway --> Order
Order --> Payment
Order --> Shipping
Order --> Notify
Catalog --> ProdDB
Order --> OrderDB
Auth --> UserDB
Payment ..> MQ : Ereignisse veröffentlichen
Shipping ..> MQ : Ereignisse abonnieren
Notify ..> MQ : Ereignisse abonnieren
@enduml
Abbildung 3: PlantUML-Komponentendiagramm, das eine geschichtete Architektur zeigt
Tutorial 2: Bereitstellungsdiagramm für Cloud-Infrastruktur
Beispielcode:
Tutorial 3: C4-Modell – Container-Diagramm
Das C4-Modell eignet sich hervorragend zur Kommunikation von Softwarearchitekturen auf mehreren Abstraktionsebenen.
Beispielcode:
@startuml
!define AWS_COLOR FF9900
!define DOCKER_COLOR 0DB7ED
skinparam componentStyle uml2
skinparam backgroundColor #FAFAFA
titel “Cloud-Bereitstellungsarchitektur”
package “AWS-Region: us-east-1” {
package “Öffentliches Subnetz” {
[CloudFront CDN] as CDN
[Application Load Balancer] as ALB #AWS_COLOR
}
package “Privates Subnetz 1” {
[Web Server 1] as Web1 #DOCKER_COLOR
[Web Server 2] as Web2 #DOCKER_COLOR
}
package „Private Subnet 2″ {
[API-Server 1] als API1 #DOCKER_COLOR
[API-Server 2] als API2 #DOCKER_COLOR
}
package „Data Tier” {
database „RDS Primary” als RDS1 #AWS_COLOR
database „RDS Replica” als RDS2 #AWS_COLOR
[ElastiCache Redis] als Cache #AWS_COLOR
}
package „Storage” {
[S3-Bucket] als S3 #AWS_COLOR
[EFS-Freigabespeicher] als EFS #AWS_COLOR
}
}
Internet –> CDN
CDN –> ALB
ALB –> Web1
ALB –> Web2
Web1 –> API1
Web1 –> API2
Web2 –> API1
Web2 –> API2
API1 –> RDS1
API2 –> RDS1
RDS1 -[gestrichelt]> RDS2
API1 –> Cache
API2 –> Cache
API1 –> S3
API2 –> S3
Web1 –> EFS
Web2 –> EFS
@enduml
Tutorial 4: Aktivitätsdiagramm für Workflow
Beispielcode:
@startuml
|Kunde|
start
:Produkte durchsuchen;
:In den Warenkorb legen;
:Zur Kasse gehen;
|System|
:Warenkorbartikel validieren;
:Gesamtsumme berechnen;
if (Artikel verfügbar?) then (ja)
:Lagerbestand reservieren;
else (nein)
:Artikel nicht verfügbar anzeigen;
stop
endif
|Kunde|
:Versandadresse eingeben;
:Zahlungsart auswählen;
|System|
:Zahlung verarbeiten;
if (Zahlung erfolgreich?) then (ja)
:Bestellung erstellen;
:Bestätigungs-E-Mail senden;
:Lagerbestand aktualisieren;
else (nein)
:Zahlungsfehler anzeigen;
detach
endif
:Bestellung versenden;
:Bestellstatus aktualisieren;
stop
partition "Hintergrundjobs" {
:Rechnung erstellen;
:Lager benachrichtigen;
}
@enduml
5. Graphviz-Grundlagen: Visualisierung komplexer Netzwerke {#graphviz-tutorial}
Graphviz (DOT-Sprache) eignet sich hervorragend zur Visualisierung komplexer Beziehungen und Netzwerktopologien, bei denen Layout-Algorithmen eine Rolle spielen.
Tutorial 1: Abhängigkeitsgraph für Microservices
Beispielcode:
Abbildung 4: Graphviz-Visualisierung, die Microservice-Abhängigkeiten und Datenflüsse zeigt
digraph MicroservicesDependencies {
rankdir=TB;
node [shape=box, style="rounded,filled", fontname="Arial"];
edge [fontname="Arial", fontsize=10];
// Knotendefinitionen mit Farben
node [fillcolor="#e3f2fd"];
"API Gateway" [fillcolor="#ffcdd2"];
"Service Mesh" [fillcolor="#fff9c4"];
// Kernservices
"User Service";
"Auth Service";
"Order Service";
"Payment Service";
"Inventory Service";
"Notification Service";
"Analytics Service";
// Datenbanken
node [shape=cylinder, fillcolor="#c8e6c9"];
"User DB";
"Order DB";
"Product DB";
"Analytics DB";
// Externe Services
node [shape=box, fillcolor="#f3e5f5", style="dashed,filled"];
"Payment Gateway";
"Email Service";
"SMS Service";
// Beziehungen
"API Gateway" -> "Service Mesh";
"Service Mesh" -> "User Service";
"Service Mesh" -> "Auth Service";
"Service Mesh" -> "Order Service";
"Service Mesh" -> "Payment Service";
"Service Mesh" -> "Inventory Service";
"User Service" -> "User DB";
"Auth Service" -> "User DB";
"Order Service" -> "Order DB";
"Order Service" -> "Inventory Service";
"Order Service" -> "Payment Service";
"Inventory Service" -> "Product DB";
"Payment Service" -> "Payment Gateway";
"Notification Service" -> "Email Service";
"Notification Service" -> "SMS Service";
"Analytics Service" -> "Analytics DB";
"Order Service" -> "Notification Service" [style=dashed];
"Payment Service" -> "Notification Service" [style=dashed];
// Subgraphen zur Gruppierung
{
rank=same;
"User Service";
"Auth Service";
}
{
rank=same;
"Order Service";
"Payment Service";
"Inventory Service";
}
}
Tutorial 2: Organisationshierarchie
Beispielcode:
digraph OrgChart {
rankdir=TB;
node [shape=box, style="rounded,filled", fontname="Helvetica"];
edge [fontname="Helvetica", arrowsize=0.7];
// Führungsebene
CEO [label="CEOnJohn Smith", fillcolor="#1976d2", fontcolor="white"];
// C-Level
subgraph cluster_exec {
label="Executive Team";
style=dashed;
color="#90caf9";
CTO [label="CTOnSarah Johnson", fillcolor="#42a5f5"];
CFO [label="CFOnMichael Brown", fillcolor="#42a5f5"];
COO [label="COOnEmily Davis", fillcolor="#42a5f5"];
CPO [label="CPOnDavid Wilson", fillcolor="#42a5f5"];
}
// Engineering
subgraph cluster_eng {
label="Engineering";
style=filled;
color="#e3f2fd";
VP_Eng [label="VP Engineering", fillcolor="#64b5f6"];
subgraph cluster_eng_teams {
label="Teams";
style=dotted;
Backend [label="Backend Teamn(12 Ingenieure)", fillcolor="#bbdefb"];
Frontend [label="Frontend Teamn(8 Ingenieure)", fillcolor="#bbdefb"];
DevOps [label="DevOps Teamn(5 Ingenieure)", fillcolor="#bbdefb"];
QA [label="QA Teamn(6 Ingenieure)", fillcolor="#bbdefb"];
}
}
// Produkt
subgraph cluster_product {
label="Product";
style=filled;
color="#fff3e0";
VP_Product [label="VP Product", fillcolor="#ffb74d"];
PM1 [label="Product ManagernPlattform", fillcolor="#ffcc80"];
PM2 [label="Product ManagernMobile", fillcolor="#ffcc80"];
PM3 [label="Product ManagernAnalytik", fillcolor="#ffcc80"];
}
// Beziehungen
CEO -> CTO;
CEO -> CFO;
CEO -> COO;
CEO -> CPO;
CTO -> VP_Eng;
VP_Eng -> Backend;
VP_Eng -> Frontend;
VP_Eng -> DevOps;
VP_Eng -> QA;
CPO -> VP_Product;
VP_Product -> PM1;
VP_Product -> PM2;
VP_Product -> PM3;
// Gestrichelte Linien für Zusammenarbeit
PM1 -> Backend [style=dotted, color="#757575"];
PM2 -> Frontend [style=dotted, color="#757575"];
PM3 -> Backend [style=dotted, color="#757575"];
}
Tutorial 3: Datenflussdiagramm
Beispielcode:
digraph DataFlow {
rankdir=LR;
nodesep=1.0;
node [shape=ellipse, style="filled", fontname="Arial"];
edge [fontname="Arial", fontsize=9];
// Externe Entitäten
node [fillcolor="#ffccbc", shape=box];
Customer [label="Kunde"];
Vendor [label="Lieferant"];
Bank [label="Bankensystem"];
// Prozesse
node [fillcolor="#c5cae9", shape=circle];
P1 [label="Bestellung aufgeben"];
P2 [label="Zahlung verarbeiten"];
P3 [label="Lagerbestand aktualisieren"];
P4 [label="Rechnung erstellen"];
P5 [label="Bestellung versenden"];
P6 [label="Benachrichtigung senden"];
// Datenspeicher
node [fillcolor="#c8e6c9", shape=box3d];
D1 [label="Bestellungen DB"];
D2 [label="Lager DB"];
D3 [label="Kunden DB"];
D4 [label="Rechnungsdaten"];
// Datenflüsse
Customer -> P1 [label="Bestellanfrage"];
P1 -> D1 [label="Bestellung speichern"];
P1 -> D3 [label="Kunde aktualisieren"];
P1 -> P2 [label="Zahlungsdetails"];
P2 -> Bank [label="Zahlungsanfrage"];
Bank -> P2 [label="Zahlungsbestätigung"];
P2 -> P3 [label="Zahlung erfolgreich"];
P3 -> D2 [label="Lagerbestand reduzieren"];
P3 -> P4 [label="Bestellung bestätigt"];
P4 -> D4 [label="Rechnung speichern"];
P4 -> P6 [label="Rechnungsdaten"];
P3 -> P5 [label="Versandanfrage"];
P5 -> Vendor [label="Versandetikett"];
P5 -> P6 [label="Sendungsverfolgung"];
P6 -> Customer [label="Bestellbestätigungn+ Sendungsverfolgung"];
// Gestrichelte Linien für Abfragen
D1 -> P5 [label="Bestelldetails abrufen", style=dashed];
D2 -> P1 [label="Verfügbarkeit prüfen", style=dashed];
D3 -> P1 [label="Kundeninformationen abrufen", style=dashed];
}
6. Implementierungsmuster für die Praxis {#implementation-patterns}
Muster 1: Dokumentation der CI/CD-Pipeline
Beispielcode (Mermaid):
graph LR
subgraph Source["Quellcode-Verwaltung"]
Git[GitHub-Repository]
PR[Pull Request]
end
subgraph CI["Kontinuierliche Integration"]
Lint[Linting]
Test[Unit-Tests]
Build[Build-Artefakte]
Scan[Sicherheitsprüfung]
end
subgraph CD["Kontinuierliche Bereitstellung"]
Dev[Bereitstellung in Dev]
Stage[Bereitstellung in Staging]
E2E[E2E-Tests]
Prod[Bereitstellung in Produktion]
end
subgraph Monitor["Überwachung"]
Logs[Log-Aggregation]
Metrics[Metriken-Dashboard]
Alerts[Alarmierungssystem]
end
Git --> PR
PR --> Lint
Lint --> Test
Test --> Build
Build --> Scan
Scan --> Dev
Dev --> Stage
Stage --> E2E
E2E --> Prod
Prod --> Logs
Prod --> Metrics
Metrics --> Alerts
style Git fill:#f0f0f0,stroke:#333
style Prod fill:#d4edda,stroke:#28a745,color:black
style Alerts fill:#f8d7da,stroke:#dc3545,color:black
Muster 2: Datenbank-Schema-Design
Beispielcode (PlantUML):
Abbildung 5: Entity-Relationship-Diagramm, das das E-Commerce-Datenbankschema zeigt
@startuml
!define TABLE(name) entity name << (T,#FFAAAA) >>
!define PK(x) x <<PK>>
!define FK(x) x <<FK>>
TABLE(Users) {
PK(user_id) : INT
--
email : VARCHAR(255)
password_hash : VARCHAR(255)
created_at : TIMESTAMP
last_login : TIMESTAMP
status : ENUM
}
TABLE(Products) {
PK(product_id) : INT
--
sku : VARCHAR(50)
name : VARCHAR(255)
description : TEXT
price : DECIMAL(10,2)
stock_quantity : INT
category_id : INT
}
TABLE(Categories) {
PK(category_id) : INT
--
name : VARCHAR(100)
parent_id : INT
}
TABLE(Orders) {
PK(order_id) : INT
--
FK(user_id) : INT
order_date : TIMESTAMP
total_amount : DECIMAL(10,2)
status : ENUM
shipping_address : TEXT
}
TABLE(OrderItems) {
PK(item_id) : INT
--
FK(order_id) : INT
FK(product_id) : INT
quantity : INT
unit_price : DECIMAL(10,2)
}
TABLE(Payments) {
PK(payment_id) : INT
--
FK(order_id) : INT
payment_method : ENUM
transaction_id : VARCHAR(255)
amount : DECIMAL(10,2)
status : ENUM
processed_at : TIMESTAMP
}
Users ||--o{ Orders : places
Orders }o--|{ Users : belongs_to
Orders ||--|{ OrderItems : contains
OrderItems }o--|| Products : references
Products }o--|| Categories : categorized_in
Orders ||--o{ Payments : paid_by
note right of Users
Speichert Kundenkonten
und Authentifizierungsdaten
end note
note left of Orders
Haupttransaktionsdatensatz
mit Versanddetails
end note
@enduml
Muster 3: Visualisierung von Infrastructure as Code
Beispielcode (Mermaid):
graph TB
subgraph AWS["AWS-Cloud-Infrastruktur"]
direction TB
subgraph Networking["Netzwerk"]
VPC[VPC 10.0.0.0/16]
IGW[Internet Gateway]
NAT[NAT Gateway]
subgraph Public["Öffentliche Subnetze"]
ALB[Application Load Balancer]
Bastion[Bastion-Host]
end
subgraph Private["Private Subnetze"]
subgraph AppTier["Anwendungsebene"]
ECS1[ECS Task 1]
ECS2[ECS Task 2]
ECS3[ECS Task 3]
end
subgraph DataTier["Datenebene"]
RDS[RDS PostgreSQL<br/>Multi-AZ]
Redis[ElastiCache Redis]
end
end
end
subgraph Storage["Speicher"]
S3[S3 Buckets<br/>Assets & Backups]
EFS[EFS Shared Storage]
end
subgraph Security["Sicherheit"]
WAF[WAF-Regeln]
SG[Security Groups]
IAM[IAM-Rollen]
end
subgraph Monitoring["Überwachung & Logging"]
CW[CloudWatch]
XRay[AWS X-Ray]
SNS[SNS-Benachrichtigungen]
end
end
User[Endbenutzer] --> CloudFront[CloudFront CDN]
CloudFront --> WAF
WAF --> ALB
ALB --> ECS1
ALB --> ECS2
ALB --> ECS3
ECS1 --> RDS
ECS2 --> RDS
ECS3 --> RDS
ECS1 --> Redis
ECS2 --> Redis
ECS3 --> Redis
ECS1 --> S3
ECS2 --> S3
ECS3 --> S3
ECS1 --> EFS
ECS2 --> EFS
ECS3 --> EFS
ECS1 --> CW
ECS2 --> CW
ECS3 --> CW
RDS --> CW
Redis --> CW
CW --> SNS
style VPC fill:#f9f9f9,stroke:#333,stroke-width:2px
style ALB fill:#ff9900,stroke:#cc7a00,color:white
style RDS fill:#2e73b8,stroke:#1a4d80,color:white
style User fill:#95a5a6,stroke:#7f8c8d
Abbildung 6: Architekturdiagramm der AWS-Cloud-Infrastruktur
7. Fortgeschrittene Techniken: Styling und Anpassung {#advanced-techniques}
Mermaid Advanced Styling
Themenanpassung:
%%{init: {'theme':'base', 'themeVariables': {
'primaryColor': '#4CAF50',
'primaryTextColor': '#fff',
'primaryBorderColor': '#388E3C',
'lineColor': '#757575',
'secondaryColor': '#FFC107',
'tertiaryColor': '#fff'
}}}%%
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Process A]
B -->|No| D[Process B]
C --> E[End]
D --> E
style A fill:#2196F3,stroke:#1976D2,color:white
style E fill:#F44336,stroke:#D32F2F,color:white
PlantUML Skin-Parameter
Professionelles Styling:
@startuml
' Globales Styling
skinparam backgroundColor #FFFFFF
skinparam shadowing false
skinparam roundcorner 10
skinparam linetype ortho
' Komponente-Styling
skinparam component {
BackgroundColor #E3F2FD
BorderColor #1976D2
ArrowColor #1976D2
}
' Paket-Styling
skinparam package {
BackgroundColor #FFF3E0
BorderColor #F57C00
FontSize 14
}
' Notiz-Styling
skinparam note {
BackgroundColor #F1F8E9
BorderColor #689F38
FontColor #33691E
}
package "Frontend" {
component [React App]
component [Redux Store]
}
package "Backend" {
component [Node.js API]
component [Express Server]
database [MongoDB]
}
[React App] --> [Redux Store]
[Redux Store] --> [Node.js API]
[Node.js API] --> [Express Server]
[Express Server] --> [MongoDB]
note right of [Redux Store]
Zentrale Zustandsverwaltung
für die gesamte Anwendung
end note
@enduml
Graphviz-Erweiterte Attribute
Professionelles Netzwerkdiagramm:
digraph AdvancedStyling {
// Globale Graph-Attribute
graph [
bgcolor="#f8f9fa"
fontname="Helvetica"
fontsize=16
label="UnternehmenssystemarchitekturnProduktionsumgebung"
labelloc="t"
pad=0.5
ranksep=1.5
nodesep=1.0
];
// Standard-Node-Attribute
node [
fontname="Helvetica"
fontsize=11
style="filled,rounded"
penwidth=2
];
// Standard-Kanten-Attribute
edge [
fontname="Helvetica"
fontsize=9
penwidth=1.5
arrowsize=0.8
];
// Node-Cluster mit individuellem Styling
subgraph cluster_presentation {
label="Präsentationsschicht";
style=filled;
color="#e3f2fd";
fontcolor="#1565c0";
Web [label="Webanwendung<br/>React 18", fillcolor="#64b5f6", fontcolor="white"];
Mobile [label="Mobile App<br/>Flutter", fillcolor="#64b5f6", fontcolor="white"];
}
subgraph cluster_business {
label="Geschäftslogik-Schicht";
style=filled;
color="#fff3e0";
fontcolor="#e65100";
API [label="REST API<br/>Node.js", fillcolor="#ffb74d", fontcolor="black"];
GraphQL [label="GraphQL Gateway", fillcolor="#ffb74d", fontcolor="black"];
}
subgraph cluster_data {
label="Datenschicht";
style=filled;
color="#e8f5e9";
fontcolor="#2e7d32";
Primary [label="Primäre DB<br/>PostgreSQL 14", shape=cylinder, fillcolor="#a5d6a7"];
Replica [label="Lese-Replik<br/>PostgreSQL 14", shape=cylinder, fillcolor="#c8e6c9"];
Cache [label="Redis-Cache<br/>Cluster-Modus", shape=cylinder, fillcolor="#c8e6c9"];
}
// Kanten mit individuellem Styling
Web -> API [label="HTTPS/REST", color="#1976d2", fontcolor="#1976d2"];
Mobile -> API [label="HTTPS/REST", color="#1976d2", fontcolor="#1976d2"];
Web -> GraphQL [label="WebSocket", color="#1976d2", fontcolor="#1976d2", style=dashed];
API -> Primary [label="Lesen/Schreiben", color="#388e3c", fontcolor="#388e3c"];
API -> Cache [label="Cache", color="#f57c00", fontcolor="#f57c00", style=dashed];
GraphQL -> Replica [label="Nur lesen", color="#388e3c", fontcolor="#388e3c"];
Primary -> Replica [label="Streaming-Replikation", color="#757575", style=dotted];
}
8. Kollaborations- und Freigabe-Workflows {#collaboration}
Erstellen teilbarer Diagramme
Schritt-für-Schritt-Freigabe:
-
Freigabelink erstellen:
-
Klicken Sie auf den „Teilen“-Button in VPasCode
-
Kopieren Sie die generierte URL
-
Über E-Mail, Slack oder Dokumentation teilen
-
-
In Dokumentation einbetten:
## Systemarchitektur  Oder die interaktive Version einbetten: <iframe src="https://www.vpascode.com/embed/abc123xyz" width="100%" height="600"></iframe> -
Export für Präsentationen:
-
SVG für skalierbare Web-Grafiken
-
PNG (300 DPI) für PowerPoint/Keynote
-
PDF für gedruckte Dokumentation
-
Integration in Versionskontrolle
Diagramm-Code in Git speichern:
project-root/
├── docs/
│ ├── diagrams/
│ │ ├── architecture/
│ │ │ ├── system-overview.puml
│ │ │ ├── deployment-view.puml
│ │ │ └── data-flow.mmd
│ │ ├── processes/
│ │ │ └── user-journey.mmd
│ │ └── infrastructure/
│ │ └── aws-architecture.dot
│ └── README.md
└── src/
Beispiel-Git-Workflow:
# Diagramm erstellen
echo '@startuml
component "API Gateway"
@enduml' > docs/diagrams/architecture/gateway.puml
# Änderungen committen
git add docs/diagrams/architecture/gateway.puml
git commit -m "API-Gateway-Architekturdiagramm hinzufügen"
git push
# Teammitglieder können nun in VPasCode anzeigen
# durch Einfügen des Codes oder Laden über URL
Muster für Team-Kollaboration
Muster 1: Architektur-Entscheidungsdokumente (ADRs)
# ADR-007: Kommunikationsmuster für Microservices
## Kontext
Wir müssen standardisieren, wie Microservices kommunizieren.
## Entscheidung
Verwenden Sie asynchrone Nachrichtenübermittlung über RabbitMQ für die Kommunikation zwischen Diensten.
## Architekturdiagramm
```mermaid
graph LR
A[Service A] -->|Veröffentlichen| B[(RabbitMQ)]
B -->|Abonnieren| C[Service B]
B -->|Abonnieren| D[Service C]
Folgen
-
Verbesserte Entkopplung
-
Bessere Skalierbarkeit
-
Erhöhte Komplexität bei der Nachrichtenverarbeitung
**Muster 2: Dokumentation der Sprint-Planung**
Erstellen Sie lebendige Diagramme, die sich mit Ihrem Sprint weiterentwickeln:
graph TD
subgraph Sprint24["Sprint 24 - Laufend"]
Done[✅ Abgeschlossene Aufgaben]
InProgress[🔄 In Bearbeitung]
ToDo[📋 Zu erledigen]
Blocked[⛔ Blockiert]
end
Done --> Task1[Benutzer-Authentifizierungsmodul]
Done --> Task2[Datenbank-Migration]
InProgress --> Task3[API-Entwicklung]
InProgress --> Task4[Frontend-Integration]
ToDo --> Task5[Unit-Tests]
ToDo --> Task6[Dokumentation]
Blocked --> Task7[Drittanbieter-Integration]
style Done fill:#d4edda,stroke:#28a745
style InProgress fill:#fff3cd,stroke:#ffc107
style ToDo fill:#e2e3e5,stroke:#6c757d
style Blocked fill:#f8d7da,stroke:#dc3545
Fazit: Ihre Reise zur Exzellenz in der Dokumentation
Herzlichen Glückwunsch! Sie haben nun eine umfassende Reise durch VPasCode und die Diagram-as-Code-Methodik abgeschlossen. Lassen Sie uns darüber nachdenken, was Sie gelernt haben, und Ihren weiteren Weg planen.
Was Sie gemeistert haben
Im Laufe dieses Tutorials haben Sie Folgendes entdeckt:
-
Die Kraft textbasierter Diagramme: Sie haben gesehen, wie das Schreiben von Code zur Erstellung von Diagrammen die Mühe manueller Positionierung beseitigt, Konsistenz gewährleistet und die Wartbarkeit der Dokumentation verbessert.
-
Drei branchenübliche Engines: Sie verfügen nun über praktische Fähigkeiten in:
-
Mermaid.js für entwicklerfreundliche Flussdiagramme und moderne Dokumentation
-
PlantUML für UML- und Architekturdiagramme auf Unternehmensniveau
-
Graphviz für komplexe Netzwerktopologien und Visualisierungen von Beziehungen
-
-
Praxisnahe Muster: Von der Microservices-Architektur über Datenbankschemata bis hin zu CI/CD-Pipelines und Organigrammen – Sie haben gelernt, praktisch jedes System oder jeden Prozess zu visualisieren.
-
Zusammenarbeitsabläufe: Sie verstehen, wie Sie Diagramme über URLs teilen, in die Dokumentation einbetten, in Versionskontrollsysteme integrieren und die Generierung in CI/CD-Pipelines automatisieren.
-
Professionelles Styling: Sie können visuell hochwertige Grafiken mit benutzerdefinierten Themen, konsistentem Branding und angemessenen Detailgraden für verschiedene Zielgruppen erstellen.
Das große Ganze
Was VPasCode wirklich transformativ macht, ist nicht nur das Tool selbst, sondern der Paradigmenwechsel, den es darstellt. Indem Sie Diagramme als Code behandeln, sind Sie:
-
Die Lücke zu überbrücken zwischen Implementierung und Dokumentation
-
Architektur demokratisierenindem sie für alle Teammitglieder zugänglich gemacht wird
-
Wissen zukunftssicher machendurch textbasierte, versionierte Artefakte
-
Onboarding beschleunigenmit klarer, ausführbarer Dokumentation
-
Technische Schulden reduzierenindem Updates so einfach wie das Bearbeiten von Text gemacht werden
Ihre nächsten Schritte
Woche 1: Beginnen Sie klein
-
Wählen Sie ein bestehendes Diagramm in Ihrer Organisation aus
-
Erstellen Sie es in VPasCode mit Ihrer bevorzugten Engine neu
-
Teilen Sie es mit einem Kollegen und sammeln Sie Feedback
-
Speichern Sie den Code in Ihrem Projekt-Repository
Woche 2-3: Dynamik aufbauen
-
Erstellen Sie Vorlagen für die gängigen Diagrammtypen Ihres Teams
-
Etablieren Sie Namenskonventionen und Stilrichtlinien
-
Integrieren Sie Diagramm-Reviews in Ihren Code-Review-Prozess
-
Dokumentieren Sie Ihren „Diagram-as-Code“-Workflow
Monat 2: Skalieren und automatisieren
-
Richten Sie eine CI/CD-Integration für die automatische Diagrammerstellung ein
-
Erstellen Sie eine Diagrammbibliothek für Ihre Organisation
-
Schulen Sie Teammitglieder im Umgang mit dem Workflow
-
Messen Sie die eingesparte Zeit und die Verbesserungen der Dokumentationsqualität
Monat 3+: Machen Sie es zur Kultur
-
Setzen Sie sich für Diagram-as-Code in Architekturentscheidungen ein
-
Teilen Sie Erfolgsgeschichten mit der Führungsebene
-
Tragen Sie Vorlagen wieder zur Community bei
-
Erkunden Sie erweiterte Funktionen wie KI-gestützte Diagrammerstellung
Der Wettbewerbsvorteil
Organisationen, die Diagram-as-Code beherrschen, erzielen erhebliche Vorteile:
✅ Schnellere Entscheidungsfindung: Klare Visualisierungen beschleunigen das Verständnis und die Abstimmung
✅ Geringere Einarbeitungszeit: Neue Ingenieure erfassen Systeme schneller durch ausführbare Dokumentation
✅ Bessere Kommunikation mit Stakeholdern: Professionelle Diagramme überbrücken technische und geschäftliche Perspektiven
✅ Geringerer Wartungsaufwand: Textaktualisierungen sind schneller als das Neichnen von Visualisierungen
✅ Verbesserte Codequalität: Der Prozess des Diagrammierens deckt Architekturprobleme frühzeitig auf
Werden Sie Teil der Bewegung
Sie sind nun Teil einer wachsenden Gemeinschaft von Entwicklern, Architekten und Teams, die erkennen, dass Dokumentation keine Belastung sein muss. Mit VPasCode haben Sie die Werkzeuge, um sie zu einem Vermögenswert zu machen – eine lebendige, atmende Darstellung Ihres Systems, die sich gemeinsam mit Ihrem Code weiterentwickelt.
Abschließender Gedanke
Der beste Zeitpunkt, Diagramme als Code zu behandeln, war gestern. Der zweitbeste Zeitpunkt ist jetzt.
Ihr zukünftiges Selbst – und Ihre zukünftigen Teammitglieder – werden Ihnen für die Klarheit, Konsistenz und Sicherheit danken, die aus einer Dokumentation resultieren, die stets aktuell, stets zugänglich und stets präzise ist.
Bereit zu beginnen? Besuchen Sie VPasCode jetzt, fügen Sie Ihren ersten Diagrammcode ein und beobachten Sie, wie Text in Klarheit verwandelt wird. In weniger Zeit, als es zum Lesen dieses Abschlusses benötigt hat, werden Sie Ihr erstes Diagram-as-Code-Artefakt erstellt haben.
Die Zukunft der technischen Dokumentation ist da. Sie ist codegetrieben, browserbasiert und völlig kostenlos. Willkommen in der Revolution.
Über dieses Tutorial
Dieser umfassende Leitfaden wurde erstellt, um Entwicklungsteams dabei zu unterstützen, ihre Dokumentationspraktiken durch Diagram-as-Code zu modernisieren. Aufgebaut auf den zwei Jahrzehnten an Expertise für Unternehmensarchitektur von Visual Paradigm, repräsentiert VPasCode die Zukunft der technischen Kommunikation – zugänglich, wartbar und kostenlos.
Zuletzt aktualisiert: Juni 2026
Zielgruppe: Softwareentwickler, Systemarchitekten, DevOps-Ingenieure, technische Autoren und Entwicklungsteams
Voraussetzungen: Grundlegendes Verständnis von Softwarearchitekturkonzepten
Geschätzte Bearbeitungszeit: 2–3 Stunden für das vollständige Tutorial, 15 Minuten für den Schnellstart
Viel Spaß beim Erstellen von Diagrammen! 🎨📊