mirror of https://github.com/jpanther/congo.git
93 lines
2.4 KiB
Markdown
93 lines
2.4 KiB
Markdown
---
|
|
title: "Diagramme und Flussdiagramme Flowcharts"
|
|
date: 2019-03-06
|
|
description: "Leitfaden zur Verwendung von Mermaid in Congo"
|
|
summary: "Mit Mermaid ist es einfach, Diagramme und Flussdiagramme zu Artikeln hinzuzufügen."
|
|
tags: ["Mermaid", "Beispiele", "Diagramm", "Shortcodes"]
|
|
---
|
|
|
|
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 path="docs/shortcodes#mermaid" lang="en">}}).
|
|
|
|
Die folgenden Beispiele sind eine kleine Auswahl aus der [offiziellen Mermaid-Dokumentation](https://mermaid-js.github.io/mermaid/). Du kannst auch [die Quelle der Seite](https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/diagrams-flowcharts/index.de.md) 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 >}}
|