Mermaid demo

Want to add diagrams, charts and visualizations in your post?
It is possible and guess what? It’s not that difficult thanks to Mermaid.
All you need to keep in mind is you’ll have to wrap your Mermaid markup in a div with class mermaid.
Here is a simple example of a basic flowchart,

<div class="mermaid">
graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
</div>

The above will produce this flowchart,

graph LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two]

One more example of Mermaid’s capabilities with a sequence diagram,

<div class="mermaid">
sequenceDiagram
    loop Daily query
        Alice->>Bob: Hello Bob, how are you?
        alt is sick
            Bob->>Alice: Not so good :(
        else is well
            Bob->>Alice: Feeling fresh like a daisy
        end

        opt Extra response
            Bob->>Alice: Thanks for asking
        end
    end
</div>

The result is following lovely & informative sequence diagram,

sequenceDiagram loop Daily query Alice->>Bob: Hello Bob, how are you? alt is sick Bob->>Alice: Not so good :( else is well Bob->>Alice: Feeling fresh like a daisy end opt Extra response Bob->>Alice: Thanks for asking end end

Informative and intuitive! A great combo, right!?!


 Date: July 7, 2021
 Tags:  mermaid demo

Next
KaTeX demo ⏩