Mermaid Dokument

Appearance

Architekturdiagramm-Dokumentation (v11.1.0+) ​

Im Kontext von mermaid-js wird das Architekturdiagramm verwendet, um die Beziehungen zwischen Diensten und Ressourcen zu zeigen, die häufig in Cloud- oder CI/CD-Implementierungen zu finden sind. In einem Architekturdiagramm sind Dienste (Knoten) durch Kanten verbunden. Verwandte Dienste können innerhalb von Gruppen platziert werden, um besser zu veranschaulichen, wie sie organisiert sind.

Beispiel ​

Code:
mermaid

Syntax ​

Die Bausteine einer Architektur sind Gruppen, Dienste, Kanten und Verbindungen.

Für unterstützende Komponenten werden Symbole durch Umgeben des Symbolnamens mit () deklariert, während Beschriftungen durch Umgeben des Textes mit [] deklariert werden.

Um ein Architekturdiagramm zu beginnen, verwenden Sie das Schlüsselwort architecture-beta, gefolgt von Ihren Gruppen, Diensten, Kanten und Verbindungen. Während jeder der 3 Bausteine in beliebiger Reihenfolge deklariert werden kann, muss darauf geachtet werden, dass der Bezeichner zuvor von einer anderen Komponente deklariert wurde.

Gruppen ​

Die Syntax zur Deklaration einer Gruppe ist:

group {Gruppen-ID}({Symbolname})[{Titel}] (in {Eltern-ID})?

Zusammengefügt:

group public_api(cloud)[Öffentliche API]

erzeugt eine Gruppe, die als public_api identifiziert wird, das Symbol cloud verwendet und die Beschriftung Öffentliche API hat.

Darüber hinaus können Gruppen mithilfe des optionalen Schlüsselworts in innerhalb einer Gruppe platziert werden.

group private_api(cloud)[Private API] in public_api

Dienste ​

Die Syntax zur Deklaration eines Dienstes ist:

service {Dienste-ID}({Symbolname})[{Titel}] (in {Eltern-ID})?

Zusammengefügt:

service database1(database)[Meine Datenbank]

erzeugt den Dienst, der als database1 identifiziert wird, das Symbol database verwendet und die Beschriftung Meine Datenbank hat.

Wenn der Dienst zu einer Gruppe gehört, kann er durch das optionale Schlüsselwort in innerhalb dieser platziert werden.

service database1(database)[Meine Datenbank] in private_api

Kanten ​

Die Syntax zur Deklaration einer Kante ist:

{Dienst-ID}{{Gruppe}}?:{T|B|L|R} {<}?--{>}? {T|B|L|R}:{Dienst-ID}{{Gruppe}}?

Kantenrichtung ​

Die Seite des Dienstes, aus der die Kante herauskommt, wird angegeben, indem ein Doppelpunkt (:) an die Seite des Dienstes angehängt wird, die mit dem Pfeil verbunden ist, und L|R|T|B hinzugefügt wird.

Zum Beispiel:

db:R -- L:server

erzeugt eine Kante zwischen den Diensten db und server, wobei die Kante rechts von db und links von server herauskommt.

db:T -- L:server

erzeugt eine 90-Grad-Kante zwischen den Diensten db und server, wobei die Kante von oben von db und links von server herauskommt.

Pfeile ​

Pfeile können auf jeder Seite einer Kante hinzugefügt werden, indem < vor der Richtung links und/oder > nach der Richtung rechts hinzugefügt wird.

Zum Beispiel:

subnet:R --> L:gateway

erzeugt eine Kante mit dem Pfeil, der in den Dienst gateway zeigt.

Kanten aus Gruppen ​

Um eine Kante von einer Gruppe zu einer anderen Gruppe oder einem Dienst innerhalb einer anderen Gruppe zu erstellen, kann der {Gruppe}-Modifikator nach der Dienst-ID hinzugefügt werden.

Zum Beispiel:

service server[Server] in groupOne
service subnet[Subnet] in groupTwo

server{group}:B --> T:subnet{group}

erzeugt eine Kante, die aus groupOne, angrenzend an server, und in groupTwo, angrenzend an subnet, herausgeht.

Es ist wichtig zu beachten, dass Gruppen-IDs nicht zur Spezifikation von Kanten verwendet werden können und der {Gruppe}-Modifikator nur für Dienste innerhalb einer Gruppe verwendet werden kann.

Verbindungen ​

Verbindungen sind eine spezielle Art von Knoten, die als potenzieller 4-Wege-Split zwischen Kanten fungieren.

Die Syntax zur Deklaration einer Verbindung ist:

junction {Verbindungs-ID} (in {Eltern-ID})?
Code:
mermaid

Symbole ​

Standardmäßig unterstützt das Architekturdiagramm die folgenden Symbole: cloud, database, disk, internet, server. Benutzer können jedes der über 200.000 vorhandenen Symbole auf iconify.design verwenden oder ihre eigenen benutzerdefinierten Symbole hinzufügen, indem sie die Schritte hier befolgen.

Nachdem die Symbole installiert sind, können sie im Architekturdiagramm verwendet werden, indem das Format "name:icon-name" verwendet wird, wobei der Name der Wert ist, der bei der Registrierung des Symbolpakets verwendet wird.

Code:
mermaid