search

DanielFlaum / grav-plugin-mermaid-diagrams

Mermaid Diagrams is a Grav plugin that adds simple and powerful diagrams functionality
https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams
MIT License
12 stars 1 forks source link

Mermaid diagrams extends page limit #4

Closed icamps closed 3 years ago

icamps commented 3 years ago

Hello,

I am using Mermaid to add diagrams to my site.

I have a sidebar with other stuff and the diagram is drawn out of the page limits, over the info in the sidebar.

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.

Any ideas?

Regards,

Camps

DanielFlaum commented 3 years ago

I'll take a look as soon as I can and get back to you

On Wed, Dec 2, 2020, 10:09 Ihosvany Camps notifications@github.com wrote:

Hello,

I am using Mermaid to add diagrams to my site.

I have a sidebar with other stuff and he diagram is draw out of the page limits, over the info in the sidebar.

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.

Any ideas?

Regards,

Camps

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams/issues/4, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACWIMHQDQB2QVG54J3OWOCLSSZRB7ANCNFSM4UKWLIGQ .

icamps commented 3 years ago

Thank you.

In this link is where I am generated the diagram: https://moleculardocking.net/faq/faq-molecular-docking/faq-how-to-start.

DanielFlaum commented 3 years ago

OK, so it looks like the simplest solution is to add some CSS to your Grav theme: svg { max-width: 100%; }. This will cause the diagram to shrink until it fits correctly, and it will then be following the same behaviour as other images do.

But it may not be the solution you like, because now the diagram is smaller and harder to read. Unfortunately, my plug-in can't (and isn't supposed to) control the actual layout of a diagram--that's the job of Mermaid itself.

One you thing you can try and see if you like as to have the diagram layout from side-to-side instead of top-to-bottom, effectively rotating it 90 degrees. This will cause the diagram to be taller than it is wide, so that it can appear at its natural size.

icamps commented 3 years ago

Ok, I will try your suggestions.

Thank you very much.