fix: prevent mermaid LR diagrams from being squished

[AhmadYasser1]

Summary

LR (left-to-right) mermaid diagrams were compressed to fit the container width because flowchart.useMaxWidth defaults to true. Sets it to false so diagrams render at natural size, and wraps the output in a scrollable container.

Closes #6697

Test Plan

• Visual: LR flowcharts render at natural width with horizontal scrolling

[mscolnick]

@AhmadYasser1 this is great, thank you. any chance you can share a screenshot of the change (before and after)?

[AhmadYasser1]

Before

After

[mscolnick]

thanks for the screenshot! and all the effort on these PRs.

do you know if its possible to have something in between the two options? its full width without the overflow? no worries if its hard to figure out (i think myself and others have tried as well)

[AhmadYasser1]

tried a few approaches for a middle ground (height: auto, uniform scaling via viewBox) but they all end up with the same tiny squished nodes. the core issue is that mermaid calculates node sizes based on container width when useMaxWidth: true, so there's no way to get readable nodes without useMaxWidth: false.

the overflow-x: auto wrapper keeps it from breaking the layout and matches how other tools like github handle wide diagrams.

[mscolnick]

thanks for exhaustively checking @AhmadYasser1

matches how other tools like github handle wide diagrams.

This is good to know. I think consistency would make sense. I will defer to @Light2Dark or @manzt for some final thoughts or other ideas. Maybe we want to explore navigation buttons (zoom-in/out) or a toggle.

[Light2Dark]

responded on original issue, it feels like the issue is with .center rather than mermaid

[AhmadYasser1]

thanks @Light2Dark

.center() wraps content in hstack which creates a flex container, and the svg's width: 100% (from useMaxWidth: true) sizes relative to that constrained flex item.

updated the fix:

• useMaxWidth: false for flowcharts so svgs render at natural size (matches how github renders mermaid)

• overflow-x: auto + max-width: 100% wrapper so narrow diagrams still center normally, wide ones scroll only affects flowcharts, sequence/gantt unchanged.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
marimo-docs	Ready	Preview, Comment	Feb 14, 2026 0:02am