Diagrams

There are two ways to work with diagrams:

1. Embed them in Markdown using code fences. This is the so-called text-to-diagram ↗ approach. For example:
   • Mermaid
   • Gnuplot diagram
   • Graphviz diagram
   • Astro D2 ↗
2. Use them as components inside MDX or Astro pages:
   • Timelime diagram
   • Euler diagram
   • Hasse diagram
   • Graph
   • Metro map diagram

Ideal solution

• It should be rendered as (inline) SVG on the server side:
  • No JavaScript required on the client side.
  • Users can use Cmd + F to search text.
• Style it with CSS variables (or CSS classes):
  • This would allow for implementing dark mode without JavaScript.
• Optionally add small JS to implement pan/zoom/drag.

Ideas

• Penrose ↗