C4-Diagramm-Viewer und -Editor

Autoren
  • C4-Diagramm-Viewer und -Editor
Serie: UML and Software Architecture
Episoden: (2/7)

C4-Diagramm-Viewer und -Editor: MassiveDiag Playground

Einführung in C4-Modell-Diagramme mit MassiveDiag

Der MassiveDiag Playground bietet einen leistungsstarken C4-Diagramm-Viewer und -Editor, der textbasierte Diagramm-Code in Echtzeit in professionelle Architekturvisualisierungen umwandelt. Dieses Tool glänzt als Live-Editor für C4-Modelle, mit dem du deine Softwarearchitektur während der Entwicklung sofort sehen und verfeinern kannst.

Egal ob du:

  • C4-Diagrammcode in SVG für Web-Dokumentation umwandeln möchtest,
  • C4-Diagrammcode in Word-Dokumente für technische Spezifikationen exportieren willst,
  • C4-Modellcode in PNG für Präsentationen brauchst,
  • C4-Modelle als PDF für formale Dokumentation sichern möchtest,

MassiveDiag Playground bietet dir einen nahtlosen Workflow.

my Image

Jetzt den C4-Diagramm-Editor von MassiveDiag ausprobieren →

Was ist das C4-Modell?

Das C4-Modell ist ein mehrschichtiger Ansatz zur Visualisierung von Softwarearchitekturen, entwickelt von Simon Brown. Es bietet eine standardisierte Methode, um Softwaresysteme auf vier Ebenen zu dokumentieren:

  1. Kontextdiagramme – Das große Ganze und System-Interaktionen
  2. Containerdiagramme – Überblick über Hauptkomponenten und Technologien
  3. Komponentendiagramme – Logische Komponenten innerhalb von Containern
  4. Code-Diagramme – Detaillierte Implementierungen (optional)

MassiveDiag dient als leistungsstarker C4-Code-Diagramm-Generator und macht Architekturdiagramme für Entwickler und Softwarearchitekten zugänglich.

Erste Schritte mit C4-Diagramm-Code

Kontextdiagramm-Beispiel

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

title Systemkontext-Diagramm für ein Internet-Banking-System

Person(customer, "Bankkunde", "Ein Kunde der Bank mit persönlichen Konten.")
System(banking_system, "Internet-Banking-System", "Ermöglicht Kunden das Anzeigen von Kontoinformationen und das Tätigen von Zahlungen.")
System_Ext(mail_system, "E-Mail-System", "Internes Microsoft Exchange-System.")
System_Ext(mainframe, "Mainframe-Bankensystem", "Speichert alle Kernbankdaten zu Kunden, Konten, Transaktionen usw.")

Rel(customer, banking_system, "Nutzt")
Rel(banking_system, mail_system, "Versendet E-Mails über")
Rel(banking_system, mainframe, "Nutzt")
@enduml

my Image

Containerdiagramm-Beispiel

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

title Containerdiagramm für Internet-Banking-System

Person(customer, "Bankkunde", "Ein Kunde der Bank mit persönlichen Konten.")

System_Boundary(c1, "Internet-Banking-System") {
    Container(web_app, "Web-Anwendung", "Java und Spring MVC", "Liefert statische Inhalte und das Banking-SPA.")
    Container(spa, "Single-Page App", "JavaScript und Angular", "Stellt sämtliche Banking-Funktionen für Kunden bereit.")
    Container(mobile_app, "Mobile App", "Xamarin", "Bietet eine eingeschränkte Auswahl an Banking-Funktionen.")
    Container(api, "API-Anwendung", "Java und Spring MVC", "Stellt Funktionen über eine JSON/HTTPS-API bereit.")
    Container(database, "Datenbank", "Oracle", "Speichert Benutzerregistrierung, Authentifizierungsdaten, Logs usw.")
}

System_Ext(mainframe, "Mainframe-Bankensystem", "Speichert Kernbankdaten.")
System_Ext(email, "E-Mail-System", "Internes Microsoft Exchange-System.")

Rel(customer, web_app, "Nutzt", "HTTPS")
Rel(customer, spa, "Nutzt", "HTTPS")
Rel(customer, mobile_app, "Nutzt")
Rel(web_app, spa, "Liefert an Browser des Kunden")
Rel(spa, api, "Sendet API-Aufrufe an", "JSON/HTTPS")
Rel(mobile_app, api, "Sendet API-Aufrufe an", "JSON/HTTPS")
Rel(api, database, "Liest und schreibt", "JDBC")
Rel(api, mainframe, "Ruft API auf", "XML/HTTPS")
Rel(api, email, "Versendet E-Mails")
@enduml

my Image

So nutzt du MassiveDiag als C4-Diagramm-Viewer

1. Erstelle oder bereite deinen C4-Modellcode vor

Du kannst eigenen C4-Code schreiben oder KI-Tools wie ChatGPT nutzen, um Grundstrukturen zu generieren.

@startuml Basic Sample
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

Person(admin, "Administrator", $sprite="person2", $link="https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LayoutOptions.md#hide_person_sprite-or-show_person_spritesprite")
System_Boundary(c1, "Beispielsystem", $link="https://github.com/plantuml-stdlib/C4-PlantUML") {
    Container(web_app, "Webanwendung", "C#, ASP.NET Core 2.1 MVC", $descr="Vergleich mehrerer Twitter-Timelines", $link="https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/LayoutOptions.md")
}
System(twitter, "Twitter", $link="https://github.com/plantuml-stdlib/C4-PlantUML")

Rel(admin, web_app, "Verwendet", "HTTPS", $link="https://plantuml.com/link")
Rel(web_app, twitter, "Holt Tweets von", "HTTPS", $link="https://plantuml.com/link")
@enduml

2. Code in MassiveDiag Playground einfügen

Gehe zum MassiveDiag Playground – keine Installation oder Anmeldung erforderlich. Füge deinen Code ein oder lade ihn hoch.

my Image

3. Wähle "C4 PlantUML" als Diagrammtyp

Die Plattform erkennt automatisch den Diagrammtyp – alternativ kannst du "C4 PlantUML" manuell wählen.

my Image

4. Diagramm erstellen

Klicke auf "Diagramm erstellen", um deine Architektur visuell darzustellen.

my Image

5. Bearbeiten und Verfeinern

Nutze die Dual-Ansicht zum:

  • Live-Bearbeiten des Codes
  • Visuellen Anpassen des Diagramms

6. Exportiere in deinem bevorzugten Format

Du kannst exportieren als:

  • SVG für Web
  • PNG für Präsentationen
  • PDF für formale Dokumente
  • Word-Dokument für Spezifikationen
  • React JSX für Web-Integration

my Image

Erstelle jetzt dein erstes C4-Diagramm →

Praktische Einsatzbereiche für C4-Diagramme

Dokumentation von Softwarearchitektur

Dokumentiere dein Systemdesign auf mehreren Ebenen:

  • Kontextdiagramme für Stakeholder
  • Containerdiagramme für Entwickler
  • Komponentendiagramme für technische Planung

Technische Spezifikationen

Verwende C4-Diagramme für:

  • Systemvorschläge
  • Architekturentscheidungen (ADR)
  • Technische Anforderungen

Onboarding & Wissenstransfer

Erstelle visuelle Übersichten, um neuen Teammitgliedern zu helfen, das System zu verstehen:

  • Systemgrenzen und -interaktionen
  • Technologiestapel
  • Verantwortlichkeiten und Zusammenhänge

Häufige Fragen zu C4-Diagrammen und MassiveDiag

Was unterscheidet C4 von anderen Diagramm-Ansätzen?

C4 bietet einen standardisierten, hierarchischen Ansatz zur Dokumentation von Softwarearchitektur.

Brauche ich Programmierkenntnisse für den C4-Viewer?

Grundkenntnisse im Code-Verständnis sind hilfreich, aber nicht zwingend erforderlich.

Kann ich gemeinsam mit anderen an C4-Diagrammen arbeiten?

Ja – teile einfach den Diagramm-Code oder exportiere das Diagramm zur Weitergabe.

Wie kann ich C4-Diagramme in meine Dokumente einfügen?

  • Exportiere als SVG/PNG für Web und Präsentationen
  • Exportiere als PDF/Word für offizielle Unterlagen

Erstelle jetzt professionelle C4-Diagramme →

Teilen