Adding Mermaid To RIMdev.io

Written by Khalid Abuhakmeh

A picture is worth a thousand words, so I assume a diagram is worth a billion words. Expressing our ideas is important and our blog is an outlet to not only share with our teammates, but the broader community of readers. Mermaid is a simple markdown based diagramming language with a compelling result.

Placing the following html in our posts…

<div class="mermaid">
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</div>

results in the wonderful diagram below.

graph TD; A-->B; A-->C; B-->D; C-->D;

Additionally, I can create diagrams like this.

sequenceDiagram participant Alice participant Bob Alice->John: Hello John, how are you? loop Healthcheck John->John: Fight against hypochondria end Note right of John: Rational thoughts prevail... John-->Alice: Great! John->Bob: How about you? Bob-->John: Jolly good!