fix: proper scaling for left-to-right Mermaid flowchart

[sghng]

📝 Summary

Fixes #6697

🔍 Description of Changes

Fix the scaling issue of Mermaid LR flowchart by removing width limit.

📋 Checklist

• I have read the contributor guidelines.
• For large changes, or changes that affect the public API: this change was discussed or approved through an issue, on Discord, or the community discussions (Please provide a link if applicable).
• I have added tests for the changes made.
• I have run the code and verified that it works as expected.

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
marimo-docs	Ready	Preview	Comment	Oct 6, 2025 4:44pm

[github-actions]

Thank you for your submission, we really appreciate it. Like many open-source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution. You can sign the CLA by just posting a Pull Request Comment same as the below format.

---

I have read the CLA Document and I hereby sign the CLA

---

_{You can retrigger this bot by commenting recheck in this Pull Request. Posted by the CLA Assistant Lite bot.}

[sghng]

I could use some help! The scaling is fixed but the left most portion is somehow hidden (even with scroll bar)...

[sghng]

I have read the CLA Document and I hereby sign the CLA

I have read the CLA Document and I hereby sign the CLA

[mscolnick]

@sghng - if you move the mermaid diagram outside of the vstack or remove the center does that change anything? im curious if one of those are messing with the styling. i would also suggest inspecting the browser console and playing with the styles there to see if we should add/override anything

[sghng]

@sghng - if you move the mermaid diagram outside of the vstack or remove the center does that change anything? im curious if one of those are messing with the styling. i would also suggest inspecting the browser console and playing with the styles there to see if we should add/override anything

Thanks for the tips! The problem is indeed with the .center() method call. But I'm still not sure how to have this fixed...

[sghng]

I can still use some help here with the problem of mo.center() :/

[mscolnick]

@sghng can you move it outside of the center? you might need to provide a max-width or justify-self

[sghng]

@sghng can you move it outside of the center? you might need to provide a max-width or justify-self

Move it outside works, but this is exactly what I want to fix.

However I think this problem is actually acceptable? If the image is long enough that it's clipped, then there's no need to center it anyway.

[mscolnick]

@sghng i wonder if this change could affect a lot of existing notebooks. Could you create a smoke test with various mermaid examples and compare the before and after?

You can commit this smoke test to marimo/_smoke_tests/...