Diagram shell: tall diagram overflows its container and overlaps the figure caption

What happened?

Summary

A tall flowchart rendered in the diagram shell overflows the bottom of its container: the lowest node paints over the Figure N caption below the diagram. The top of the diagram is contained correctly — only the bottom overflows.

Expected

The rendered diagram is clipped/confined to the diagram viewport at any zoom, and the figure caption below it is always fully legible.

Actual

At 143% — custom zoom, the bottom node overlaps the caption line making both the node label and the caption unreadable where they intersect. The vertical red arrow in the screenshot marks the overflow span: top nodes sit correctly inside the card, the bottom node does not.

Steps to reproduce

1. Render a tall multi-row flowchart (graph TD, ELK layout) in the diagram shell with a Figure N caption below the viewport.
2. Zoom in past fit (buttons, Ctrl/Cmd + wheel, or pinch) to a custom zoom where the rendered diagram height exceeds the shell height (screenshot shows 143%).
3. Observe the bottom of the diagram painting over the caption text.

Screenshot

Environment

• Template: diagram shell (mermaid-flowchart.html family) with - / + / Reset / Expand controls and bottom-left zoom label
• Mermaid 11, ELK layout
• Browser / OS: Chromium, Plannotator 0.27.15 (screenshot taken on macOS)

Notes

Looks like a viewport/canvas height accounting issue at custom zoom: once the scaled diagram is taller than the laid-out viewport, the excess paints past the container bottom instead of being clipped or panned within it, and since the caption sits in normal flow directly below, it gets covered. The top edge does not exhibit the same problem.

Plannotator version

0.27.15

OS

macOS

Agent

Other

Where did it happen?

Annotate