flowchart.js icon indicating copy to clipboard operation
flowchart.js copied to clipboard

Issues with integrating flowchart.js

Open sobanhameed opened this issue 9 years ago • 5 comments

I am seeing this error show up in the logs from rapheal.js on rendering the example you guys have. I have included rapheal.js already.

Error: Invalid value for attribute preserveAspectRatio="meet"

Is this something you guys have noticed? Also I am seeing weird behavior where the same content is being rendered differently (non deterministic). See below. I will dig deeper into this issue but if you have any pointers it will be great.

screen shot 2015-05-11 at 12 54 27 am screen shot 2015-05-11 at 12 54 39 am

sobanhameed avatar May 11 '15 07:05 sobanhameed

Here goes the source:

renderSeqDiagram: function(){ if (this.state.content.flowDescription) { try { if(this.dia) { this.dia.clean(); } var options = {'x': 0, 'y': 0}; this.dia = flowchart.parse(this.state.content.flowDescription); this.dia.drawSVG(this.refs.canvas.getDOMNode(),options); } catch (error) { console.log(error); this.refs.canvas.getDOMNode().innerHTML = error; } } },

I am building a react component.

sobanhameed avatar May 11 '15 08:05 sobanhameed

@sobanhameed I find that i'm getting the same issue as well, for example in my case, I bind a button click to refresh the diagram based on the syntax from a textarea:

A simple flow like this is giving issue too: st=>start: Workflow Start| op1=>operation: Operation 1| e=>end: End

st->op1->e

On the first run, everything is ok but when i rerun again, sometime the line breaks in between If I run it a couple more time, the item seems to be mis-positioned by getting lower to the right every time

Do you have any solution on the above yet?

justinwong85 avatar Oct 13 '16 01:10 justinwong85

@sobanhameed I've been looking for a React library that wraps around flowchart.js and wonder if you have anything you might be able to share or point me to any open source project

So far this issue is the only thing that comes up in search

Any help/guidance greatly appreciated!

dmk23 avatar Jun 07 '17 14:06 dmk23

dmk23, see https://github.com/alwinn1977/react-simple-flowchart

alwinn1977 avatar Aug 23 '17 08:08 alwinn1977

If someone is still interested I have created a React wrapper for flowchart.js: jln-dk/react-flowchart.js

Thanks to Adriano Raiano for creating this library! :)

jln-dk avatar Mar 10 '20 13:03 jln-dk