Simple Plain Text Diagrams in HTML
source link: https://dev.to/waylonwalker/simple-plain-text-diagrams-in-html-52gp
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
til (58 Part Series)
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!
<script src='https://unpkg.com/[email protected]/dist/mermaid.min.js'></script>
<div class='mermaid'>
graph TD; a --> A A --> B B --> C
</div>
Enter fullscreen mode
Exit fullscreen mode
You just write mermaid syntax in a div with a class of mermaid on
it!
The above gets me this diagram.
I cannot add scripts to dev.to, but you can see the real results on my website
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK