Elemente & Styling
Jede C4-Ebene unterstützt verschiedene Elementtypen. Diese zu verstehen hilft Ihnen, genaue und aussagekräftige Architekturdiagramme zu erstellen.
Elemente nach Ebene
Ebene 1: Systemkontext
Die höchste Ebene zeigt Ihr System in seiner Umgebung:
| Element | Beschreibung |
|---|---|
| Softwaresystem | Ihr Hauptsystem oder Produkt |
| Person | Benutzer oder Personas, die mit dem System interagieren |
| Externes System | Drittsysteme, mit denen Ihr System integriert |
Ebene 2: Container
Zeigt die technischen Bausteine innerhalb eines Systems:
| Element | Beschreibung |
|---|---|
| Service | Backend-Services oder Microservices |
| API | REST-, GraphQL- oder gRPC-APIs |
| Web-App | Frontend-Webanwendungen |
| Mobile App | iOS- oder Android-Anwendungen |
| Datenbank | SQL- oder NoSQL-Datenbanken |
| Cache | Redis, Memcached, etc. |
| Nachrichtenwarteschlange | Kafka, RabbitMQ, SQS, etc. |
| Dateispeicher | S3, Blob Storage, Dateisysteme |
Ebene 3: Komponente
Zeigt die interne Struktur eines Containers:
| Element | Beschreibung |
|---|---|
| Controller | HTTP-Request-Handler |
| Handler | Event- oder Nachrichtenhandler |
| Repository | Datenzugriffsschicht |
| Adapter | Adapter für externe Systeme |
| Middleware | Request/Response-Prozessoren |
| Utility | Hilfsfunktionen und Utilities |
| Model | Domain-Modelle und Entitäten |
Ebene 4: Code
Zeigt Implementierungsdetails:
| Element | Beschreibung |
|---|---|
| Klasse | Objektorientierte Klassen |
| Interface | Interface-Definitionen |
| Struct | Datenstrukturen |
| Funktion | Eigenständige Funktionen |
| Methode | Klassenmethoden |
| Enum | Aufzählungstypen |
| Konstante | Konstante Werte |
| Typ | Typdefinitionen |
Elemente hinzufügen
Mit dem Hinzufügen-Button
- Klicken Sie auf Hinzufügen in der Werkzeugleiste
- Wählen Sie den Elementtyp
- Geben Sie Name und Beschreibung ein
- Klicken Sie auf Erstellen
Mit dem Kontextmenü
- Rechtsklick auf leere Leinwand
- Wählen Sie [Elementtyp] hinzufügen
- Füllen Sie die Details aus
- Klicken Sie auf Erstellen
Drag and Drop
Für Container und Komponenten können Sie Elemente direkt aus der Seitenleiste auf die Leinwand ziehen.
Elemente stylen
Auf Stil-Optionen zugreifen
Rechtsklick auf ein beliebiges Element für Styling-Zugriff:
- Hintergrundfarbe: Füllfarbe des Elements
- Rahmenfarbe: Konturfarbe
- Textfarbe: Label-Farbe
- Icon: Visuelles Icon, das das Element repräsentiert
Farbpalette
Archyl bietet eine kuratierte Farbpalette:
- Blautöne: Services, APIs
- Grüntöne: Datenbanken, Speicher
- Violetttöne: Externe Systeme
- Orangetöne: Nachrichtenwarteschlangen, Asynchron
- Grautöne: Utilities, Infrastruktur
Tipps für konsistentes Styling
- Verwenden Sie die gleiche Farbe für ähnliche Elementtypen
- Stimmen Sie Farben mit den Konventionen Ihrer Organisation ab
- Berücksichtigen Sie farbenblindfreundliche Paletten
- Dokumentieren Sie Ihr Farbschema in den Projektnotizen
Overlays
Overlays sind farbige visuelle Gruppierungen, die helfen, Elemente in Ihrem Diagramm zu organisieren.
Ein Overlay erstellen
- Klicken Sie auf Hinzufügen und wählen Sie Overlay
- Geben Sie ihm einen Namen (z.B. "Backend-Services", "Frontend-Apps")
- Wählen Sie eine Farbe aus der Palette
- Klicken Sie auf Erstellen
Overlays verwenden
- Ziehen Sie Elemente in den Overlay-Bereich
- Das Overlay bietet visuelle Gruppierung
- Overlays sind ebenenspezifisch
- Verschiedene Gruppierungen auf jeder C4-Ebene
Overlay-Anwendungsfälle
- Nach Teamverantwortung gruppieren
- Nach Deployment-Einheit gruppieren
- Nach Domain gruppieren (DDD Bounded Contexts)
- Kritische Pfadkomponenten hervorheben
- Sicherheitsgrenzen zeigen
Overlay Best Practices
- Halten Sie es einfach: Maximal 3-5 Overlays pro Ebene
- Verwenden Sie aussagekräftige Namen: "Zahlungs-Domain" nicht "Gruppe 1"
- Konsistente Farben: Gleiche Overlay-Farbe über Ebenen hinweg für verwandte Gruppierungen
- Nicht überlappen: Vermeiden Sie verwirrend überlappende Overlays
Beziehungen stylen
Beziehungen können auch gestylt werden:
| Eigenschaft | Optionen |
|---|---|
| Farbe | Elementfarben anpassen oder neutral verwenden |
| Linienstil | Durchgezogen, gestrichelt, gepunktet |
| Linienbreite | Dünn, mittel, dick |
| Pfeilstil | Standard, hohl, keine |
Tipps für Beziehungsstyling
- Verwenden Sie gestrichelte Linien für asynchrone Kommunikation
- Verwenden Sie dickere Linien für primäre Datenflüsse
- Farbcodierung nach Protokoll (HTTP, gRPC, Events)
Nächste Schritte
- Beziehungen - Elemente verbinden
- C4-Modell Übersicht - Das Modell verstehen
- Leitfaden für das erste Projekt - Diese Konzepte anwenden