
Graphviz in the browser - TAForObvReasons
http://mdaines.github.io/viz.js/
======
olragon
My Graphviz in browser with embedable alien URL.

[https://graphviz.gomix.me/](https://graphviz.gomix.me/)

Source:
[https://gomix.com/#!/project/graphviz](https://gomix.com/#!/project/graphviz)

Sample graph in SVG:

[https://graphviz.gomix.me/graphviz?layout=dot&format=svg&mod...](https://graphviz.gomix.me/graphviz?layout=dot&format=svg&mode=download&graph=%23%20http%3A%2F%2Fwww.graphviz.org%2Fcontent%2Fcluster%0A%0Adigraph%20G%20%7B%0A%0A%09subgraph%20cluster_0%20%7B%0A%09%09style%3Dfilled%3B%0A%09%09color%3Dlightgrey%3B%0A%09%09node%20%5Bstyle%3Dfilled%2Ccolor%3Dwhite%5D%3B%0A%09%09a0%20-%3E%20a1%20-%3E%20a2%20-%3E%20a3%3B%0A%09%09label%20%3D%20%22process%20%231%22%3B%0A%09%7D%0A%0A%09subgraph%20cluster_1%20%7B%0A%09%09node%20%5Bstyle%3Dfilled%5D%3B%0A%09%09b0%20-%3E%20b1%20-%3E%20b2%20-%3E%20b3%3B%0A%09%09label%20%3D%20%22process%20%232%22%3B%0A%09%09color%3Dblue%0A%09%7D%0A%09start%20-%3E%20a0%3B%0A%09start%20-%3E%20b0%3B%0A%09a1%20-%3E%20b3%3B%0A%09b2%20-%3E%20a3%3B%0A%09a3%20-%3E%20a0%3B%0A%09a3%20-%3E%20end%3B%0A%09b3%20-%3E%20end%3B%0A%0A%09start%20%5Bshape%3DMdiamond%5D%3B%0A%09end%20%5Bshape%3DMsquare%5D%3B%0A%7D%0A)

~~~
archgoon
Technically, that's GraphViz as a service, as it's actually executing on the
server.

This is executing clientside (for better or worse; yours is much faster :) )

------
afomi
Nice to see Graphviz trending.

I created [http://agile.pics](http://agile.pics) a couple years ago based on
the .js graphviz library.

The site is a thin wrapper that renders Graphviz of Sequence Diagrams from
GitHub gists.

Example:
[http://www.agile.pics/gist/163647fe40ae4911e469](http://www.agile.pics/gist/163647fe40ae4911e469)

~~~
doug1001
> Nice to see Graphviz trending

agree completely; GraphViz is extraordinary.

for intance, Yifan hu (U Florida faculty, i think) maintains a spectacular
gallery of very large graphs comprised of millions of nodes, all rendered
using GraphViz (persisted and input to GraphViz as incidence matrices):
[http://yifanhu.net/GALLERY/GRAPHS/index2.html](http://yifanhu.net/GALLERY/GRAPHS/index2.html)

The graphs in the gallery i liked to above were rendered using sfdp, one of
the 5-6 layout engines in GraphViz, and which is the GraphViz engine of choice
for very large _undirected_ graphs not limited to a particular layout geometry

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

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

~~~
tarp
dagre.js uses DOT.
[https://github.com/cpettitt/dagre-d3](https://github.com/cpettitt/dagre-d3)

~~~
piec
it uses the dot language, but not graphviz's dot layout engine

------
neandrake
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://hackerone.com/reports/88395),
[https://secure.phabricator.com/T9408](https://secure.phabricator.com/T9408)

~~~
neilkod
As both a heavy phabricator user AND a graphviz lover, your comment got me
quite excited....up until the part where it was removed :(

~~~
neandrake
If you look through the task description on the phabricator task I linked,
there is Paste file which has the contents of an extension to allow continued
use of graphviz, however they state it's insecure and not supported.

------
macawfish
This is very cool. I love graphs, they're really expressive.

P.S. if you're interested, just the other day I posted a related experiment of
mine on Show HN ...
[https://news.ycombinator.com/item?id=13308150](https://news.ycombinator.com/item?id=13308150)

~~~
theoh
This may be a tangent, but I feel like pointing out that I, for one, have
recently become more aware of the fact that a graph is really just a binary
relation.

This is not discussed much in all the talk about social networks. It's always
the graph (the "one") that's foregrounded, rather than the multiplicity of
edges, each a relation.

I know this is mathematically an obvious thing, but surely the relational
perspective is more amenable to generalization. We should make more of it.

~~~
macawfish
If you're thinking of weighted, directed graphs, a binary relation doesn't
quite fully represent it. In the weighted directed case, a graph is a function
from _Nodes_ × _Nodes_ → _Weights_ , (where _Weights_ ⊆ ℤ or _Weights_ ⊆ ℝ or
something like that)...

Which makes weighted graphs perfect for representation by _matrices_!

Studying adjacency matrix of weighted, directed graphs gave me a profound
realization matrices are a table of relationships between their "dimensions".
I never looked at matrices the same way again. I realized that the identity
column was literally the entries that represented a relationship between a
dimension/node and itself. I went down many rabbit holes... particularly the
question of graph isomorphism. That problem is a rabbit hole. Another rabbit
hole is the Hamiltonian cycle problem.

P.S. check out hypergraphs, which are not necessarily binary relations and
generalize graphs. Incidentally, hypergraphs have an _adjacency tensor_. I've
started to understand that tensors are like 'tables' of relationships between
dimensions + dimensions representing some or all of their possible
combinations.

By the way, if you can figure out a way to do fast multiplication of matrices
over degree-truncated polynomial rings, I'll show you a fast way to count the
number of hamiltonian cycles in a graph. These problems are intricately
linked.

~~~
theoh
Sometimes the matrix, like for example the adjacency matrix for Wikipedia
internal links, will be very sparse. Another reason to use relations rather
than an inefficient, mostly empty implicit data structure.

That Wikipedia adjacency matrix would be interesting to visualize, though.
There are tools out there for visualizing sparse matrices as graphs:

[http://yifanhu.net/GALLERY/GRAPHS/](http://yifanhu.net/GALLERY/GRAPHS/)

~~~
rspeer
I've never seen a visualization of a graph at the scale of Wikipedia that
conveys anything useful in the visualization. You just get a big hairball.

~~~
ygra
The best you can usually do is clustering, but at that point you can just as
well render clusters as single nodes and significantly lessen the strain on
the visualization or the layout. I'm always astonished when customers ask
about visualizing graphs with tens of thousands to millions of nodes. Thy
usually have never thought about the UX implications of that (let alone the
time needed to calculate a layout which results in an image so large that each
node is smaller than a pixel anyway).

~~~
MurrayHill1980
This is a very good point. In the early days of Graphviz we put a lot of
effort into making very readable diagrams of fairly small graphs, mainly in
drawing directed graphs (dot). We aimed at graphs with under a hundred
objects. We agree with the viewpoint that it is better to apply some sort of
analysis to reduce a larger graph to a smaller one that can be read and
understood. People still want to draw much larger networks. In fact it is
valid to want an overview of all the data, it's just not clear how to do this
with many thousands of random connections. Graphviz sfdp (based on Yifan Hu's
earlier work) and recent work on Maxent (which has a decent theoretical
justification) and from Ulrik Brandes group are good examples. One reason
graphviz neato does not make such great layouts of large graphs out of the box
is that it is straight statistical multidimensional scaling, and we just drop
shapes on top of the points, so they can overlap badly. We felt since people
are relying on it for data visualization we did not want to post process the
MDS layouts by default in a way that could be misleading. But you can turn on
overlap removal (neato or sfdp -Goverlap=false). We really should document all
this in one place that is easier to find and understand.

About the external shape loader issue - this code is somewhat centralized in
graphviz/lib/gvc/gvusershape.c and in gvrender.c which calls it, and I thought
it could be disabled at compile time (because we did address the security
concerns at one point) and there's a lot of other machinery to control compile
time features. Maybe John Ellson can comment here. Kudos to John for
recognizing the problems with the shape loader as soon as I proposed it but
apparently that didn't stop us at the time. Stephen North

------
afterburner
I see plenty of libraries and tools for displaying a graph that has been
defined in text code. Is there a really easy tool for generating graphs with a
gui, easily and intuitively, and converting that into text? The solutions I've
found don't make the node and edge creation easy enough.

~~~
falsedan
I like using yEd[0] for quickly drawing workflow graphs. It exports as
GraphML, but you'll have to convert it to dot yourself.

[0]:
[https://www.yworks.com/products/yed](https://www.yworks.com/products/yed)

------
greenail
Seems much like this:
[http://cpettitt.github.io/project/dagre-d3/latest/demo/inter...](http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-
demo.html) what are the differences?

~~~
tunesmith
So far it seems like dagre-d3 is the best option for those that want directed
graphs to be automatically redrawn (with transitions) based off of user input.
I'm continually looking for better options, though.

~~~
domoritz
viz.js is Graphviz recompiled to javascript with Emscripten. Dagre is the dot
algorithm implemented in JS. I found dagre to work really well in most cases
but Graphviz beats dagre in some edge cases (e.g. not order dependent, better
with hierarchies, ...).

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

~~~
jodrellblank
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](https://github.com/knsv/mermaid/tree/master/dist)

e.g. live online editor:

[http://knsv.github.io/mermaid/live_editor/#/edit/Z3JhcGggVEQ...](http://knsv.github.io/mermaid/live_editor/#/edit/Z3JhcGggVEQKICAgIEJbImZhOmZhLXR3aXR0ZXIgZm9yIHBlYWNlIl0KICAgIEItLT5DW2ZhOmZhLWJhbiBmb3JiaWRkZW5dCiAgICBCLS0-RChmYTpmYS1zcGlubmVyKTsKICAgIEItLT5FKEEgZmE6ZmEtY2FtZXJhLXJldHJvIHBlcmhhcHM_KTs)

~~~
johnlbevan2
Related HN Post:
[https://news.ycombinator.com/item?id=13326065](https://news.ycombinator.com/item?id=13326065)

------
markc
I've been using [http://www.webgraphviz.com/](http://www.webgraphviz.com/)

------
arnocaj
The hairball problem sometimes has solutions. this is a filtering soltuion
which works with all general layout methods:
[http://visone.info/wiki/index.php/Backbone_Layout](http://visone.info/wiki/index.php/Backbone_Layout)

It also scales for large graphs

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

~~~
philsnow
I use graphviz, [https://github.com/anaynayak/aws-security-
viz](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.

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

------
lacampbell
I actually had no idea that graphviz was actually a graph description
_language_ until I clicked on that link. I had used it before, but as a ruby
gem, so I thought it was just a library. So thanks!

~~~
jodrellblank
DOT is the language, and there are other tools which can work with it as well
as Graphviz (e.g. Omnigraffle) -
[https://en.wikipedia.org/wiki/DOT_(graph_description_languag...](https://en.wikipedia.org/wiki/DOT_\(graph_description_language\))

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

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

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

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

~~~
ellson
Doxygen (
[http://www.stack.nl/~dimitri/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...](https://romanegloo.wordpress.com/2012/03/29/generating-a-callgraph-by-
using-doxygen-and-graphviz-13/)

~~~
baby
Unfortunately not supporting my language.

------
artursapek
So this is a JS client that calls a C file that calls graphviz libraries? And
it renders the output SVG? Very cool.

~~~
shmerl
I think it's all compiled into JavaScript with Emscripten.

------
Klasiaster
Support for this would be very useful in a Jupyter notebook.

~~~
worldsayshi
Wouldn't Jupyter do most of the heavy lifting on the server side so it would
be more fitting to render with graphviz there?

~~~
hchasestevens
Definitely. Jupyter makes it very easy to display SVG, which graphviz
(naturally) targets out of the box - as an example, I've used this before in a
project to display Python ASTs (
[https://github.com/hchasestevens/show_ast](https://github.com/hchasestevens/show_ast)
).

------
dorianm
There is also Graphiz compiled to JS which works:
[https://github.com/mdaines/viz.js](https://github.com/mdaines/viz.js)

~~~
lotyrin
This is the same project.

------
amckinlay
Those layouts besides dot are truly horrible.

~~~
ygra
They all emphasize different things and thus are usually useful for different
graphs. dot has a hierarchical layout, circo arranges nodes on circles, neato
uses force-directed layout, etc. Of course they're not going to be all useful
for the same graph. When preparing our own layout styles demo [1] we took care
in crafting a graph for each layout and also explaining a bit on which layouts
are good for which use case. There isn't really a magic layout algorithm that
works on every graph to make it clearer. We have something built into our
graph editor that analyses the graph and picks a layout that might be
suitable, but that still errs often enough since it can't know about labels or
what the graph actually represents.

[1] [http://live.yworks.com/yfiles-for-
html/2.0/layout/layoutstyl...](http://live.yworks.com/yfiles-for-
html/2.0/layout/layoutstyles/index.html)

