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

Compact flowchart #160

Open cakewalker opened 5 years ago

cakewalker commented 5 years ago

Hi,

I'm just starting out with flowchart.js and really like the look of the charts I'm coming out with (and their flexibility). I'm just struggling a bit with one thing I'm trying to do. The demo chart on the website looks quite compact but I'm not entirely sure how this has been achieved - ones I'm doing seem to end up more spread out. Specifically, I'm aiming for one that has a key path through the centre (going left to right) with additional activities below and 'looping back' to the key path. I've attached examples: flowchart1.png is what I get with my code (pasted below), flowchart2.png is what I'm after. Is there any way to achieve this? Of course it's possible that what I'm looking for doesn't follow usual flowchart standards - this is something I'm not completely familiar with. If that's the case then let me know.

flowchart1.png: flowchart1

flowchart2.png: flowchart2

st=>start: Client submits completed PIF e=>end: Finish init=>subroutine: Project initialisation and briefing consultants=>condition: External consultants required? reviewlos=>inputoutput: Review level of service consappoint=>subroutine: Procurement - external appointments reviewee=>inputoutput: Review existing building information

st->init(right)->consultants consultants(yes, bottom)->reviewlos(right)->consappoint(right)->reviewee(right) consultants(no, right)->reviewee(right) reviewee(right)->e

Also, I'm not entirely sure if I've missed some documentation somewhere as I'm working by deciphering the demos. I'm using version 1.11.3 of flowchart.js

Many thanks! Chris