Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Flowchart.js – Simple SVG flow chart diagrams from textual representation

adrai.github.io

Post reply on HN
Print view View original

1–10 of 26 posts

Re: Flowchart.js – Simple SVG flow chart diagrams from textual representation

#3

Post by 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?

Re: Flowchart.js – Simple SVG flow chart diagrams from textual representation

#5

Post by 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!

Re: Flowchart.js – Simple SVG flow chart diagrams from textual representation

#7

Post by _hfke »

anders30 wrote: post #5

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

Re: Flowchart.js – Simple SVG flow chart diagrams from textual representation

#9

Post by Someone1234 »

_hfke wrote: post #7
anders30 wrote: post #5

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 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 b…

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

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

Re: Flowchart.js – Simple SVG flow chart diagrams from textual representation

#10

Post by briancleland »

Eclyps wrote: post #3

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?

Graphviz for the web: http://mdaines.github.io/viz.js/

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

Post reply on HN