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

Graphviz in the browser

mdaines.github.io

Post reply on HN
Print view View original

51–60 of 74 posts

Re: Graphviz in the browser

#51

Post by johnlbevan2 »

jodrellblank wrote: post #35
_lce0 wrote: post #3

Nice work! I needed to use something to render directed graph in the browser and the biggest problem was the download size. This library is 851KB gzip, which is way better than the 1.3MB I was using. Maybe being able to bundle the engines (and output format) as separate modules could reduce its size? So once again, great work!

Mermaid.js can render directed graphs in the browser, and the minimised JS and CSS are ~620 KB. https://github.com/knsv/mermaid/tree/master/dist e.g. live online editor: http://knsv.github.io/mermaid/live_editor/#/edit/Z3JhcGggVEQ...

Related HN Post: https://news.ycombinator.com/item?id=13326065

Re: Graphviz in the browser

#52

Post by rch »

ygra wrote: post #42
rch wrote: post #9

Does a dot->gis conversion exist? Would anyone aside from me want such a thing? I'd like to render complex graphs with Mapnik, as I do for OSM (which is just a graph after all).

Since you'd need the graph layouted already anyway, I'm wondering what Mapnik would bring. Nice label placement along paths is about the only thing I can think of right now. Or tiled rendering maybe, but there should be easier ways for that, too.

Tiled rendering is what I'm most interested in, but I'm not aware of any easier way to go about it. The alternative would be to code something from scratch... But my graphs look so much like the road network I'm inclined to leverage what's out there already.

I'd be very grateful for suggestions.

Re: Graphviz in the browser

#53

Post by ygra »

marktangotango wrote: post #49
reconbot wrote: post #2

This is a beautiful thing. D3 can do a lot but very few programs have replicated what graphviz's dot can do.

There used to be several commercial alternatives in this space (browser graph drawing): jgraph/mxgraph, tom sawyer, yworks (yed) had a browser library. It's curious that these never get discussed when this topic comes up. It's been a few years, so they may no longer around. The hard part of graph visualization has always been the layout algorithms. I tend to think that the ubiquity of graphviz has been an impediment…

Considering I'm still getting paid, I can say that yWorks is still around ;-) Since about a month with a new major version of our JS library as well. mxGraph apparently transitioned to open-source with paid subscription by now – we'll see how well that works out.

I guess the reason that commercial solutions rarely get discussed in such contexts is that they are quite expensive if you're a single developer hacking away at a side project. Even our cheapest license is already five figures (considering Tom Sawyer also rather target enterprise customers they won't be cheaper) and to be honest, I'd think hard about paying that if I'm not absolutely sure I'd get the money back somehow. For larger companies it's less of an issue, of course, or the cost just gets billed to their customer as part of the project cost.

Re: Graphviz in the browser

#54

Post by ellson »

leni536 wrote: post #38
neandrake wrote: post #22

Phabricator had allowed for specifying dot notation in their markdown (remarkup) which would use graphviz to render the images in the comment. I loved this feature but it was removed due to potential exploits [0]. Is anyone familiar with how graphiviz-as-a-service could be possible while addressing these concerns? [0] https://hackerone.com/reports/88395 , https://secure.phabricator.com/T9408

My guess is that seccomp blacklisting file access should be enough. It wouldn't be too hard to patch graphviz to disallow file access. And/or containerising it to only have write/read access inside a single, dedicated folder.

Graphviz has code to restrict file access when used in a web server. Its in lib/common/utils.c:safefile()

But to be honest, a container approach would probably be better today.

Re: Graphviz in the browser

#55

Post by athenot »

reconbot wrote: post #2

This is a beautiful thing. D3 can do a lot but very few programs have replicated what graphviz's dot can do.

I still think dot could be reimplemented in d3. I agree dot is very expressive but it's starting to feel like TeX where it works great until you need to mix it into more recent applications.

Re: Graphviz in the browser

#57

Post by marktangotango »

ygra wrote: post #53
marktangotango wrote: post #49

Earlier quoted context omitted.

There used to be several commercial alternatives in this space (browser graph drawing): jgraph/mxgraph, tom sawyer, yworks (yed) had a browser library. It's curious that these never get discussed when this topic comes up. It's been a few years, so they may no longer around. The hard part of graph visualization has always been the layout algorithms. I tend to think that the ubiquity of graphviz has been an impediment…

Considering I'm still getting paid, I can say that yWorks is still around ;-) Since about a month with a new major version of our JS library as well. mxGraph apparently transitioned to open-source with paid subscription by now – we'll see how well that works out. I guess the reason that commercial solutions rarely get discussed in such contexts is that they are quite expensive if you're a single developer hacking awa…

Ah I see, since you're on the inside I'll ask, why haven't you (i.e. yworks) implemented the so-called delta drawing for flow charts? Seems like that would be a real differentiator? Or have you and I haven't been paying attention?

Re: Graphviz in the browser

#58

Post by ellson »

baby wrote: post #20

I could never use this to make a callgraph in a project. Probably because I have two many lines. How does a .dot file looks for you?

Doxygen ( http://www.stack.nl/~dimitri/doxygen ) automatically creates callgraphs from sources code using graphviz.

A good intro is at: https://romanegloo.wordpress.com/2012/03/29/generating-a-cal...

Re: Graphviz in the browser

#59

Post by ellson »

philsnow wrote: post #33
pmiller2 wrote: post #26

Graphviz is great. I did a project in undergrad that used https://github.com/jrfonseca/xdot.py to render data structures into a nice, pretty, visible form.

I use graphviz, https://github.com/anaynayak/aws-security-viz , and xdot.py somewhat regularly to mechanically generate pretty graphs of things like connectivity between EC2 security groups. It's wonderful and I love being able to use my $EDITOR / awk / sed / etc to manipulate the results.

There is also "vimdot" in the graphviz distribution.

Its really just a hack where graphviz uses inotify() to watch for changes in a file being edited by vim.

Re: Graphviz in the browser

#60

Post by ygra »

marktangotango wrote: post #57
ygra wrote: post #53

Earlier quoted context omitted.

Considering I'm still getting paid, I can say that yWorks is still around ;-) Since about a month with a new major version of our JS library as well. mxGraph apparently transitioned to open-source with paid subscription by now – we'll see how well that works out. I guess the reason that commercial solutions rarely get discussed in such contexts is that they are quite expensive if you're a single developer hacking awa…

Ah I see, since you're on the inside I'll ask, why haven't you (i.e. yworks) implemented the so-called delta drawing for flow charts? Seems like that would be a real differentiator? Or have you and I haven't been paying attention?

I have to admit, I'm not familiar with that¹. Do you have a link to a paper or something; I could ask our layout team.

But probably the answer will be that few customers asked so far and/or it might be fairly easy to accomplish with customizing one of the existing layout algorithms. We did something similar with our example BPMN implementation where a pre-processing step applied constraints for the hierarchic layout based on the node/edge types in the diagram. The vast majority of things customers ask of us are actually fairly easy to implement without necessarily having them in the library. So we have very few layout algorithms that are applicable to exactly one kind of diagram (family trees are an exception, but even that is just a wrapper around a more general-purpose algorithm).

The advantage is that there are very many knobs and configuration options to fiddle with to get the layout you want. The disadvantage is that there are very many knobs and configuration options to fiddle with, where having special layouts for certain types of graphs might be easier but not as flexible.

In the end, it's a library and the users (from our perspective) are developers and those shouldn't shy away from writing some code. It would be nice to also appeal to people who just want some data laid out nicely. To some extent that works already², but such wishes have to be balanced with what people are willing to pay for :-)

______

¹ Happens often with very domain-specific graphs; last thing mentioned I didn't know was some kind of diagram to describe pipes, valves, and water flows in buildings.

² e.g. http://live.yworks.com/yfiles-for-html/2.0/databinding/graph... has only very minimal user code

Post reply on HN