Mermaid - Markdown diagramming example and references

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

%%{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

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