Example Flowchart is cut in display (Chrome). #368

alinex · 2016-06-28T21:05:16Z

If I run the following code in chrome the area of "Round Rect" is only half visible and in Firefox the text is also not shown. The graph is cut there. What did I wrong?

<html lang="en">
  <head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/knsv/mermaid/6.0.0/dist/mermaidAPI.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/knsv/mermaid/6.0.0/dist/mermaid.forest.css" />
    <script type="text/javascript">mermaidAPI.initialize({startOnLoad:false});</script>
    <style type="text/css">div#page {display:block}</style>
  </head>
  <body>
    <div id="mermaid3"></div>
    <script type="text/javascript"><!--
    // mermaid.initialize
    $(function(){
      var cb = function(svg){
        document.querySelector("#mermaid3").innerHTML = svg;
      };
      mermaidAPI.render('mermaid3','graph LR\n  A[Square Rect] -- Link text --> B((Circle))\n  A --> C(Round Rect)\n  B --> D{Rhombus}\n  C --> D\n', cb);
    });
    //-->
    </script>
  </body>
</html>

shd101wyy · 2016-07-13T05:35:15Z

I got the same issue.

knsv · 2016-07-13T07:03:14Z

Nothing wrong. I will take a look at this.

It can be fixed by adding the code below to the callback. But that is not the real fix but more like band aid:

document.querySelector("#mermaid3 svg").style.height='100%';

ajrnz · 2016-12-18T10:51:53Z

I had the same problem. It's really caused by having the same id for the div and the svg elements. I think this could be helped by documenting the fact that the id in the render() method is the id of the created svg element not the target div. [I know it should be obvious as the callback is what puts the svg into the DOM]

z827101859 · 2018-03-09T04:18:01Z

I still got the same issue.

@knsv

tylerlong · 2018-03-17T12:41:03Z

I cannot reproduce it: https://mermaidjs.github.io/mermaid-live-editor/#/edit/Z3JhcGggTFIKICBBW1NxdWFyZSBSZWN0XSAtLSBMaW5rIHRleHQgLS0-IEIoKENpcmNsZSkpCiAgQSAtLT4gQyhSb3VuZCBSZWN0KQogIEIgLS0-IER7UmhvbWJ1c30KICBDIC0tPiBE

z827101859 · 2018-03-27T09:03:13Z

@tylerlong version 8.0.0-rc.6 fix this bug，great help！!

z827101859 · 2018-04-10T02:02:58Z

@tylerlong
it appears again ! use the code below toreproduce bug.
(这个bug又出现了！使用如下代码复现。)
---------------------------------code--------------------------------

graph LR
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["

提交申请

熊大

"];
class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["

负责人审批

强子

"];
class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["

DBA审批

强子

"];
class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["

SA审批

阿美

"];
class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["

主管审批

光头强

"];
class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["

DBA确认

强子

"];
class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["

SA确认

阿美

"];
class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
sid-4FC27B48-A6F9-460A-A675-021F5854FE22["

结束

"];
class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["

SA执行1

强子

"];
class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
sid-6C2120F3-D940-4958-A067-0903DCE879C4["

SA执行2

强子

"];
class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
sid-9180E2A0-5C4B-435F-B42F-0D152470A338["

DBA执行1

强子

"];
class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["

DBA执行3

强子

"];
class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["

DBA执行2

强子

"];
class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["

DBA执行4

强子

"];
class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
sid-1897B30A-9C5C-4D5B-B80B-76A038785070["

负责人确认

梁静茹

"];
class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;

gvlx · 2018-04-10T10:16:51Z

Hi.

"height" does not seem to have any effect.

Using a simpler test it seems to break once you exceed some proportion: test with simple labels.

However, other arrangements seem to fit: 10 level test with short labels and the same graph with longer labels.

@z827101859 's example seems to break sooner: complex example.

tylerlong · 2018-04-11T09:07:33Z

It's an issue from upstream project dagre. So the layout generated by dagre sometimes goes out of the view and got cut off.

I tried to fix it by making the svg larger and transform the content so that no content is being cut. It seems that it's not the ultimate solution because you don't know how much larger should the svg be in order to fix all the cut-off issues.

I have a idea to fix it elegantly. I need some time though.

z827101859 · 2018-04-11T09:08:51Z

@tylerlong 加油！你可以的！

gvlx · 2018-04-11T12:24:28Z

Hi,

The view is clipping the image.
If you open my example's SVG directly in chrome it will display correctly unless your window is too short.

However, changing the first transform operation's arguments from (32,32) to (32,55) seems to always work.

How are those values calculated?

tylerlong · 2018-04-12T01:15:50Z

Here comes the "ultimate solution": 44ff608

This should fix all the cut-off issues. And the content of the svg should be placed right in the middle with exact padding of 8px.

Please test the live editor and report issues to me(if there are any). :)

gvlx · 2018-04-12T12:01:14Z

Hi,

No clipping!
However the examples with longer labels now exceed the boundaries of the view:

Max-width does not seem to be respected?

tylerlong · 2018-04-12T14:22:36Z

I think it is a feature instead of a bug. Where is max width being set? nowhere. If you set max width to 100%, it will scale the svg which makes the text too tiny to read.

And if 100% width is default, small diagrams will have lots of white space which is not ideal.

I am open to ideas to improve this part.

Update: let's reopen this issue.

tylerlong · 2018-04-12T15:17:12Z

fixed

…yarn/develop/typescript-eslint/parser-4.31.1 chore(deps-dev): bump @typescript-eslint/parser from 4.31.0 to 4.31.1

tylerlong closed this as completed Mar 17, 2018

tylerlong reopened this Apr 11, 2018

tylerlong closed this as completed Apr 12, 2018

tylerlong reopened this Apr 12, 2018

tylerlong closed this as completed Apr 12, 2018

mgenereu pushed a commit to mgenereu/mermaid that referenced this issue Jun 25, 2022

Merge pull request mermaid-js#368 from mermaid-js/dependabot/npm_and_…

6fc2968

…yarn/develop/typescript-eslint/parser-4.31.1 chore(deps-dev): bump @typescript-eslint/parser from 4.31.0 to 4.31.1

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Example Flowchart is cut in display (Chrome). #368

Example Flowchart is cut in display (Chrome). #368

alinex commented Jun 28, 2016

shd101wyy commented Jul 13, 2016

knsv commented Jul 13, 2016

ajrnz commented Dec 18, 2016

z827101859 commented Mar 9, 2018

tylerlong commented Mar 17, 2018

z827101859 commented Mar 27, 2018

z827101859 commented Apr 10, 2018 •

edited

Loading

gvlx commented Apr 10, 2018

tylerlong commented Apr 11, 2018 •

edited

Loading

z827101859 commented Apr 11, 2018

gvlx commented Apr 11, 2018

tylerlong commented Apr 12, 2018

gvlx commented Apr 12, 2018

tylerlong commented Apr 12, 2018 •

edited

Loading

tylerlong commented Apr 12, 2018

Example Flowchart is cut in display (Chrome). #368

Example Flowchart is cut in display (Chrome). #368

Comments

alinex commented Jun 28, 2016

shd101wyy commented Jul 13, 2016

knsv commented Jul 13, 2016

ajrnz commented Dec 18, 2016

z827101859 commented Mar 9, 2018

tylerlong commented Mar 17, 2018

z827101859 commented Mar 27, 2018

z827101859 commented Apr 10, 2018 • edited Loading

gvlx commented Apr 10, 2018

tylerlong commented Apr 11, 2018 • edited Loading

z827101859 commented Apr 11, 2018

gvlx commented Apr 11, 2018

tylerlong commented Apr 12, 2018

gvlx commented Apr 12, 2018

tylerlong commented Apr 12, 2018 • edited Loading

tylerlong commented Apr 12, 2018

z827101859 commented Apr 10, 2018 •

edited

Loading

tylerlong commented Apr 11, 2018 •

edited

Loading

tylerlong commented Apr 12, 2018 •

edited

Loading