Flowchart.js – Simple SVG flow chart diagrams from textual representation (opens in new tab)

They have an interactive shell for it - experiment with http://interactive.blockdiag.com/nwdiag/.

<grumpyOldGuy>But I guess everything have to be rewritten and reinvented in js nowadays... I kind of getting why all the COBOL geezers where tired of all the shit going around again, just solving the same old shit in another way instead of truly getting somewhere, or why Douglas Engelbart got depressed from spending his last 50 years looking at people reinventing his stuff...</grumpyOldGuy>

Cool though.

    var svg = document.getElementsByTagName("svg");
    var code = svg[0].outerHTML;

One tiny thing that stands out is that RaphaelJS is built to support even IE6, and yet this flowchart program seems to bork under IE.

Edit #2: forgot to mention, Raphael was specifically designed to fallback to VML if SVG is unavailable, so the export functionality would need to support both or pick and choose, or just reconstruct programmatically. A dilemma indeed.

http://nytimes.github.io/svg-crowbar/

I recently worked on a project where we started off looking to use something similar to what op posted. Despite being a very old library, nothing really provided the level of stability and options that Graphviz had. If you can get past the somewhat odd syntax, I would highly recommend it for complicated directed graph output.

Lots of directed graph options. I'd argue the model data is even simpler to create and comprehend, but there's a LOT more to GoJS than there is to this project. Also it isn't free.

(Disclaimer: I'm a GoJS developer)

Nomnoml, a tool for drawing UML diagrams based on a simple syntax: http://www.nomnoml.com/