adrai / flowchart.js

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

More compact horizontal rendering #155

Closed stof closed 6 years ago

stof commented 6 years ago

When chaining lots of condition, the right branch of them gets pushed further and further for top ones (any time we add a new one at the bottom).

While this may be useful when needing to have a bottom branch from them to avoid overlap, it makes the graph a lot less readable when the node on the right is an end node.

See this flowchart for an example:

st=>start: Start
e=>end: ...
d=>end: button-dangerous-action
c=>end: button-creation
conf=>end: button-confirmation
prim=>end: button-primary-action
del_cond=>condition: Delete button?
crea_cond=>condition: Creation button?
conf_cond=>condition: confirmation button?
prim_cond=>condition: primary action?

st->del_cond
del_cond(yes, right)->d
del_cond(no)->crea_cond
crea_cond(no)->conf_cond
crea_cond(yes, right)->c
conf_cond(yes, right)->conf
conf_cond(no)->prim_cond
prim_cond(yes, right)->prim
prim_cond(no)->e

I don't know enough the library to be able to implement this myself.

adrai commented 6 years ago

... this is not possible right now... but I have an idea... as soon as I have a couple of minutes I will try something...

adrai commented 6 years ago

Can you try with v1.11.3 ?

stof commented 6 years ago

Yeah, looks much better.