https://catinashell.de/tags/nojs/ Recent content in Nojs on Cat in a Shell Hugo en-us Sat, 11 Jul 2026 16:37:23 +0200 https://catinashell.de/posts/hugo-server-side-mermaid-rendering/ Sat, 11 Jul 2026 14:03:00 +0200 https://catinashell.de/posts/hugo-server-side-mermaid-rendering/ <p>This diagram is rendered during hugo build and served as a static svg.</p> <div class="mermaid-diagram"> <img class="mermaid-light" src="https://catinashell.de/svg_14587722597978374570.svg" alt="Diagram"> <img class="mermaid-dark" src="https://catinashell.de/svg_10056839910447859318.svg" alt="Diagram"> </div><p>Most websites just use the mermiad js library and let each user render the diagrams client-side. But this is a imo pretty trashy solution, since it requires each visitor to run javascript (which no one should do &hellip;; read more in my <a href="https://catinashell.de/about#nojs">about section</a>).</p> <style> .heading { text-decoration: none; } .heading:hover { color: rgba(200,200,255,0.7); } .heading-anchor { margin-left: -1em; position: absolute; opacity: 0; text-decoration: none; transition: opacity 0.15s; } h1:hover .heading-anchor, h2:hover .heading-anchor, h3:hover .heading-anchor, h4:hover .heading-anchor, h5:hover .heading-anchor, h6:hover .heading-anchor { opacity: 1; } </style> <a href="#how-to-make-hugo-render-mermaid-diagrams-during-build" class="heading"> <h2 id="how-to-make-hugo-render-mermaid-diagrams-during-build"> <div class="heading-anchor" aria-label="Link to this section"> # </div> How to make Hugo render Mermaid Diagrams during Build </h2> </a> <p>In the end you can just write in your markdown files:</p>