Skip to main content

Astro diagrams

··

Task: add support for diagrams to Astro.

Ideally:

  • 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 #

Astro + Pintora #

Things that need to be implemented/checked:

  • Astro component to generate diagram
  • remark plugin to generate diagrams in place of code-fences
  • dark mode without JS
  • accessibility
  • cache - rendering can be expensive operation (actually do a benchmark), so it would make sense to use cache
    • Do we need hash function for keys?
    • It is probably good idea to use LRU
    • Do we need to persist cache to the disk? If yes, it may need TLRU
    • Maybe there is a way to use Astro’s cache
  • compatibility with Mermaid
    • show same diagrams side-by-side - Mermaid vs Pintora

Read more: Text to diagram, Digital garden as static website