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 | tags: [ github, documentation, architect, coder ]
Mermaid Flowchart
Always in search of good tooling - robust, compatible, extendible - for diagrams. Mermaid.js looked like something cool for code based diagramming.

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