mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
71.34k stars 6.44k forks source link

Embedding a wide chart into a table creates a large empty space #2777

Open JakeSteam opened 2 years ago

JakeSteam commented 2 years ago

Describe the bug When a wide chart is embedded inside a table, it resizes but leave the vertical space the full-size chart needs.

Code Sample

zapplebee commented 2 years ago

This has to do with the fixed height that the SVG gets.

sequenceDiagram
  Alice -> Bob : Eu nisi enim consequat minim pariatur in proident ut. Reprehenderit deserunt eiusmod ipsum proident dolor adipisicing cillum proident magna culpa enim. Ipsum quis ex esse sunt ullamco labore exercitation aliquip enim. Minim mollit ea elit consequat occaecat veniam nulla exercitation velit laboris. Eiusmod dolore irure ullamco aute ea. Culpa fugiat est dolore ea laborum id amet ullamco consectetur. Amet ex ea ad aliqua mollit. Sit elit laboris magna ea sit. Magna veniam mollit fugiat irure consequat. Irure tempor aliqua eu eiusmod velit qui consequat occaecat magna.

You can see it here when the max width is bigger than the container.

There does not seems to be a mitigation at this time.

```mermaid pie title Fruits "Apples" : 50 "Oranges" : 20 "Grapes" : 9.99 "Passionfruits" : 12.5 ``` ``` pie title Fruits "Apples" : 50 "Oranges" : 20 "Grapes" : 9.99 "Passionfruits" : 12.5 ```