search

adrai / flowchart.js

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

Is it possible to keep elements in one column? #221

Closed vic-t closed 3 years ago

vic-t commented 3 years ago

I wanted to try to make a diagram for a case statement, similar to

image

When trying to replicate this in Flowchart.js, the three statement blocks are not held in one vertical column but drift apart quite substantially.

image

I assume there's not much I can do about this, right?

adrai commented 3 years ago

no, it works like this

vic-t commented 3 years ago

As described in the PR https://github.com/adrai/flowchart.js/issues/115, using the flag align-next=no, it does actually seem possible to do what I asked.

Here's the code: 

st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
c1(align-next=no)=>condition: Condition 1
c2(align-next=no)=>condition: Condition 2
c3(align-next=no)=>condition: Condition 3
c4(align-next=no)=>condition: Default
op1=>operation: Operation 1
op2=>operation: Operation 2
op3=>operation: Operation 3
op4=>operation: Default
op5=>operation: End Statement

st->c1(no,bottom)->c2(no,bottom)->c3(no,bottom)->c4(yes,right)->op4(right)->op5(right)->e
c1(yes,right)->op1(right)->op5->e
c2(yes,right)->op2(right)->op5->e
c3(yes,right)->op3(right)->op5->e

And here's the result:

grafik

Not exactly sure why the lines going away from op2 and op3 don't remain horizontal but that's a minor nuisance.