Diagrams

Today I learned about Mermaid, which lets you make diagrams in Markdown! You just make a code block with the type mermaid and then there are several different types of charts you can make. Super useful for throwing a quick chart together. However, in order for this to work on my site (which doesn’t natively support it unlike the VS Code Markdown preview), I need to create a Markdown Render Hook. That means creating layouts/_default/_markup/render-codeblock-mermaid.html (create that dir since it doesn’t exist yet, and the file name is very specific). This loads Mermaid.js from the jsdelivr CDN and makes sure it only loads once. I also need to check the blog theme to match light/dark mode. ...

September 20, 2026 · 2 min