Mermaid diagram does not show properly

[victor-navarro]

Have you checked that your issue isn't already filed?

• [x] I read through FAQ and searched through the past issues, none of which addressed my issue.
• [X] Yes, I have checked that this issue isn't already filed.

Bug description

Diagrams larger than the current example will display incorrectly in two ways: 1) will be occluded on the right, and 2) will be occluded on the bottom if they are too long

How to reproduce the bug

To reproduce the width issue:

Go to https://alshedivat.github.io/al-folio/blog/2021/diagrams/

Drag the diagram to the right.

I could not reproduce the height issue with sequenceDiagrams (the mermaid diagram used in the example). However, things break down if you use other types.

Using the below will lead to a diagram that gets cut at the bottom, even though this diagram renders fine in other places (such as markdown preview and here, see below):

```mermaid
classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

It renders fine here:

```mermaid
classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

Error messages and logs

The error message you got, with the full traceback if available. Please paste it between these triple backticks.

What operating system are you using?

Windows

Where are you seeing the problem on?

Running locally with Docker

More info

No response

[george-gca]

Somehow the generated svg is ending with style="max-width: 684.6133422851562px;". Probably fixing this will solve the problem.

[victor-navarro]

Somehow the generated svg is ending with style="max-width: 684.6133422851562px;". Probably fixing this will solve the problem.

I noticed that too, the value on my end is equally arbitrary (and different). I tried tinkering with the css to no avail, and after some reading, it seems that the property is being determined elsewhere.

[george-gca]

I tried to check if I could fix it quickly, but it seems to need a "magical" solution.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.