
Flowchart.js – Simple SVG flow chart diagrams from textual representation - dola
http://adrai.github.io/flowchart.js/
======
mistercow
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.

------
joaomsa
Reminds of
[http://knsv.github.io/mermaid/flowchart.html](http://knsv.github.io/mermaid/flowchart.html)

Both could use better node layout engines and support for DOT syntax or might
be easier to adapt graphviz with Emscripten.

------
whosbein
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!

~~~
chair6
Check out [http://blockdiag.com/](http://blockdiag.com/) and siblings
(seqdiag, actdiag, nwdiag).

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

~~~
vinodkd
Thanks for this link. I was going to say that graphviz covers it, but
blockdiag is much simpler (and with extra features)

------
sntran
Remind me of this old service:
[https://www.websequencediagrams.com/](https://www.websequencediagrams.com/)

------
anders30
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!

~~~
pp19dd
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.

~~~
Someone1234
You could use this to convert from SVG to a Canvas element and then from
Canvas to an image (via canvas.toDataURL("image/png")):

[https://github.com/gabelerner/canvg](https://github.com/gabelerner/canvg)

Still needs a very newish browser however. No IE 6-8 (& 9?) support.

~~~
anders30
I would prefer the SVG itself but this is an ideal short term solution. Thank
you very much!

~~~
err4nt
I have written two ways of exporting SVG that you can inspect here:
[http://staticresource.com/sketch.html](http://staticresource.com/sketch.html)

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

------
Eclyps
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?

~~~
briancleland
Graphviz for the web:
[http://mdaines.github.io/viz.js/](http://mdaines.github.io/viz.js/)

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

------
escherize
Is there something like this for directed graphs?

~~~
huntedsnark
GraphViz can output directed graphs in a variety of formats:
[http://www.graphviz.org/](http://www.graphviz.org/)

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.

------
burtonator
AWESOME that it's SVG but dot/graphviz supports SVG output.

What I've been doing is I just have a dir of .dot files and then I have a
gen.sh script which writes the SVG/PNG files.

Dot is a bit more low level but more powerful. Great for documenting protocols
or state machines.

------
foreigner
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](http://yuml.me)

------
fred2133
I might have started with DOT. I get that this is more specialized, though.
Nice work.

------
kerseykyle
is there a way to group together conditions?

