Mermaid Architekturdiagramm-Spickzettel

Services, die Gruppen, in denen sie leben, und die Kanten dazwischen.

Jedes Bild auf dieser Seite wurde gezeichnet von

Mernyx, dem nativen Mermaid-Editor für macOS. Nicht von einem Browser mit Mermaid.js — demselben Renderer, den die App für ihre Leinwand nutzt.

Services

Die Klammern wählen das Icon, die eckigen Klammern wählen die Beschriftung, und die id ist das, worauf die anderen Zeilen zeigen.

architecture-beta
  service web(server)[Web app]
  service db(database)[Database]
  service cache(disk)[Cache]

Eine Gruppe ist eine Box, die Services enthält. Das Schlüsselwort in setzt einen Service hinein.

architecture-beta
  group api(cloud)[API]
  service web(server)[Web] in api
  service db(database)[DB] in api

Der Buchstabe vor dem Doppelpunkt sagt, von welcher Seite die Kante ausgeht, und der danach, auf welcher Seite sie ankommt.

architecture-beta
  service a(server)[Service A]
  service b(server)[Service B]
  service c(server)[Service C]
  a:R --> L:b
  a:B --> T:c

Ein Knotenpunkt ist ein Punkt, an dem sich mehrere Kanten treffen. Er wird ohne eigene Box gezeichnet.

architecture-beta
  service a(server)[Service A]
  service b(server)[Service B]
  junction hub
  a:R -- L:hub
  hub:R -- L:b