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

Simple flowchart not rendered correctly #166

Open richardxday opened 5 years ago

richardxday commented 5 years ago

Hi,

I've got a fairly simple flowchart: st=>start: Start e=>end: End cond1=>condition: Need to create a flowchart? cond2=>condition: Do you understand Visio? cond3=>condition: Do you understand text? op1_1=>operation: Spend hours fiddling with lines and grids in Visio op1_2=>operation: Rush the actual design of your flowchart because you spent hours dealing with Visio op1_3=>operation: Review and update your flowchart, constantly having to move and re-align parts of the diagram op2_1=>operation: Write a few lines of text describing your flowchart op2_2=>operation: Use flowchart.js to render your flowchart in seconds op2_3=>operation: Review and update your flowchart quickly op2_4=>operation: Release completed design op3_1=>operation: Scribble on paper op3_2=>operation: 10 sheets of paper later: finish your design op3_3=>operation: Scan coffee stained paper design where no one can read your handwriting st->cond1 cond1(yes)->cond2 cond1(no)->e cond2(yes)->op1_1->op1_2->op1_3->e cond2(no)->cond3 cond3(yes)->op2_1->op2_2->op2_3->op2_4->e cond3(no)->op3_1->op3_2->op3_3->e

This renders (locally and on http://flowchart.js.org/) incorrectly (one of the lines passes through a box).

Is there any way to fix this behaviour?

Interestingly, it seems that if I make the left-most flow longer, it fixes the issue so there seems to be an issue when any non-left-most flow is longer than the left-most flow.

Thanks. Richard.

adrai commented 5 years ago

workaround:

st=>start: Start
e=>end: End
cond1=>condition: Need to create
a flowchart?
cond2=>condition: Do you
understand
Visio?
cond3=>condition: Do you understand text?
op1_1=>operation: Spend hours fiddling
with lines and grids
in Visio
op1_2=>operation: Rush the actual design
of your flowchart
because you spent
hours dealing
with Visio
op1_3=>operation: Review and update
your flowchart,
constantly having
to move and
re-align parts
of the diagram
op2_1=>operation: Write a few lines of text describing your flowchart
op2_2=>operation: Use flowchart.js to render your flowchart in seconds
op2_3=>operation: Review and update your flowchart quickly
op2_4=>operation: Release completed design
op3_1=>operation: Scribble on paper
op3_2=>operation: 10 sheets of paper later:
finish your design
op3_3=>operation: Scan coffee stained paper
design where no one can
read your handwriting
st->cond1
cond1(yes)->cond2
cond1(no)->e
cond2(yes)->op1_1->op1_2->op1_3->e
cond2(no)->cond3
cond3(yes)->op2_1->op2_2->op2_3->op2_4->e
cond3(no)->op3_1->op3_2->op3_3->e
richardxday commented 5 years ago

Thanks for the quick response! That does indeed work around the issue.

Is there an intention to fix the issue (at some point)?