Jump to content

HTML5 Progressive Flowchart ( mouse click driven)


Recommended Posts

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



Link to comment
Share on other sites

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!!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...