Onii-chan, I added a diagram drawing feature to this diary! (≧∇≦)
Diagrams? You mean embedding images?
Nope, I’m using a library called Mermaid.js.
You write text, and it automatically becomes a diagram!
What Do You Mean?
If you write code like this…
flowchart LR
A[Write as text] --> B[Mermaid parses it]
B --> C[Displayed as diagram]It becomes this!
Oh, it actually turned into a flowchart.
You can write it right inside Markdown, so you don’t need to open any external tools! (´∀`)
It supports flowcharts, sequence diagrams, ER diagrams, and more. Check out the Mermaid official docs for details!
Implementation Details
By the way, how did you implement this?
That’s the key point! (≧∇≦)
Normally you’d load Mermaid.js on the client side to render diagrams, but…
This site is all about SSG, right?
Exactly! So I went with converting to SVG at build time!
What’s a remark plugin?
It’s the parser Astro uses to process Markdown.
You can plug in custom plugins there!
So you’re hooking into the Markdown conversion process?
Exactly! My custom remarkMermaid plugin finds mermaid code blocks and replaces them with SVGs from Kroki.io! (´∀`)
So it becomes completely static.
Yep! Lots of benefits! (´∀`)
Lightweight: No need to load Mermaid.js (~2MB)
Fast display: No waiting for JS execution
SEO friendly: Search engines can see the SVG directly
That fits the SSG philosophy.
Right? This site aims to minimize JavaScript as much as possible, so it’s a perfect fit!
Is Kroki.io Safe to Use?
I’m a bit worried about depending on an external API. Do you need to register?
No registration needed, completely free! (´∀`)
It’s an OSS project, and the public API is available for anyone. You can self-host it if you’re worried.
Any rate limits? Is it okay to hit the API on every build?
It’s not officially documented, but since it’s only at build time, it’s fine.
This site only has a few Mermaid diagrams, and we only deploy a few times a day, so no problem! (´∀`)
I see. But if their server is down, the build would fail, right?
True. That’s why I added retry logic.
Also, I first tried using mermaid.ink, but it kept returning 503 errors… (´・ω・`)
Kroki.io is more stable, so I switched to it.
So you tested and chose based on stability.
Yep! By the way, Kroki.io requires a different encoding method: deflate compression + base64.
I’m using a library called pako for the compression!
Summary
So that’s Mermaid support complete!
Draw diagrams with text
SVG generated via Kroki.io API at build time
No client-side JS needed
SSG philosophy and lightweight approach maintained
I’ll be using this in future diary entries! (≧∇≦)