2.1 KiB
Executable File
| title | date | description | summary | tags | |||
|---|---|---|---|---|---|---|---|
| Diagrams and Flowcharts | 2019-03-06 | Guide to Mermaid usage in Congo | It's easy to add diagrams and flowcharts to articles using Mermaid. |
|
Mermaid diagrams are supported in Congo using the mermaid shortcode. Simply wrap the diagram markup within the shortcode. Congo automatically themes Mermaid diagrams to match the configured colorScheme parameter.
Refer to the [mermaid shortcode]({{< ref "docs/shortcodes#mermaid" >}}) docs for more details.
The examples below are a small selection taken from the official Mermaid docs. You can also view the page source on GitHub to see the markup.
Flowchart
{{< mermaid >}} graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} B --> G[/Another/] C ==>|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[Car] subgraph Section C D E F G end {{< /mermaid >}}
Sequence diagram
{{< mermaid >}} sequenceDiagram autonumber par Action 1 Alice->>John: Hello John, how are you? and Action 2 Alice->>Bob: Hello Bob, how are you? end Alice->>+John: Hello John, how are you? Alice->>+John: John, can you hear me? John-->>-Alice: Hi Alice, I can hear you! Note right of John: John is perceptive John-->>-Alice: I feel great! loop Every minute John-->Alice: Great! end {{< /mermaid >}}
Class diagram
{{< mermaid >}} classDiagram Animal "1" <|-- Duck Animal <|-- Fish Animal <--o Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } {{< /mermaid >}}
Entity relationship diagram
{{< mermaid >}} erDiagram CUSTOMER }|..|{ DELIVERY-ADDRESS : has CUSTOMER ||--o{ ORDER : places CUSTOMER ||--o{ INVOICE : "liable for" DELIVERY-ADDRESS ||--o{ ORDER : receives INVOICE ||--|{ ORDER : covers ORDER ||--|{ ORDER-ITEM : includes PRODUCT-CATEGORY ||--|{ PRODUCT : contains PRODUCT ||--o{ ORDER-ITEM : "ordered in" {{< /mermaid >}}