Diagramme und Flussdiagramme
·2 min
Inhaltsverzeichnis
Mermaid-Diagramme werden in Congo mit dem Shortcode mermaid unterstützt. Füge einfach das Diagramm-Markup in den Shortcode ein. Congo gestaltet Mermaid-Diagramme automatisch so, dass sie der Konfiguration des Parameters colorScheme entsprechen.
Weitere Details findest du in der Mermaid-Shortcode-Dokumentation.
Die folgenden Beispiele sind eine kleine Auswahl aus der offiziellen Mermaid-Dokumentation. Du kannst auch die Quelle der Seite auf GitHub aufrufen, um das Markup zu sehen.
Flussdiagramm #
graph TD
A[Weihnachten] -->|Erhalte Geld| B(Geh einkaufen)
B --> C{Lass mich nachdenken}
B --> G[/Sonstiges/]
C ==>|Eins| D[Laptop]
C -->|Zwei| E[iPhone]
C -->|Drei| F[Auto]
subgraph Section
C
D
E
F
G
end
Sequenzdiagramm #
sequenceDiagram
autonumber
par Action 1
Alice->>John: Hallo John, wie geht es dir?
and Action 2
Alice->>Bob: Hallo Bob, wie geht es dir?
end
Alice->>+John: Hallo John, wie geht es dir?
Alice->>+John: John, kannst du mich hören?
John-->>-Alice: Hi Alice, ich kann dich hören!
Note right of John: John ist aufmerksam
John-->>-Alice: Mir geht es gut!
loop Jede Minute
John-->Alice: Super!
end
Klassendiagramm #
classDiagram
Tier "1" <|-- Ente
Tier <|-- Fisch
Tier <--o Zebra
Tier : +int alter
Tier : +String geschlecht
Tier: +istSaeugetier()
Tier: +paaren()
class Ente{
+String schnabelFarbe
+schwimmen()
+quaken()
}
class Fisch{
-int groesseInFuss
-canFressen()
}
class Zebra{
+bool ist_wild
+rennen()
}
Entitäts-Beziehungs-Diagramm #
erDiagram
KUNDE }|..|{ LIEFER-ADRESSE : hat
KUNDE ||--o{ BESTELLUNG : platziert
KUNDE ||--o{ RECHNUNG : "zustaendig fuer"
LIEFER-ADRESSE ||--o{ BESTELLUNG : erhaelt
RECHNUNG ||--|{ BESTELLUNG : "deckt ab"
BESTELLUNG ||--|{ BESTELLTES-PRODUKT : enthaelt
PRODUKT-KATEGORIE ||--|{ PRODUKT : enthaelt
PRODUKT ||--o{ BESTELLTES-PRODUKT : "bestellt in"