Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Example Flowchart is cut in display (Chrome).

See original GitHub issue

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>

Issue Analytics

State:
Created 7 years ago
Comments:15

Top GitHub Comments

5reactions

ajrnzcommented, Dec 18, 2016

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]

0reactions

tylerlongcommented, Apr 12, 2018

fixed

Top Results From Across the Web

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

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

How to create flowcharts and diagrams in G Suite

The following guide can show you how to create diagrams, charts, and flowcharts using Google Drawings and G Suite add-ons.

Create diagrams and flowcharts - Google Support

Diagrams and flowcharts make complex processes in your presentation easier to understand. All you have to do is add, combine, and edit shapes—no...

Creately - Diagrams & Collaboration

The easiest way to draw flowcharts, mind maps, UML, organizational charts, wireframes, network diagrams and 40+ other diagram types.

50 Of The Best Google Chrome Extensions For Teachers

Diagrams, flowcharts, organizational charts are some great examples of visual teaching tools. However, drawing them can be tricky. Lucidchart extension makes it ...