Massive whitespace above and below graph

[sadata7]

Describe the bug Very large charts result in massive amounts of excess whitespace above and below the diagram making it practically unusable. I was using mermaid to chart a family tree with approximately 400 relationships/nodes. Performance is very acceptable for such an application, so it's unfortunate that I've encountered this issue.

To Reproduce Steps to reproduce the behavior: The family tree contains confidential information so I cannot post it, but the problem can easily be reproduced by repeating the simple relationship below. I'm showing 5 repetitions below. The problem starts manifesting itself after about 50 repetitions and becomes extremely problematic at around 150, getting progressively worse as more elements are added to the graph.

flowchart BT
A-->B-->C-->D-->E
A-->B-->C-->D-->E
A-->B-->C-->D-->E
A-->B-->C-->D-->E
A-->B-->C-->D-->E

50 repetitions:

150 repetitions:

Here's what I'm experiencing with the actual family tree. The first example is using the VS Code mermaid extension. Please note the size of the scrollbar handle on the right to get an idea how much empty space is above and below the diagram in addition to the empty space in the visible portion.

The second example is using mermaid in Joplin. Here's what PDF output looks like, and the same amount of empty space is present in the live view.

The problem can also be reproduced in the Live Mermaid Editor. Here's what happens with 500 repetitions of the aforementioned example:

Expected behavior The size should be limited to the visible extent of the graph.

Screenshots See above.

Desktop (please complete the following information):

• any OS

Smartphone (please complete the following information):

• any device

Additional context Add any other context about the problem here.

[blacksun1]

Adding to this, I am getting the same issue with very long sequence diagrams when previewing in Visual Studio Code and in the live editor. I was using Markdown PDF by yzane.markdown-pdf version 1.4.4 and VS Code 1.55.2 on Windows.

Curiously, I don't get the same issue when I generate a PNG or SVG image using the same diagram with the npm package @mermaid-js/mermaid-cli. I'm using version 8.9.2 of mermaid-cli on Windows with nodejs version v14.16.0

[blacksun1]

This is how the cli renders the flow chart as discussed above with 200 repetitions

As you can see, it does now have spacing to the right which I don't think is an issue.

This, however, is how it looks when embedded into a markdown document and previewed using VSCode

Notice the spacing on the top and bottom.

[imeikas]

For SVGs I could fix the whitespace by removing the height value from svg tag. Tested only in Firefox.

<svg ... height="2583" style="max-width: 2670px;" viewBox="-50 -10 2670 2583">

to

<svg ... style="max-width: 2670px" viewBox="-50 -10 2670 2583">

Hope this helps track down the issue.

[naletups]

For me, the same issue arises for a sequence diagram, for which there are 100 lines (including a 8x participant block and some 15 opt and alt blocks). But it starts already for as few as 25 lines without any opt or alt blocks. The effect is the worse, the wider the figure is.

If you put the following into the live editor, you'll see already quite some spacing at top and bottom. If you add/remove participants you'll see the effect. Unfortunately, it also depends on the screen resolution/window viewport width.

sequenceDiagram
 autonumber
 participant A
 participant B
 participant C
 participant D
 participant E
 participant F
 participant G
A->>B: Task
A->>B: Task
A->>B: Task
A->>B: Task
A->>B: Task
A->>B: Task
A->>B: Task
A->>B: Task
A->>B: Task
A->>B: Task
A->>B: Task
A->>B: Task
A->>B: Task
A->>B: Task
A->>B: Task
A->>B: Task

[kurtlawrence]

I am getting similar behaviour with flowcharts

[jlfwilliams]

Having this same issue, would love a fix!

[thegiantbeast]

If it helps on anything, this regression was introduced with 8.8.1 release -> https://github.com/mermaid-js/mermaid/commit/4dc805d25add19ae07ac9fe8951b4036332e0530

[thegiantbeast]

If I switch to 8.8.0 it works as expected. Still haven't found the root cause.

[tessus]

We have the same problem in Joplin. People have found a workaround by adding the following css:

.mermaid svg { height: auto; }

@knsv ^^^

[Becheler]

I am bumping into the same issue with Github rendering. Any news on this front?

[OmgImAlexis]

Also hitting this issue on github. Here's an anonymised version of what I'm using.

sequenceDiagram
  a->>b: text here
  a->>b: text here
  b->>a: text here  
  a->>b: text here
  a->>c: text here
  c->>d: text here
  c->>e: text here 
  f->>b: text here
  b->>a: text here
  a->>g: text here
  b->>h: text here

sequenceDiagram
  a->>b: text here
  a->>b: text here
  b->>a: text here  
  a->>b: text here
  a->>c: text here
  c->>d: text here
  c->>e: text here 
  f->>b: text here
  b->>a: text here
  a->>g: text here
  b->>h: text here

[dkkb]

Also hitting this issue on github. Here's an anonymised version of what I'm using.

sequenceDiagram
  a->>b: text here
  a->>b: text here
  b->>a: text here  
  a->>b: text here
  a->>c: text here
  c->>d: text here
  c->>e: text here 
  f->>b: text here
  b->>a: text here
  a->>g: text here
  b->>h: text here

+1

[listx]

For context, there was a fix for this in #2312 but it was reverted in 38ef0611753fcc1e8ef7de024300614cd4768b8a (presumably because it broke other things).

[Alexander89]

FYI: There is the same issue if you generate a PNG

docker run -it -v $(pwd):/data -u $UID minlag/mermaid-cli -i /data/dependencies -o /data/dependencies.png

For me, it's fine to use SVG.

[athenor]

I just ran into this exact same issue in two places. I wrote a fairly long sequence diagram in VS Code, then uploaded it to GitLab as a snippet.

VS Code: 1.68.0, running on Windows 10 Extensions:

• Markdown Preview Enhanced
• Markdown Preview mermaid Support v1.14.2
• Mermaid Markdown Syntax highlighting v1.3.0

Gitlab 15.0 (viewing in Firefox)

[berzi]

The proposed workarounds using <style> don't work in places like Gitlab wiki. Please fix.

[LouisLeNezet]

Hi, I ran in the same issue lately with big flowcharts in a markdown. When exported to svg the white spaces are not present anymore. I used the mermaid-cli command: mmdc -i ReadMeWithMermaidCodes.md -o ReadMeWithSVG.md to generate the new markdown. Unfortunately I need to run this command each time I update my original file. I would be nice to have a fix on this problem.

[Becheler]

This issue on my Github pages was solved and the massive blank is gone: that's amazing, thanks devs! ❤️ :

[berzi]

This issue on my Github pages was solved and the massive blank is gone: that's amazing, thanks devs! ❤️ :

Do you mind explaining how?

[Becheler]

This issue on my Github pages was solved and the massive blank is gone: that's amazing, thanks devs! heart :

Do you mind explaining how?

If only I knew! I went back to it today after months of absence, and the blank was gone. You can find the flowchart here and the code is avaiable on the raw view of the README :) I wish I could be more useful, but mermaid is a (beautiful) mystery to me!

[nickfyson]

👋 Padding is now being handled appropriately on the GitHub side, so that'll be why the problem is fixed in Pages! 🙂 (I believe the underlying Mermaid issue remains.)

[berzi]

My issue is on Gitlab so it's not fixed for me. :(

[aadamsx]

Same. See this issue with the Sequence Diagrams in Preview with VS Code. When exporting to various formats it remains. Are there any MM devs looking at this, it's been going on for a long time.

[tekstrand]

👀 running into this one as well. Would be nice to see the underlying issue here addressed

[trevorhardy]

Similar issue with Sphinx on ReadTheDocs

[NakitaOza]

This is how the cli renders the flow chart as discussed above with 200 repetitions

As you can see, it does now have spacing to the right which I don't think is an issue.

This, however, is how it looks when embedded into a markdown document and previewed using VSCode

Notice the spacing on the top and bottom.

Where you able to fix this? I am also facing this problem for mermaid sequence diagrams in md files.

[mgoppert]

Try adding a custom.css in your root assets folder with this syntax

.mermaid svg { height: auto; padding: 20pt; }

[berzi]

That doesn't work where you have no control over CSS, like on Gitlab Wikis.

[amaze-escape]

That doesn't work where you have no control over CSS, like on Gitlab Wikis.

I also arrived here because of this issue in gitlab wiki.

[eric-cooper]

I am experiencing similar issues with excessive top/bottom margin (whitespace) for larger flow charts.

This flowchart renders nicely here but in Docsy and in Mac version of VS Code (v1.17.2) with Markdown Preview Mermaid Support (v1.15.2) there are excessive top and bottom margins - each roughly same height as flowchart (below).

Note: setting useMaxWidth to false does make a difference but doesn't solve problem completely. ;-)

%%{init: {"flowchart": {"useMaxWidth": false}}}%%

flowchart LR
    classDef subgraph_padding fill:none,stroke:none

    COMP(Composite Application)

    subgraph STD["Procedure Camera AI Workload (25 fps)"]

      subgraph ugly_hack1 [ ]

        C1(Endoscope Camera)
        S1(Ingest Video);
        P1(Prepare Image);

        subgraph I1[Image Inference Block]
           MR1[( Model Repo)]
           TTD(Tooltip Detection)
           ASD(Anat. Struct. Detection)
        end

        E1(Export Results);
      end
    end

    subgraph SPD["PTZ Camera AI Workload (1 fps)"];

      subgraph ugly_hack2 [ ]

         C2(PTZ Camera);
         S2(Ingest Video);
         P2(Prepare Image);

        subgraph I2[Image Inference Block]
            MR2[( Model Repo)]
            PHD(Phase Detection)
            FB(Face Blur)
            OD(Object Detection)
         end

         E2(Export Results);
       end
    end

    subgraph VID[Video Controller]
      VC(Video Composite)
      VS(Video Switch)
    end

 subgraph SC[Shared Components]
      SMR[(Global Model Repo)]
    end

 %% create transparent subgraphs to kludge desired layout for subgraph titles. -ec 22.09.19
    class ugly_hack1 subgraph_padding
    class ugly_hack2 subgraph_padding

    COMP--contains-->STD;
    COMP--contains-->SPD;
    COMP--contains-->SC;
    COMP--contains-->VID;

%% Procedure Camera AI Workflow, etc.
    C1-->S1;
    S1-->P1;
    P1-->TTD;
    P1-->ASD;
    TTD-->E1;   
    ASD-->E1; 

%% PTZ Camera AI Workflow, etc.
    C2-->S2;
    S2-->P2;
    P2-->PHD;
    P2-->FB;
    P2-->OD;
    PHD-->E2;   
    FB-->E2;   
    OD-->E2;   

%% Video Controller and Display
    C1-->VC
    C2-->VC
    E1-->VC
    E2-->VC
    VC-->VS
    VS-->QD[Quad Display]
    VS-->SD[Single Display]
    VS-->TP[Telepresense]
    VS-->DICOM[(DICOM Database)]

%% Inference Workloads and Model Repos
    TTD-.uses.->MR1;
    ASD-.uses.->MR1;
    PHD-.uses.->MR2;
    FB-.uses.->MR2;
    OD-.uses.->MR2;
    MR1-.uses.->SMR;
    MR2-.uses.->SMR;

[EvertonSA]

+1

[amithkumarg]

If you are facing this issue with MermaidJS macro in Atlassian Confluence, here is how to resolve it until this issue is addressed.

[ShivamBang98]

I sort of used a workaround for this in my Confluence page. Here's what I did:

1. Create the diagram using mermaid.live
2. Copy the markdown and import it into draw.io (Confluence's embedded draw.io) as mentioned here - https://drawio-app.com/blog/create-mermaid-diagrams-in-draw-io/
3. Paste the markdown separately in the same doc with the diagram.

This also solved another problem for me, which was that for larger diagrams, I was unable to expand them and see the smaller text. I was also able to wrap it up neatly inside an "expand" macro, so it ended up looking pretty neat. Attached screenshot for reference.

[ossdhaval]

We are using Mermaid in MkDocs and facing the same issue.

[o6uoq]

Any update? This ticket is 3+ years old, simply to remove whitespace. This is enough to make some users deter to other tools over Mermaid.