Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FlowChart - large space between text and the image #754

Closed
hmf opened this issue Nov 6, 2018 · 7 comments
Closed

FlowChart - large space between text and the image #754

hmf opened this issue Nov 6, 2018 · 7 comments

Comments

@hmf
Copy link

hmf commented Nov 6, 2018

I am using sbt microsite to generate the documentation of an open source project in GitLab. Gitlab uses Jekyll with the mermaid plugin, so I am trying to use that too. However I cannot add the mermaid plugin to my install and so use it directly via the JS iibrary.

I have the following code in my markdown (page has other elements):

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="mermaid.min.css">
</head>
<script>mermaid.initialize(
   {
     startOnLoad:true,
     flowchart:{ useMaxHeight:false, }     
    });</script>

Text here.

<div class="mermaid">
graph LR;
  A --> B;
  A --> C;
  B --> D;
  C --> D;
</div>

And text here.

The page however ends up with large blank space between the graph and the surrounding text.
Unfortunately my knowledge is limited in this area so I don't know if this is a mermaid or HTML issue.
Can anyone point me to the right direction?

Here is the example

TIA
@bryandamon
Copy link

No idea where is came from, but inspecting (using developer tools in Chrome Ctrl-Shift-I) the page you linked shows the following wrapper. The height="100%" is the part that is generating the white space. You can edit it (again using Chrome developer tools) to remove it and see the result.

<svg id="mermaidChart0" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 335.71875 219.375" style="max-width:335.71875px;">

@lloyd094
Copy link

lloyd094 commented Nov 7, 2018

I have the same issue, and I can't figure out what's causing it. For me, I'm using mermaid through Typora (markdown editor), and then export the project to PDF. Unfortunately currently, this leaves me with several blank pages.

@hmf
Copy link
Author

hmf commented Nov 7, 2018

@bryandamon Appreciate the feedback. I can confirm the culprit is the heightattribute.

Like @lloyd094 I am using mermaid via another tool (sbt microsite), which in turn uses Kramdown. So I don't know what's happening, however I am a bit skeptical that either micro-sites or the Kramdown plugin generate the HTML tag.

Is their any way I can find out who is inserting the misbehaving attribute?

TIA

@hmf
Copy link
Author

hmf commented Nov 7, 2018 •
edited
Loading

A small update with a hack.

I looked at the code and in fact in src/diagrams/flowchart/flowRenderer.js we see that only the width is set to 100%. This would in principle solve my problem. I am using version 7.1.2 so I cannot confirm if this was changed recently.

If however you are using 7.1.2 you can use the parent container to scale the SVG so that no space is seen. Here is the final HTML snippet:

<div class="mermaid" style="height: 30%" data-processed="true">
<svg id="mermaidChart0" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 304 210.3333282470703" style="max-width:304px;">
...
</svg></div>

For those using Kramdown here is the source:

<div class="mermaid" style="height: 30%">
graph LR;
  title[<u>Pipe Example 1</u>]
  A --> B;
  A --> C;
  B --> D;
  C --> D;
</div>

Note that use of Kramdown style or attribute overwriting was not possible for the Mermaid HTML class because it is generated by JS after the HTML page has been generated.

HTHs

@hmf
Copy link
Author

hmf commented Nov 7, 2018 •
edited
Loading

Small update.

Version 8.0.0-rc.8 generates a width="100%" and works correctly.
Maybe we can close this.

@lloyd094 lloyd094 mentioned this issue Nov 7, 2018
Closed
@lloyd094
Copy link

lloyd094 commented Nov 7, 2018

@hmf - Thanks for the info, just submitted a request to update Mermaid to the Release Candidate for Typora to solve this issue over there.

@hmf
Copy link
Author

hmf commented Nov 8, 2018

Ok. I am going to close this seeing as it works in the latest version.

@hmf hmf closed this as completed Nov 8, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@hmf @bryandamon @lloyd094