Skip to main content
Version: Endpoint V2

Design System

Zoomable Mermaid Diagrams​

For complex Mermaid diagrams that benefit from zoom functionality, use the ZoomableMermaidV2 component instead of the standard Mermaid component.

Usage​

import ZoomableMermaidV2 from '@site/src/components/ZoomableMermaidV2';

<ZoomableMermaidV2
  value={`sequenceDiagram
    participant A as User
    participant B as Service
    A->>B: Request
    B-->>A: Response`}
/>;

Features​

  • Click to zoom: Click on any Mermaid diagram to open it in a modal zoom view
  • Blur backdrop: Sidebars and background content are blurred like image zoom
  • Dynamic zoom control: Ctrl/Cmd + scroll to zoom in/out within the modal
  • Responsive modal: Appropriately sized for desktop, tablet, and mobile
  • Multiple close options: Click backdrop, ESC key, or close button (top-right)
  • Hover indicator: Shows "🔍 Click to zoom" hint on hover
  • Theme aware: Works with both light and dark themes
  • Smooth animations: Backdrop blur and modal scale animations

When to Use​

Use ZoomableMermaidV2 for:

  • Complex sequence diagrams with many participants
  • Large architecture diagrams
  • Any diagram where details are hard to see at normal size

Use regular Mermaid for:

  • Simple diagrams that are easily readable at normal size
  • Diagrams that don't benefit from zoom (like small flowcharts)

Implementation​

The ZoomableMermaidV2 component wraps the standard Docusaurus Mermaid component and adds zoom functionality using a custom modal implementation with reliable cross-browser support.

The implementation uses var(--lz-z-zoom-modal) to ensure proper layering above the site's complex navbar, sidebar, and dropdown hierarchy.

Z-Index Architecture & Backdrop Handling​

The zoom modal seamlessly integrates with the site's complex layout:

Z-Index Hierarchy:

  • Critical dropdowns: 2147483647 (maximum possible)
  • Zoom modals: 2147483640 (just below maximum, above all content)
  • Search modal: 2000
  • Navbar layers: 1030-1031

Backdrop Behavior:

  • Uses the same var(--c-backdrop) as image zoom for consistent theming
  • Applies backdrop-filter: blur(20px) to hide sidebars behind blur
  • Full viewport coverage ensures sidebars are properly hidden
  • Smooth animations for backdrop blur and modal appearance

The implementation ensures zoom modals work seamlessly with the existing two-row navbar, fixed sidebar, and dropdown systems while providing the same visual experience as image zoom.