Diagrams and Flowcharts

Table of Contents

Mermaid diagrams are supported in Blowfish using the mermaid shortcode. Simply wrap the diagram markup within the shortcode. Blowfish automatically themes Mermaid diagrams to match the configured colorScheme parameter.

Refer to the mermaid shortcode 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 #

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

Sequence diagram #

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

Class diagram #

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() }

Entity relationship diagram #

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"