2.4 KiB
| title | date | description | summary | tags | ||||
|---|---|---|---|---|---|---|---|---|
| Diagramme und Flussdiagramme Flowcharts | 2019-03-06 | Leitfaden zur Verwendung von Mermaid in Congo | Mit Mermaid ist es einfach, Diagramme und Flussdiagramme zu Artikeln hinzuzufügen. |
|
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 ({{< ref "docs/shortcodes#mermaid" >}}).
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
{{< mermaid >}} 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 {{< /mermaid >}}
Sequenzdiagramm
{{< mermaid >}} 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 {{< /mermaid >}}
Klassendiagramm
{{< mermaid >}} 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() } {{< /mermaid >}}
Entitäts-Beziehungs-Diagramm
{{< mermaid >}} 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" {{< /mermaid >}}