# Mermaid Architekturdiagramm-Spickzettel

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

## Services

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

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

![Drei Service-Boxen: eine Web-App mit Server-Icon, eine „Database“ mit Datenbank-Icon und ein „Cache“ mit Platten-Icon.](/diagrams/architecture/services.svg)

## Gruppen

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

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

![Eine Gruppe mit der Beschriftung API und zwei Services darin, Web und DB.](/diagrams/architecture/groups.svg)

## Kanten

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

```mermaid
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
```

![Drei Service-Boxen. Service A ist mit Service B rechts daneben verbunden und mit Service C darüber, wobei jeder Pfeil von der passenden Seite ausgeht.](/diagrams/architecture/edges.svg)

## Knotenpunkte

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

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

![Zwei Service-Boxen, verbunden über einen unbeschrifteten Punkt in der Mitte.](/diagrams/architecture/junction.svg)

## In Mernyx zeichnen

Öffne eine .mmd-Datei, verschiebe einen Knoten auf dem Canvas, und der Quellcode kommt mit. Nativ auf macOS, ohne Browser dazwischen.