All geek questions in one place

Flowchart.js SVG rendering confused in popup

I am using flowchart.js to get the SVG rendering of the flowchart. I need to include the rendering of the flowchart in a pop-up window with dynamic bootstrap panels, but the result is spoiled (labels on the boxes and a little rendering:

enter image description here

My code is:

<div class="panel panel-default">   
  <div class="panel-body">      
    <div id="diagram"></div>    
    </div> 
</div>

<script type="text/javascript">

    $(document).ready(function () {
        var diagram = flowchart.parse('st=>start: Start:>http://www.google.com[blank]\n' +
            'e=>end:>http://www.google.com\n' +
            'op1=>operation: My Operation\n' +
            'op2=>operation: Stuff|current\n' +
            'sub1=>subroutine: My Subroutine\n' +
            'cond=>condition: Yes \n' + // use cond(align-next=no) to disable vertical align of symbols below
            'or No?\n:>http://www.google.com\n' +
            'c2=>condition: Good idea|rejected\n' +
            'io=>inputoutput: catch something...|request\n' +
            '\n' +
            'st->op1(right)->cond\n' +
            'cond(yes, right)->c2\n' + // conditions can also be redirected like cond(yes, bottom) or cond(yes, right)
            'cond(no)->sub1(left)->op1\n' + // the other symbols too...
            'c2(true)->io->e\n' +
            'c2(false)->op2->e'  //allow for true and false in conditionals
        );
        diagram.drawSVG('diagram');

    });
</script>

How to handle this?

Many thanks

+4
source share
1 answer

This code works fine:

<html>

<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.8.0/flowchart.min.js"></script>
</head>

<body>

<div class="panel panel-default">   
  <div class="panel-body">      
    <div id="diagram"></div>    
    </div> 
</div>

<script type="text/javascript">

    $(document).ready(function () {
        var diagram = flowchart.parse('st=>start: Start:>http://www.google.com[blank]\n' +
            'e=>end:>http://www.google.com\n' +
            'op1=>operation: My Operation\n' +
            'op2=>operation: Stuff|current\n' +
            'sub1=>subroutine: My Subroutine\n' +
            'cond=>condition: Yes \n' + // use cond(align-next=no) to disable vertical align of symbols below
            'or No?\n:>http://www.google.com\n' +
            'c2=>condition: Good idea|rejected\n' +
            'io=>inputoutput: catch something...|request\n' +
            '\n' +
            'st->op1(right)->cond\n' +
            'cond(yes, right)->c2\n' + // conditions can also be redirected like cond(yes, bottom) or cond(yes, right)
            'cond(no)->sub1(left)->op1\n' + // the other symbols too...
            'c2(true)->io->e\n' +
            'c2(false)->op2->e'  //allow for true and false in conditionals
        );
        diagram.drawSVG('diagram');

    });
</script>

</body>
</html>

Conclusion:

flowchart.js

You may be mixing incompatible versions or some important information is missing from your question.

+2
source

Source: https://habr.com/ru/post/1694348/

More articles:


All Articles