Issues with integrating flowchart.js

[sobanhameed]

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.

[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.

[justinwong85]

@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?

[dmk23]

@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!

[alwinn1977]

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

[jln-dk]

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! :)