# C4 Software Dokumentation

##

## Lernziele

**Probleme** bei der Dokumentation von Software-Architekturen **verstehen**&#x20;

Die **vier Ebenen** des C4-Models **kennen**

Das C4 Modell auf Problemstellungen **anwenden können**

Software-Architekturen mit Hilfe des C4-Models **dokumentieren und kommunizieren können**

## Probleme bei der Dokumentation

Welches ist die beste/einfachste/verständlichste Art Software-Architekturen zu dokumentieren

So? Schnell und einfach aber klar und verständlich?

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2F4k7jDr1U1lBc0KDSOfJ0%2Fimage.png?alt=media&#x26;token=23b00445-5778-4d6a-a109-614b5e1bae01" alt=""><figcaption><p>Quelle: http://c4model.com/</p></figcaption></figure>

Besser so? Formal ja, aber genügend Detailgrad und unmißverständlich?

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2FkvZW1TeB3H18cIpzxDEb%2Fimage.png?alt=media&#x26;token=fd4b762f-c143-4798-9c1b-24dcca4d1e6e" alt=""><figcaption></figcaption></figure>

Noch besser so? Formal ja, mehr Detailgrad, aber genug Implementierungsetails? Was bedeuten die Pfeile?

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2FCBHnKIM3gS3i2uZTvPpc%2Fimage.png?alt=media&#x26;token=d414df03-fa9d-4727-b053-bc93683e4905" alt=""><figcaption></figcaption></figure>

Oder seher so? Autoamtisiert ja, aber klar und verständlich?&#x20;

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2Fu1YvtkxgKb1f8ibgxrE9%2Fimage.png?alt=media&#x26;token=95f1f70f-1844-4827-9ac1-a29b575adaa1" alt=""><figcaption></figcaption></figure>

Vielleicht aber doch so:&#x20;

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2FbWVzD2U2gHBwuOes5NHv%2Fimage.png?alt=media&#x26;token=bd7e060b-80f3-416b-b5f3-0b593f02f334" alt=""><figcaption><p>Twitter Architektur Zeichnung von Elon Musk, annotiert von Justin Hendrix, Luke Dubois and Mark Hansen. Original Miro board: <a href="https://miro.com/app/board/uXjVPBnTJmM=/">https://miro.com/app/board/uXjVPBnTJmM=/</a></p></figcaption></figure>

Ganz oft dann aber auch so, weil einfach und handhabbar und nicht formal:&#x20;

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2FxG0iNHORnf3Y4U6sS9i8%2Fimage.png?alt=media&#x26;token=71007f87-fa3d-43b5-bfa8-cc7d320115de" alt=""><figcaption></figcaption></figure>

**Problem formaler Methoden**: Diese sind "synthetisch" und müssen gelernt werden. Sie müssen von beiden Seiten verstande n werden. Daher einigt man ich meistens pragmatisch auf die Ebene, die beide Seiten verstehen.&#x20;

## Motivation

Visuelle Kommunikation im Baugewerbe: Hier gibt es Lageplane, Raumpläne, Bebauungspläne, Querschnittsansichten, detaillierte Standardzeichnungen und technische Zeichnungen, die von den ausführenden Gewerken in der Regel ohne Probleme gelsen und (fehlerfrei) umgesetzt werden können.&#x20;

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2FufAE0toa9sP82ha6zYcC%2Fimage.png?alt=media&#x26;token=48e23634-1f94-4ca5-9cbb-a21b7980cc3f" alt=""><figcaption><p>Querschnittsansicht</p></figcaption></figure>

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2F8Y4MZgkjECcJgDMXPnjQ%2Fimage.png?alt=media&#x26;token=2441a951-30d0-4f51-b7e8-4fbd0e82c001" alt=""><figcaption><p>Raumplan</p></figcaption></figure>

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2FzetC9xw6LxoQhXTlImmt%2Fimage.png?alt=media&#x26;token=a217071b-567e-4c47-ab8d-2a8240833691" alt=""><figcaption><p>Elektroninstallation</p></figcaption></figure>

Wie sieht hingegen die Kommunikation in Software-Projekten aus?&#x20;

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2FB9XyrnRlSolAUAXBryjl%2Fimage.png?alt=media&#x26;token=f5917057-4f62-422a-a2f1-0d6db1eb2047" alt=""><figcaption></figcaption></figure>

* Durcheinander von Boxen und Linien&#x20;
* Inkonsistente Notationen, Farben, Formen und Linien&#x20;
* Mehrdeutige Bezeichnungen
* Beziehungen nicht benannt
* Fehlende Technologieentscheidungen und Details
* Vermischte Abstraktionslevel

Aufgrund der Bewegung hin zu agilen Methoden wird weniger "Up Front Design" durchgeführt und es finden sich weniger Software-Diagramme in agilen Projekten.&#x20;

Wenn Diagramme genutzt werden sind diese oftmals&#x20;

* Unklar
* Mehrdeutig
* Verwirrend
* und haben vermischte Detailgrade

## C4 Modell&#x20;

Das [C4 Modell](https://c4model.com) nutzt so.g Code-Landkarten zum verschiedene Sichten (Detaillevel) auf eine Software-Architektur zu modellieren. Jede Sicht kann für einen ganz unterschiedlichen Zweck und eine unterschiedliche Zielgruppe genutzt werden.

**Context**

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2Fj00QB8j5v5qGqeWm33vg%2Fimage.png?alt=media&#x26;token=243b028d-4fdc-4f30-a12b-12dfd4a94084" alt=""><figcaption><p>Bildquelle https://maps.google.com</p></figcaption></figure>

In welchem Gesamtkontext befindet sich das System, an welche externen Systeme grenzt es an?&#x20;

Das Kontextdiagram beschreibt das Big Picture. Wie passen die Teile in den Gesamtkontext?&#x20;

**Container**

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2FwAjpHUEvN6Sm1jp915nV%2Fimage.png?alt=media&#x26;token=13fac8d9-17a1-47f7-aa49-2f06336f3714" alt=""><figcaption><p>Bildquelle https://maps.google.com</p></figcaption></figure>

Aus welchen Bestandeilen besteht das System. Im C4 Model sind hierbei Einheiten beschrieben, die Code hosten. Es kann sich dabei z.B. um auch einen Appliation Server handeln.

**Component**

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2FVU6zuZwUoYtIWBvUa2GX%2Fimage.png?alt=media&#x26;token=cb8257da-bd2d-4ad2-8523-01d8b374abd0" alt=""><figcaption><p>Bildquelle https://maps.google.com</p></figcaption></figure>

Wie sind die einzelnen Bestandteile aufgebaut. In der Regel sind dies Gruppen von zusammengehörigen Funktionen, die hinter einer wohldefinierten Schnittstelle verborgen sind.

**Code**

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2FGIEZaQIIZKFcA1daKHNy%2Fimage.png?alt=media&#x26;token=47ad6981-c5c4-4ef8-ae1f-f951561f02c8" alt=""><figcaption><p>Bildquelle Peter Schmelzle - Self-photographed, CC BY-SA 3.0</p></figcaption></figure>

Wie sehen die Bestandtiel des Systems im Detil aus. Hier werden Klassen, Schnittstelle, Objekte, Funktionen, Tabellen etc. innerhalb einer Komponente beschrieben.

Das C4 Model ist gedacht, um Software-Architekturen zu modellieren und zu kommunizieren. Es unterstützt einen “Abstraction First“ Ansatz und reflektiert die Denkweise von Entwicklern und Software-Architekten&#x20;

Es ist auch geeignet um Architekturen “Up Front” oder im Nachhinein zu dokumentieren.&#x20;

## C4 Metamodell

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2FOdmR16D3NNVhmmHDaNXc%2Fimage.png?alt=media&#x26;token=96fd2b6d-1da4-4a92-b837-36dfebf4f20c" alt=""><figcaption><p>C4 Sichten</p></figcaption></figure>

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2FSbRGAOoFjTmLBbz33m2n%2Fimage.png?alt=media&#x26;token=5eb7ada3-4089-4e6e-a882-a3a93acaf92f" alt=""><figcaption><p>Elemente und Bezeiheungen</p></figcaption></figure>

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2FxeoobeF9PBHk1T5Sy0yO%2Fimage.png?alt=media&#x26;token=4b4758b2-f480-4fad-98bf-84b600e0b005" alt=""><figcaption><p>Diagrammelemente</p></figcaption></figure>

## Level 1: System Context Diagram

* Scope: Ein einzelnes Software System Primäre&#x20;
* Elemente: Das im Scope befindliche Software System Unterstützende&#x20;
* Elemente: Personen und Software Systeme, die direkt mit dem im Scope befindlichen Software System in Verbindung&#x20;
* Zielgruppe: Technische und nicht-technische Personen innerhalb und außerhalb des Entwicklungs-Teams

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2FviJ1nN90D6ts4zo2UrNF%2Fimage.png?alt=media&#x26;token=51146f58-1ba9-40e0-9c3a-8044a0215c61" alt=""><figcaption></figcaption></figure>

## Level 2: Container Diagram

* Scope: Ein einzelnes Software System Primäre&#x20;
* Elemente: Der im Scope befindliche Container Unterstützende Elemente: Personen und Software System, die mit dem im Scope befindlichen Container in Verbindung stehen&#x20;
* Zielgruppe: Technische Personen innerhalb und außerhalb des Software Entwicklungs-Teams; einschließlich Software Architekten, Entwickler und Betriebs- und Supportpersonal #
* Hinweis: Container Diagramme treffen keine Aussage über die Deployment Szenarien, eventuelles Clustering, Replikations- und/oder Failover-Szenarien etc.

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2FeZfZRQ7KqeSw0O8so7TI%2Fimage.png?alt=media&#x26;token=b703f624-c383-42de-9b8b-3286a0f1577f" alt=""><figcaption></figcaption></figure>

## Level 3: Component Diagram&#x20;

* Scope: Ein einzelner Container Primäre Elemente: Komponenten innerhalbs des im Scope befindlichen Containers Unterstützende&#x20;
* Elemente: Containers (innerhalb des im Scope befindlichen Software Systems) + Personen und Software Systeme, die direkt mit den Komponenten in Verbindung stehen&#x20;
* Zielgruppe: Software Architekten and Entwickler

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2FqOVXcCw7b4FKiD6qDF5V%2Fimage.png?alt=media&#x26;token=a79f8039-ce27-4704-ab18-81ff478a076f" alt=""><figcaption></figcaption></figure>

## Level 4 Code Diagram

* Scope: Eine einzelne Komponente Primäre Elemente: Code&#x20;
* Elemente (z.B. Klassen, Interfaces, Objekte, Methoden und Funktionen, Datenbanken und Tabellen etc.) innerhalb der im Scope befindlichen Komponente&#x20;
* Zielgruppe: Software-Architekten und Entwickler

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2FZ9Ftn7DmbOhUfb2matlL%2Fimage.png?alt=media&#x26;token=ee5d6f7a-220b-4d42-8722-f03129cf3163" alt=""><figcaption></figcaption></figure>

## Zusätzliche Diagramme

Die 4 Level sind nicht immer ausreichend Wo nötig mit Komplementären ergänzen. Beispiele hierfür sind:

* Systemlandschaft: In der echten Welt sind Software Systeme schon lange nicht mehr voneinander isolier und zeigen z.B. wie Systeme innerhalb eines Unternehmen zusammenspielen&#x20;
* Dynamische Diagramme: UML Kollaborationsdiagramme, UML Sequenzdiagamme&#x20;
* Deployment Diagramme: UML Deployment Diagramme einschließlich Containers and Deployment Nodes

## Praxisbeispiel

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2FWNHIwaSUUyKWJjXHuekg%2Fimage.png?alt=media&#x26;token=76a8f488-5768-4c6f-9c13-090702abe36d" alt=""><figcaption><p>Quelle: https://docs.microsoft.com/en-us/azure/architecture/reference-architectures/app-service-web-app/scalable-web-app</p></figcaption></figure>

Anhand der Microsoft Referenz Architektur für Microsoft Azure App Service ist es schwer, die exkaten Komponenten und das Zusammenspiel der Systembestandteile zu verstehen und letztendlich umzusetzen.

Anhand eines Level 2 Diagrams lässt sich dies wesentlich klarer ausdrücken:&#x20;

<figure><img src="https://473130625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5oiw4AS2dLMzpdX8gjbT%2Fuploads%2FwF4tE0qj3yc4bcFBjXbe%2Fimage.png?alt=media&#x26;token=426f11ea-9e2d-4205-b33b-a1e0b83282c9" alt=""><figcaption><p>Quelle: https://azure-development.com/1918/09/11/save-the-world-from-powerpoint-cloud-solution-architects/</p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://prof.aheil.de/seks/c4.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
