How can I use javascript to draw diagrams?

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 complex.

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.org/#demos/elements.flowchart, do you think I can get it to work with JSF?

I would recommend 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.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
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.org/

use graphiti which provides exact what you want