This looks really awesome. The description language really needs documentation though; it's pretty hard to figure out what to do just from the examples and the parser's source.
Is there something similar to this for making server infrastructure maps? Just something where one can define db, web, network device, whatever, and then make a layout diagram with maybe name and IP address thrown in there?
And apologies for another "is there something like this for X" comment!
Graphviz or maybe yEd. With some work with the shapes, it's possible to make it look ok.
<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>
This is a wonderful tool for simple flow charting. I agree with other posters that a little more documentation would be nice and would also like to request the ability to export the underlying SVG (I'm still browsing source to see if that exists). I'm willing to help add both, thank you for this!
The RaphaelJS library, which this is built on, doesn't have a built-in SVG exporter (though there is a limited functionality for that, along with SVG export plugins), but in FireFox and Chrome, these two lines will get you the <SVG/> export:
var svg = document.getElementsByTagName("svg");
var code = svg[0].outerHTML;
Of course, that assumes you're just getting the first SVG, etc and so on. Anyhow, this does NOT work on IE because IE hates innerHTML / outerHTML for SVG elements.
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.
Yeah, it's a pickle. Raphael supports limited subset of SVG with VML failover compatibility, but export is limited because you have to support two technologies.
Then it gets weirder because RaphaelJS isn't exactly responsive-ready. Takes some work to make graphics just resizable (you can scale with the viewbox, but that's about it.) Recently, I switched to pure SVG (even when programmatically generated) because nested SVG elements provide basically a mechanism for relative/responsive scaling, positioning and such.
The guy who came up with RaphaelJS was ahead of his time, and I believe he got hired by Adobe in part thanks to the project's exposure. The development stopped awhile back, and it shows, which is really sad because I liked how the programming style for Raphael is done.
One takes the SVG from the browser, encodes it and sends the <svg> as the body of an email (inlined, not as an attachment). Here's the relevant part:
function render() {
var link = document.createElement('a'),
time = Date.now();
link.href = 'mailto:? subject=exported%20sketch&body=%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E'+encodeURIComponent(new XMLSerializer().serializeToString(board));
link.id = time;
document.body.appendChild(link);
document.getElementById(time).dispatchEvent(new MouseEvent('click'));
document.getElementById(time).parentNode.removeChild(document.getElementById(time));
}
The other prepares it as a file and creates a download link (not seen on screen) and programmatically clicks that link to download it:
function download() {
var link = document.createElement('a'),
time = Date.now(),
svg = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">'+new XMLSerializer().serializeToString(board);
link.id = time;
link.setAttribute('download','sketch.svg');
link.href = 'data:text/html;charset=utf-8,' + encodeURIComponent(svg);
document.body.appendChild(link);
document.getElementById(time).dispatchEvent(new MouseEvent('click'));
document.getElementById(time).parentNode.removeChild(document.getElementById(time));
}
But be forewarned, since SVG uses XML namespaces instead of HTML, using things like '.innerHTML' won't work in certain browsers (iOS Mobile Safari for example) while innerHTML does tend to work as you would expect on most desktop browsers!
Canvas would work for exporting a bitmapped snapshot of the vector, but lacks the following:
- filesize: SVG is vector, but Canvas renders a bitmap
- non-destructive: SVG is human-editable after the fact, bitmaps only 'remember' the value of the top-most pixel and 'forgets' everything that has overlapped
- human-editable: Though not pretty, SVG's can be read and edited by hand, bitmaps require a graphics tool to edit easily
Very cool! I really hate getting a bunch of visio flow charts to describe processes - those aren't things that I can easily modify without having the proper application. Does anybody know of other tools that take some sort of simple language and converts it into a flow like this?
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.
Cool but I want to encode the textual representation as a URL and have a service return the SVG so I can embed this in e.g. a GitHub Markdown document. See e.g. http://yuml.me
