I'm new in the world of JavaScript and I haven’t found a good framework to draw diagrams in JavaScript. This is for a school project, so I have little time to develop, but I’m willing to learn a lot hehehe. Basically what I want to do is make a simple workflow web editor; (you can see my mockup below) and I want to make something like this /, obviously, not so plex.

I'm using primefaces for the overall interface, but I have no idea how draw things in a canvas, I thought JQuery will do, even Mootools, but I'm just not sure, do you know any good JavaScript framework to draw diagrams (basic figures and connectors will do)?

I have done a little research, and found this: ui.ajax/#demos/elements.flowchart, do you think I can get it to work with JSF?

I'm new in the world of JavaScript and I haven’t found a good framework to draw diagrams in JavaScript. This is for a school project, so I have little time to develop, but I’m willing to learn a lot hehehe. Basically what I want to do is make a simple workflow web editor; (you can see my mockup below) and I want to make something like this http://www.diagram.ly/, obviously, not so plex.

I'm using primefaces for the overall interface, but I have no idea how draw things in a canvas, I thought JQuery will do, even Mootools, but I'm just not sure, do you know any good JavaScript framework to draw diagrams (basic figures and connectors will do)?

I have done a little research, and found this: ui.ajax/#demos/elements.flowchart, do you think I can get it to work with JSF?

• javascript
• ajax
• jsf-2
• primefaces

• The link to your diagram is not plete – nikhil Commented Jun 23, 2011 at 17:49
• Did you try to integrate ui.ajax/#demos/elements.flowchart with JSF? – Dosty Commented Dec 20, 2011 at 15:30

5 Answers 5

I would remend taking a look at Raphael

I haven't used it a whole lot, but it looks pretty capable and the documentation isn't bad. It is pretty easy to attach event handlers to the drawn objects, which sounds like something you will need to do a lot of.

You might want to read about the HTML5 canvass, it has some cool features that you can exploit to draw stuff.

The Flowchart.js library can help make some basic flow chart diagrams.

This first snippet will define the six items in the flowchart, including the starting and ending circles.

st=>start: Start:>http://www.google.[blank]
e=>end:>http://www.google.
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.
io=>inputoutput: catch something...

This second snippet defines the connections between items.

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

You might want to look at processing.js: http://processingjs/

use graphiti which provides exact what you want