Simple Plain Text Diagrams in HTML
==================================

Since GitHub started supporting mermaid in their markdown I wanted to take another look at how to implement it on my site, I think it has some very nice...

Date: March 3, 2022

Since GitHub started supporting mermaid in their markdown I wanted to
take another look at how to implement it on my site, I think it has some
very nice opportunities in teaching, documenting, and explaining things.

The docs kinda just jumped right into their mermaid language and really
went through that in a lot of depth, and skipped over how to implement
it yourself, turns out its pretty simple. You just write mermaid syntax
in a div with a class of mermaid on it!

``` html

graph TD;
a --> A
A --> B
B --> C

```

> You just write mermaid syntax in a div with a class of mermaid on
> it!

The above gets me this diagram.

graph TD;
a --> A
A --> B
B --> C

This feels so quick and easy to start getting some graphs up and running, but
does lead to layout shift and extra bytes down the pipe. The best solution in
my opionion would be to forgo the js and ship svg. That said, this is do dang
convenient I will be using it for some things.