Skip to main content

Astro diagrams

Update: see article about diagrams at Astro digital garden

Task: add support for diagrams to Astro.


  • it would be rendered as SVG on the server side
    • so no JS required on the client-side
    • people can use Cmd + F to search text
  • style it with CSS-variables (or CSS-classes)
    • so it would be possible to implement dark mode without JS
  • optionally add small JS to implement pan/zoom/drag

Most popular (at the moment) option for diagrams is Mermaid. There are other options though.

Options #

There are several ways to do it:

Dark mode (theme) #

  • (1) Congo theme has a good example on how to support dark mode with CSS variables. See congo/mermaid.js
  • (2) and (3)
    • prerender diagram in both variants (dark and light) and use picture + <source media="(prefers-color-scheme: dark)">
    • one can put <style type="text/css"> @media (prefers-color-scheme: dark) { ... } inside SVG
    • use CSS variables instead of actual colors in theme, but this is not possible neither in Pintora, neither in Mermaid, because they both manipulate colors (with tinycolor)

Pan/Zoom/Drag #

Read more: Text to diagram, BEOE