Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

General

Mermaid diagrams extends page limit

Started by I. Camps 6 years ago · 1 replies · 1293 views
6 years ago

Hello,

I am using Mermaid to add diagrams to my site.

As shown in the picture, the diagram is draw out of the page limits.

So, I was wondering how to circumvent this. Right now, I have two ideas (but don't now how to implement them, I don't even know if it possible).
1-) Remove the sidebar for only that page.
2- Force Mermaid to draw the diagram in the page area.

I am using the Gateway them.

screenshot|690x275

Regards,

Camps

6 years ago

It largely depends on the DOM-structure and CSS that the theme uses, but normally you'd just ensure that the container width for the diagram cannot exceed it's parent element's width. Just display: block; width: 100%; max-width: 100%. If I recall correctly, Mermaid uses the directed acyclical graph, which should force it to draw the diagram within the constraints of the container.

👍 1

Suggested topics

Topic Participants Replies Views Activity
General · by Jerry Hunt, 4 days ago
2 76 8 hours ago
General · by pamtbaau, 13 hours ago
1 47 12 hours ago
General · by Andy Miller, 1 day ago
0 44 1 day ago
General · by Marcel, 12 months ago
6 346 5 days ago
General · by Duc , 5 days ago
3 40 5 days ago