Mermaid - Tag - arleo.euhttps://www.arleo.eu/en/tags/mermaid/Mermaid - Tag - arleo.euHugo -- gohugo.ioenFri, 29 May 2026 20:00:00 +0200Hugo: freezing Mermaid diagrams to static dark/light SVGshttps://www.arleo.eu/en/posts/debug-mermaid-svg-freeze/Fri, 29 May 2026 20:00:00 +0200Jmrhttps://www.arleo.eu/en/posts/debug-mermaid-svg-freeze/

Problem

Mermaid diagrams on arleo.eu were rendering client-side via cdn.jsdelivr.net. Three concrete consequences:

  1. CSP constraint — script-src cdn.jsdelivr.net and worker-src cdn.jsdelivr.net become mandatory (Mermaid v11 uses Web Workers for its parsers).
  2. Render flash — the diagram appears after JS execution, creating a visible delay.
  3. Dark theme ignored — Mermaid initialized the SVG in light mode even when the site theme was dark.

The solution: generate SVGs at build time with mmdc, outside any browser context.

]]>Postmortem: TypeIt broken by Mermaid in LoveIt themehttps://www.arleo.eu/en/posts/postmortem-typeit-mermaid/Thu, 14 May 2026 09:46:31 +0200Jmrhttps://www.arleo.eu/en/posts/postmortem-typeit-mermaid/

TL;DR

The LoveIt theme’s typewriter animation (TypeIt) stopped working on the home after adding Mermaid diagrams to posts. Cause: a #id-1 DOM selector shared between both libraries. When Mermaid finds an orphan block in a home summary, its initialization crashes, and the JS init chain stops before reaching TypeIt. Fix: add `

]]>