Diagram lightbox

Source: ViewEdit

@antora-supplemental/diagram-lightbox injects zoom/pan/lightbox JS+CSS for baked SVG figures and client Mermaid hosts. It replaces older hub mirrors of chassis diagram-zoom for Facto stack demos.

Baked PlantUML figure (Themed SVG)

Mermaid stays on the client path. PlantUML for this demo uses Kroki → @dev-centr/plantuml-svg-css-vars → Themed SVG so host dark mode can recolor sequence figures (raw Kroki embeds stay fixed-color).

Facto stack compose sequence

PlantUML source (regenerate with pnpm diagrams:demo-plantuml):

@startuml
skinparam backgroundColor transparent
actor User
participant "Valentus UI" as UI
participant "Facto stack" as Stack
User -> UI : lean chrome
UI -> Stack : compose extensions
Stack --> User : Mermaid client + lightbox + SoftNav
@enduml
Click the PlantUML SVG (or a Mermaid host on Client Mermaid) to open the lightbox. Ctrl/Cmd+wheel zooms in-article where supported.

Manual check (touchpad / wheel)

With the lightbox open over a diagram on this page:

  • Two-finger scroll (no Ctrl) should pan the diagram, not zoom the page behind the modal.

  • Pinch (or Ctrl/Cmd + wheel) should zoom toward the cursor.

  • Primary-button drag on the stage still pans.

In-article (lightbox closed): only Ctrl/Cmd+wheel zooms; plain scroll passes through to the page.

Regular image block

Valentus logo

Lightbox targets diagram hosts and .imageblock figures the extension registers — theme demo chrome stays out of Valentus core either way.