Tell me more ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.
up vote 1 down vote favorite

I want to make the flowchart like in this image I have:

enter image description here

I am guessing I can achieve it by using HTML5 Canvas but I am complete beginner when it comes to HTML5 & I have some time constraints.

Moreover, I would also like to make the boxes/nodes editable by the user. Furthermore, are there any Javascript libraries to achieve the same? Or Perhaps CSS3?

I just need pointers in right direction & I will be good to go.

share|improve this question

closed as off topic by Rein Henrichs, MainMa, Bart van Ingen Schenau, MichaelT, GlenH7 Apr 27 at 22:12

Questions on Programmers Stack Exchange are expected to relate to software development within the scope defined in the FAQ. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about closed questions here.

2 Answers

up vote 1 down vote

This could all be done using JavaScript, more specifically jQuery, even more specifically jQuery UI. There are several methods such as draggable and sortable which are pretty much what you are looking for. If you really want to start from scratch you should be familiar with data structures like doubly linked list or broader structures that allow maintenance of multiple nodes/parents/childrens, like graphs. However, I doubt you would need to go that complex for now, so look into the the jQuery UI approach.

share|improve this answer
Could you give an example of how to use jQuery UI for this? Which widget would you use? – BazzPsychoNut Apr 27 at 13:02
Well the draggable method is pretty self explanatory. I would attack the problem but dynamically creating div elements(box and arrows) as the user adds more. This is where OOP comes into play and I said you need to know a little bit about data structures. Each div element needs to keep track of it's parent(s), children, coordinates and any other data that is associated with it. Of course this is all done in JS, possible PHP and you can use HTML to draw this all on the canvas. – Jathu Satkunarajah Apr 28 at 4:19
Still I am little confused on the use of jQuery UI methods. Could you please explain a little bit more? – Mathew Elis Apr 28 at 10:30
If you look at the examples on Draggable Method. You can see it is very very simple to implement. Click view source on that page ;) – Jathu Satkunarajah Apr 29 at 0:58
up vote 0 down vote

You want to create diagram right? then I suggest you JsDiagram, tough it's commercial software, but the trial version might give you enough benefit.

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.