mermaid - diagram renderer markdown

Mermaid Live editor
https://www.mermaidchart.com/play
https://mermaid-js.github.io/mermaid-live-editor/edit

Documentation
https://mermaid.js.org/syntax/flowchart.html
https://jojozhuang.github.io/tutorial/mermaid-cheat-sheet/

Integration in MkDocks
https://squidfunk.github.io/mkdocs-material/reference/diagrams/

Examples

flowchart TB

	%% Colors %%
		linkStyle default stroke-width:3px
		classDef white fill:white,stroke:#000,stroke-width:2px,color:#000
		classDef yellow fill:#fffd75,stroke:#000,stroke-width:2px,color:#000
		classDef green fill:#93ff75,stroke:#000,stroke-width:2px,color:#000

	%% Databases %%
		DOCS("<img width="40">"):::white
		NOTES("<img width="40">"):::white
		TASKS("<img width="40">"):::white

	%% Documents Database %%

		DOCS ---- DOCTYPE("<img width="25"> Type"):::yellow
		DOCS ---- DOCCREATEDBY("<img width="25"> Created By"):::yellow

			%% Documents to Tasks %%

				DOCS --- DOCTASKS("<img width="25"> Tasks"):::green
				DOCTASKS --- TASKS

			%% Documents to Notes %%

				DOCS --- DOCNOTE("<img width="25"> Notes"):::green
				DOCNOTE --- NOTES

		DOCS ---- DOCSTATUS("<img width="25"> Status"):::yellow
		DOCS ---- DOCCREATEDTIME("<img width="25"> Created Time"):::yellow

	%% Links %%
		click DOCS "https://redgregory.notion.site/c154907e263f48fe979a792588f3875a?v=2aabab98f87f479da4b9a66d86d61b50"
		click NOTES "https://redgregory.notion.site/89bb914e098041e2bee59b8f3aa09e73?v=9d216b2217c041d3a16c9460062847f2"
		click TASKS "https://redgregory.notion.site/82b9e09f12b747f4b92604598d38084b?v=3b53f53088f344d99bda1e2682e52f54"



    n5@{ icon: "azure:virtual-router"} <--> n6["foo"]

mermaid CLI
https://github.com/mermaid-js/mermaid-cli

mmdc -i input.mmd -o output.svg

Alternative
https://diagrams.mingrammer.com/docs/getting-started/examples

graphic