Skip to content

feat: Mermaid diagram inspect/zoom UX in preview #359

Description

@AmirTlinov

Problem

Large Mermaid diagrams in live-preview.nvim are hard to inspect when they are rendered inline in Markdown/AsciiDoc preview. Users currently need browser zoom hacks or horizontal scrolling, which is slow and inconsistent.

Goal

Add a first-class inspect/zoom UX for Mermaid diagrams so users can quickly open a larger focused view and read complex diagrams comfortably.

Proposed behavior

  • Show a per-diagram magnifier button on Mermaid diagrams in preview pages.
  • Clicking opens a fullscreen/lightbox modal with the diagram cloned at a readable scale.
  • Provide controls:
    • Zoom in
    • Zoom out
    • Reset zoom
    • Close
  • Preserve live-preview behavior across updates/rerenders.

Scope

In scope

  • Mermaid diagrams rendered in preview output (Markdown + AsciiDoc where Mermaid is supported).
  • UI controls and modal styling injected by preview runtime.
  • Idempotent runtime behavior (no duplicated controls/modals on rerender).

Out of scope

  • Global page zoom behavior.
  • Non-Mermaid content zooming.
  • New plugin dependencies.

Acceptance criteria

  • Each Mermaid diagram has an inspect (magnifier) trigger.
  • Clicking inspect opens a modal/lightbox with enlarged diagram.
  • Zoom in/out/reset/close actions work reliably.
  • Works for both primary Mermaid rendering path and fallback rendering path.
  • No duplicated controls/modals/styles after multiple live updates.
  • No Neovim startup regressions.

Test plan

  • Manual: Markdown/AsciiDoc files with small and very large Mermaid diagrams.
  • Runtime smoke: verify modal creation, controls wiring, and idempotency on repeated rerenders.
  • Regression: ensure existing :LivePreview start/close/pick flow is unaffected.

References

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions