What is the best tool to allow web users to create flowcharts/diagrams?

Question

I'm creating a web application in which teachers need to be able to easily create educational diagrams, flowcharts, basically:

• boxes and circles with text in them
• text labels
• ability to upload and embed graphics
• easy to make lines with arrows, etc.
• lots of ready-made icons and clipart would be nice
• free and opensource would be nice

Basically I'm looking for a website RichTextBox editor but with basic Visio functionality which would allow the user to:

• click on "create diagram"
• create it WYSIWYG with the mouse
• save it (on the server)
• use it in the application

It could use Javascript/jQuery, Flash or Silverlight, doesn't matter, as long as it runs in a browser.

Answer 1

Have you looked at GoDiagram? I've not tried it but it's the only component I've seen that fulfils this need.

Answer 2

I suggest flash. I have seen sites that implement this kind of stuffs easily in Flash. You can achieve the same using html and JavaScript too but it will need painful programming. Silverligt in my opinion is not matured yet. But I am sure we can see some improvements soon. And may be you can consider Java applets too.

Check the site www.geni.com. they have a family tree building interface there done in Flash.

Answer 3

look at Microsoft Chart Controls for Microsoft .NET Framework 3.5.

Answer 4

The Firefox Pencil Add-on allows users to make diagrams and save them as .png files:

Answer 5

Gliffy have a free option that is supported by ads. As well as having a decent API. I like the look of the service, but haven't used them yet. (it's in the pipeline...)

Answer 6

I think your best option could be to use Google Docs

Sketchy (the drawing feature in Google docs) is very powerful and I think will do what you want.

Answer 7

https://bubbl.us/beta is very easy to use and create PNGs but quite limited in features, the google docs solution is good (thanks @Dave Beer) but the size of the screen is static, you can't make large PNGs: http://superuser.com/questions/76630/is-there-a-way-to-change-the-size-of-the-drawing-area-in-google-docs-insert-dra

Also not to be missed: yEd: http://www.yworks.com/en/products%5Fyed%5Fabout.html

I did some more research on this and choose yEd as the tool we will use for the project, here are some examples of what yEd, Google Docs and Firefox Pencil can do: http://tanguay.info/web/examples/googleDocsImageDraw/

There are lots of these if you keep looking around, here some more, each with their advantages and disadvantages:

• http://www.xmind.net/downloads
• http://live.gnome.org/Dia
• http://yuml.me