Sunday 26 November 2023
Mermaid.js is incredibly cool
As mentioned [earlier](https://blog.themillhousegroup.com/2023/10/markdown-and-mermaid-on-blogger-in-2023.html) I'm now able to embed [Mermaid.js](https://mermaid.js.org/) diagrams directly into this blog and I'm going to just post *exclusively* about just how great Mermaid is. If you've __ever__ drawn a technical diagram in __anything__ from MS Paint through [Draw.io](https://www.drawio.com/) and even [Excalidraw](https://excalidraw.com/) and then had to convert the diagram into a PNG or JPEG in order to embed it into a document, knowing full-well that the slightest change is going to involve re-doing a significant chunk of that work, **get Mermaid into your life right now**.
### Mmmm Pie
I mean, look at this:
```mermaid
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
```
That's *four* lines of simple text:
```
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
```
### Flowcharts with flair
```mermaid
flowchart TD
subgraph First Approach
A[Start] --> B{Does it work?}
B -->|Yes| C[OK]
B --->|No| D[Rethink]
end
subgraph Second Approach
F[Start] --> G{Does it work?}
G -->|Yes| H[OK]
G -->|No| J[Oh dear]
end
D --> F
```
Is just:
```
flowchart TD
subgraph First Approach
A[Start] -- > B{Does it work?}
B -->|Yes| C[OK]
B --->|No| D[Rethink]
end
subgraph Second Approach
F[Start] --> G{Does it work?}
G -->|Yes| H[OK]
G -->|No| J[Oh dear]
end
D --> F
```
I really like how easy it is to declare those `subgraph` elements for visual grouping. And did you notice how a different length "arrow" hints to Mermaid to render a longer arc? Delicious.
Expect to see a lot more diagrams like these around here in the future!
Labels:
javascript,
markdown-enabled,
mermaid
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment
Comments welcome - spam is not. Spam will be detected, deleted and the source IP blocked.