Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer’s view in any way.

Mermaid - Markdown diagramming example and references

posted on February 17, 2022 by Mark Roxberry
Mermaid Flowchart
Concern for man and his fate must always form the chief interest of all technical endeavors. Never forget this in the midst of your diagrams and equations. - Albert Einstein

Mermaid for Diagramming

Always in search of good tooling - robust, compatible, extensible - for diagrams. Mermaid.js looks like something cool for code based diagramming. This week, Github announced support for Mermaid.js in its documentation, Github markdown supports Mermaid.js.

Blogging flow chart example

Transform this text to a diagram:

%%{init: {"theme": "dark", "flowchart" : { "curve" : "basis" } } }%%
flowchart LR
A[Blog Idea] --> B{Do I have time?}
B --> |Of course| C[Topic?]
C --> D[Title?]
D --> E[Get Photo and Quote]
E --> F[Write!]
B --> |Nope| H[Make time!]
H --> B
Of course
Nope
Blog Idea
Do I have time?
Topic?
Title?
Get Photo and Quote
Write!
Make time!

References

Mermaid.js on Github

Gatsby Mermaid Tooling

Visual Studio Code Preview Extension

Image Credit

Photo by Kaleidico on Unsplash

Quote Credit

"Albert Einstein Quotes." BrainyQuote.com. BrainyMedia Inc, 2022. 17 February 2022. from BrainyQuote.com