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 ]
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 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

This post and/or images used in it may have been created or enhanced using generative AI tools for clarity and organization. However, all ideas, technical work, solutions, integrations, and other aspects described here are entirely my own.