Skip to content

Read large diagrams with an overview and in-editor zoom #62

Description

@denny0223

md-render already renders Mermaid inline. In a tall workflow, the whole graph can be visible while the labels are too small to read. I would like to enlarge the labels and follow connections, then return to the document, all inside Neovim.

Requested feedback: Would you welcome either or both of these additions to ordinary document previews?

  1. Let diagram overviews use the preview window's available width and height, beyond the current defaults of an 80-column document width and a 25-row diagram height cap.
  2. Open the diagram under the cursor in an in-editor zoom/pan view, then return to the document.

These can be separate contributions. I can prepare focused PRs for either or both after scope agreement. Prose-width defaults can remain under #31; backend and key choices can follow the feature discussion.

Current behavior in v3.10.0

In v3.10.0 (00a83b8), the complete 15-node Tall workflow is already visible. The 25-row cap leaves unused vertical space in this example, while the labels remain small. Window-based sizing would allow a larger overview; zoom/pan would let me inspect details when fitting the whole graph is still too small.

v3.10.0: the complete Tall workflow at overview size

Prototype reading flow

29-second demo, fork a0e44b3: 2–6 s overview; 6–21 s Enter, zoom and follow the workflow from top to bottom; 21–29 s fit the whole graph, return to the document and Markdown source.

tall-workflow-demo.mp4

Both additions in this prototype currently require its Snacks image backend. The proposed reading flow can be discussed independently of that implementation choice.

The example uses a static Mermaid diagram in an ordinary document preview.

Prototype setup and limits

The focused zoom/pan view additionally requires ImageMagick (magick). It crops cached pixels; zoom does not regenerate sharper diagram text. Mermaid keeps its existing headless conversion process. This Snacks backend supports static images and diagrams, without animation/video playback.

Enter on an image or its caption opens a Neovim tab. + / - zoom, h/j/k/l pan, gg / G jump to the top / bottom, Ctrl-D moves down, f fits the whole graph, and q / Esc returns. \p is a demo mapping to :MdRender toggle.

The fork currently couples image width to prose width and caps image height at the window height minus six rows. Separating image sizing from prose-width defaults is proposed, not yet implemented. Image-infrastructure choices would need to align with #6.

The screenshot and video use the same Markdown, cached Mermaid PNG, terminal font and 120-column × 38-row Neovim area. Captured on Fedora with Kitty 0.47.1 and Neovim 0.12.5. Both use minimal configurations and regular-sized headings. The recording includes Ctrl-L redraws after view changes and excludes first conversion time.

Optional prototype code and configuration references

Source Markdown stays unchanged. Existing Enter behavior on folds and expandable code blocks is preserved.

Fitting and detail-view changes, followed by the navigation update. The optional backend is already present in the comparison base.

Optional configuration history: my public Neovim setup records the overview update and zoom/pan adoption. The recording uses the minimal setup above.

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