C4-Diagramme

C4-Diagramm: Dies ist derzeit ein experimentelles Diagramm. Syntax und Eigenschaften können sich in zukünftigen Versionen ändern. Eine entsprechende Dokumentation wird bereitgestellt, sobald die Syntax stabil ist.

Die C4-Diagrammsyntax von Mermaid ist mit PlantUML kompatibel. Siehe Beispiel unten:

Code:

Ein Beispiel finden Sie im Quellcode demos/index.html

5 Arten von C4-Diagrammen werden unterstützt.

• Systemkontext (C4Context)
• Containerdiagramm (C4Container)
• Komponentendiagramm (C4Component)
• Dynamisches Diagramm (C4Dynamic)
• Bereitstellungsdiagramm (C4Deployment)

Weitere Informationen zum Schreiben von C4-Diagrammen finden Sie im verlinkten Dokument C4-PlantUML-Syntax.

C4-Diagramme haben einen festen Stil, z. B. CSS-Farbe, daher wird unter verschiedenen Skins kein unterschiedliches CSS bereitgestellt. updateElementStyle und UpdateElementStyle werden im letzten Teil des Diagramms geschrieben. updateElementStyle ist nicht mit der ursprünglichen Definition konsistent und aktualisiert den Stil der Beziehung, einschließlich des Offsets der Textbeschriftung relativ zur ursprünglichen Position.

Das Layout verwendet keinen vollautomatischen Layout-Algorithmus. Die Position von Formen wird angepasst, indem die Reihenfolge geändert wird, in der Anweisungen geschrieben werden. Daher ist es nicht geplant, die folgenden Layout-Anweisungen zu unterstützen. Die Anzahl der Formen pro Zeile und die Anzahl der Grenzen können mit UpdateLayoutConfig angepasst werden.

• Layout
  • Lay_U, Lay_Up
  • Lay_D, Lay_Down
  • Lay_L, Lay_Left
  • Lay_R, Lay_Right

Die folgenden unfertigen Funktionen werden kurzfristig nicht unterstützt.

• [ ] Sprite

• [ ] Tags

• [ ] Link

• [ ] Legende

• [x] Systemkontext

  • [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
  • [x] Person_Ext
  • [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
  • [x] SystemDb
  • [x] SystemQueue
  • [x] System_Ext
  • [x] SystemDb_Ext
  • [x] SystemQueue_Ext
  • [x] Boundary(alias, label, ?type, ?tags, $link)
  • [x] Enterprise_Boundary(alias, label, ?tags, $link)
  • [x] System_Boundary

• [x] Containerdiagramm

  • [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
  • [x] ContainerDb
  • [x] ContainerQueue
  • [x] Container_Ext
  • [x] ContainerDb_Ext
  • [x] ContainerQueue_Ext
  • [x] Container_Boundary(alias, label, ?tags, $link)

• [x] Komponentendiagramm

  • [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
  • [x] ComponentDb
  • [x] ComponentQueue
  • [x] Component_Ext
  • [x] ComponentDb_Ext
  • [x] ComponentQueue_Ext

• [x] Dynamisches Diagramm

  • [x] RelIndex(index, from, to, label, ?tags, $link)

• [x] Bereitstellungsdiagramm

  • [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
  • [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): Kurzname von Deployment_Node()
  • [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): Linksbündiger Node()
  • [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): Rechtsbündiger Node()

• [x] Beziehungstypen

  • [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
  • [x] BiRel (bidirektionale Beziehung)
  • [x] Rel_U, Rel_Up
  • [x] Rel_D, Rel_Down
  • [x] Rel_L, Rel_Left
  • [x] Rel_R, Rel_Right
  • [x] Rel_Back
  • [x] RelIndex * Kompatibel mit C4-PlantUML-Syntax, ignoriert jedoch den Indexparameter. Die Sequenznummer wird durch die Reihenfolge bestimmt, in der die Rel-Anweisungen geschrieben werden.

• [ ] Unterstützung für benutzerdefinierte Tags/Stereotypen und Aktualisierungen von Skin-Parametern

  • [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Fügt ein neues Element-Tag ein. Die Stile der getaggten Elemente werden aktualisiert und das Tag wird in der berechneten Legende angezeigt.
  • [ ] AddRelTag(tagStereo, ?textColor, ?lineColor, ?lineStyle, ?sprite, ?techn, ?legendText, ?legendSprite): Fügt ein neues Beziehungs-Tag ein. Die Stile der getaggten Beziehungen werden aktualisiert und das Tag wird in der berechneten Legende angezeigt.
  • [x] UpdateElementStyle(elementName, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Dieser Aufruf aktualisiert den Standardstil der Elemente (Komponente, ...) und erstellt keinen zusätzlichen Legenden Eintrag.
  • [x] UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY): Dieser Aufruf aktualisiert die Standardfarben der Beziehungen und erstellt keinen zusätzlichen Legenden Eintrag. Zwei neue Parameter, offsetX und offsetY, wurden hinzugefügt, um den Offset der ursprünglichen Position des Texts festzulegen.
  • [ ] RoundedBoxShape(): Dieser Aufruf gibt den Namen der abgerundeten Boxform zurück und kann als ?shape-Argument verwendet werden.
  • [ ] EightSidedShape(): Dieser Aufruf gibt den Namen der achtseitigen Form zurück und kann als ?shape-Argument verwendet werden.
  • [ ] DashedLine(): Dieser Aufruf gibt den Namen der gestrichelten Linie zurück und kann als ?lineStyle-Argument verwendet werden.
  • [ ] DottedLine(): Dieser Aufruf gibt den Namen der gepunkteten Linie zurück und kann als ?lineStyle-Argument verwendet werden.
  • [ ] BoldLine(): Dieser Aufruf gibt den Namen der fetten Linie zurück und kann als ?lineStyle-Argument verwendet werden.
  • [x] UpdateLayoutConfig(?c4ShapeInRow, ?c4BoundaryInRow): Neu. Dieser Aufruf aktualisiert die Standardwerte c4ShapeInRow(4) und c4BoundaryInRow(2).

Es gibt zwei Möglichkeiten, Parameter mit Fragezeichen zuzuweisen. Eine verwendet die nicht benannte Parameterzuweisungsmethode in der Reihenfolge der Parameter, die andere verwendet die benannte Parameterzuweisungsmethode, wobei der Name mit einem $ -Symbol beginnen muss.

Beispiel: UpdateRelStyle(from, to, ?textColor, ?lineColor, ?offsetX, ?offsetY)

UpdateRelStyle(customerA, bankA, "red", "blue", "-40", "60")
UpdateRelStyle(customerA, bankA, $offsetX="-40", $offsetY="60", $lineColor="blue", $textColor="red")
UpdateRelStyle(customerA, bankA, $offsetY="60")

C4-Systemkontextdiagramm (C4Context)

Code:

C4-Containerdiagramm (C4Container)

Code:

C4-Komponentendiagramm (C4Component)

Code:

C4-Dynamisches Diagramm (C4Dynamic)

Code:

C4-Bereitstellungsdiagramm (C4Deployment)

Code: