Adding Mermaid To

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;

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!

Published March 03, 2017 by

undefined avatar
Khalid Abuhakmeh Director of Software Development (Former)

Suggested Reading