search

adrai / flowchart.js

Draws simple SVG flow chart diagrams from textual representation of the diagram
http://flowchart.js.org/
MIT License
8.54k stars 1.21k forks source link

The orginal code text not removed in div #226

Closed ppdouble closed 2 years ago

ppdouble commented 2 years ago

code like this

javascript:

  var hc = $("#diagram").text();
  var diagram = flowchart.parse(hc);
  diagram.drawSVG('diagram');

html:

<div id="diagram>
s=>start: Sta
e=>end: E
s->e
</div>

The chart shows correctly. But the original code will show again after svg tag. <svg>...</svg> s=>start: Sta e=>end: E s->e. What happened? Thank you.

adrai commented 2 years ago

Can you please create a reproducible example? Maybe on codesandbox?

ppdouble commented 2 years ago

Can you please create a reproducible example? Maybe on codesandbox?

The reproducible example:

https://codesandbox.io/s/twilight-sound-15yn9?file=/index.html

<html>
    <head>
        <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    </head>
    <body>

<div id="diagram">
s=>start: Sta 
e=>end: E
s->e
</div>
<div id="diagram2">
</div>

<!-- "https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js" -->
<!-- "https://flowchart.js.org/flowchart-latest.js" -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.16.0/flowchart.min.js"></script>

<script>
  var hc = $("#diagram").text();
  var diagram = flowchart.parse(hc);
  $("#diagram2").text(hc+" - copy from diagram text");
  diagram.drawSVG('diagram');
</script>
</body>
</html>

In my real case, I put the diagram code snippet in the markdown editor, Editor.md, when I am writing blog.

<div id="diagram">
s=>start: Sta 
e=>end: E
s->e
</div>

The flowchart.js needs to get content from div with jquery #id selector. But it shows the text content again after generating svg tag.

adrai commented 2 years ago

Sorry, I have no idea what you're trying to do... And your link is not a reproducible example... This is my example, and it works: https://codesandbox.io/s/nostalgic-shadow-ckg4j?file=/index.html

ppdouble commented 2 years ago

Well, thank you, now, I know what I missed. I need a <div> or <textarea> with display:none, so that flowchart.js can get text from the display:none tag and output to another <div> with no content.

<div id="flowchartcode" style="display:none">
s=>start: Sta 
e=>end: E
s->e
</div>
<div id="diagram">
</div>
<script>
  var fcc = $("#flowchartcode").text();
  var diagramobj = flowchart.parse(fcc);
  diagramobj.drawSVG('diagram');
</script>