HTML5 Progressive Flowchart ( mouse click driven)

[Pravin]

Hi Guys,

 

I am new to HTML5 and working on creating a flowchart using canvas. This is how the flowchart is expected to work. The flowchart should be dynamically generated on canvas using some predefined data source say for eg. Reading an XML file. My focus is toward drawing the flow chart in canvas. I was able to draw a flow chart which open up when a user clicks a box based on the decision that he may want to take. I was able to draw the flowchart based on some predefined flow however it is like drawing on the canvas without any logic. I am looking out for some kind of algorithm which will be capable of generating the flow chart keeping the positions in mind and can  guide the user based on the root he follow progressively . You help and guidance will be appreciated as I have explored web but do not find anything suitable to my problem.

 

I was not able to upload Zip file but  have provided screenshot for

publishing.html

[mavericknl]

You should look at Flow Based Programming and Noflo in particular. I love flows!

[Pravin]

Thanks Mavericknl - Noflo Technology seems to be interesting; however we need to deliver our client something similar to what I posted as an example in HTML5 and CSS3. We are able to draw on the canvas but the real challenge is drawling it dynamically by tracking position for each new block and decision made by the user. There is a lot of flow but seems that no one tried it in simple form. Any help here will be appreciated!!

[Pravin]

Is it not possible in HTML5?