mermaid state diagrams scale past the borders of their containers
Summary
Mermaid state diagrams have a tendency to extend past the border of their containers, which produces a UX where the user is forced to scroll horizontally to see the whole graph, which is almost certainly not what we want.
While it's nice for detailed and intricate graphs to be zoomed-in so users can see it, I've had graphs that are not intricate, just large, that still render this way.
In my testing, this bug appears to uniquely affect state diagrams. Other graphs I've tested render as expected - within the border of their containers.
The only workaround I've found so far is to wrap the affected diagram in <details> tags, which will typically force the graph to render only within the box, but the scrolling-heavy UX is still here, so this only really works to prevent huge mermaid graphs from polluting the screen. This is also obviously a hackey solution, and isn't what we want the users to turn to.
Steps to reproduce
- Create a new snippet
- Fill the snippet with different mermaid diagrams (for example, the contents of this snippet should suffice)
- Click preview, see bug
- Submit the snippet
- View the submitted snippet, see bug
Example Project
This snippet contains large flowcharts, sequence diagrams, and state diagrams. When viewed, it's clear that the state diagram isn't scaling the same way that the flowcharts and sequence diagrams are.
What is the current bug behavior?
State diagrams will scale past the border of the containers they're in, if allowed.
What is the expected correct behavior?
State diagrams should only be allowed to scale within the border of their containers.
Relevant logs and/or screenshots
Here are some screenshots from the linked snippet for historical accuracy.
