I built this because I wanted my architecture diagrams to look more visually distinct in docs and presentations. It's a ~10 KB wrapper around Mermaid.js that applies an isometric SVG matrix transform, adds floating drop shadows, and hooks up viewBox-based pan/zoom.

  How it works: Mermaid renders a normal SVG, then mermaid-3d wraps everything in a <g
  transform="matrix(0.707 -0.5 0.707 0.5 0 0)"> — pure SVG, no CSS 3D, stays vector-sharp at any zoom.
  Shadows are an SVG filter (offset + gaussian blur + flood composite).

  Usage is one import change:

  - import mermaid from 'mermaid';
  + import mermaid from 'mermaid-3d';

  Supports all diagram types — flowchart, sequence, class, state, ER, gantt, pie, git graph, mindmap,
  timeline, journey. All five Mermaid themes work.

  Live demo: https://sunnydark.github.io/mermaid-3d/

  Would love feedback on the approach and what diagram types need polish.