Posts on plantimals on Nostr: **mermaid.js** markdown is a wonderful technology. so I was excited when a colleague ...

**mermaid.js**



markdown is a wonderful technology. so I was excited when a colleague told me there was a markdown language for graphs.
mermaid, which is a javascript library and a CLI, syntax looks like this:
graph LR
Beginning --> Middle
Middle --> End
which is rendered into this:


graph LR
Beginning --> Middle
Middle --> End


the LR part tells us it’s going left to right. we could swap in TD to make it go top to bottom:
graph TD
Beginning --> Middle
Middle --> End


graph TD
Beginning --> Middle
Middle --> End


all sorts of fun to be had
graph TD
P1([P1]) --> F1
P2([P2]) --> F1
F1([F1]) --> F2
F2([F2]) --> F3
F3([F3]) --> F4
F4([F4]) --> F5a([F5a])
F4 --> F5b([F5b])
F4 --> F5C([F5c])


graph TD
P1([P1]) --> F1
P2([P2]) --> F1
F1([F1]) --> F2
F2([F2]) --> F3
F3([F3]) --> F4
F4([F4]) --> F5a([F5a])
F4 --> F5b([F5b])
F4 --> F5C([F5c])



conclusion
all the fun of markdown, but for diagrams. I often find myself sketching out graphs, dependencies, flow charts, etc and this is a powerful tool for leveraging text into the realm of diagrams.**mermaid.js**



markdown is a wonderful technology. so I was excited when a colleague told me there was a markdown language for graphs.
mermaid, which is a javascript library and a CLI, syntax looks like this:
graph LR
Beginning --> Middle
…

https://plantimals.org/posts/mermaid/