We're reluctant to be exposed to too much anger about misfeatures in 20 year old code that was basically a prototype that escaped from the lab, but go ahead, ask us anything.
We've gotten a lot of help lately from Magnus Jacobsson, Matthew Fernandez and Mark Hansen on cleaning up the website and the code base, even some persistent bugs we could never find ourselves.
Improvements that would benefit the community the most?
- better default styles that don't look like troff from 1985
- better default layout parameters in neato than statistical multidimensional scaling based on shortest path
- more expressive graph language with classes or templates
- more robust handling of error conditions like out of memory
- better documentation to help people find useful tools or just know what they should be looking for
- find someone to donate a generic orthogonal routing algorithm based on a modern algorithm since people want this
- it would be a big effort, but move the core algorithms to a framework that supports interaction with layout generation
I love graphviz and have used it as part of my job for over 15 years.
That said, I have spent entirely too much time manually searching through the 100-odd dimensional Graphviz parameter space trying to get aesthetic results. So much time in fact that occasionally it's easier to fire up Omnigraph and draw the thing manually.
Graphviz would be ideal if it had some kind of meta-parameter settings that could reduce the tendency of its output to resemble an unreadable rats nest when the number of nodes exceeds about 20. I know that's part of the point of neato vs. dot, and that some parameters are effectively meta-parameters, but Graphviz still needs a better "porcelain" (in git-speak) with fewer dimensions.
This is an excellent idea. In general, allowing a human to say they would like to expend more machine cycles to search for better renderings would be useful. This would be an interesting summer intern project, It could probably be layered on top of the existing software.
I've had the same experience. What could help is a constraints-driven drawing, i.e. we could split the drawing space into an invisible grid and say that these nodes must be in cell 1, those nodes in cell 2 and so on.
Been using graphviz on and off for ~20^H^H15 years (seems like 20) and it was my introduction to graph theory and concepts. Just wanted to thank the team for maintaining an incredibly useful and versatile tool.
I'd rather have graphviz expose a kind of layout engine such that it can take the size each node will occupy (determined by whatever's going to draw them) and use that to create a layout, feeding path info to something that can handle the actual drawing, than have more drawing options in Graphviz itself. I think that doing so is (so far as I could tell, last time I tried) extremely awkward at best is why it's not embedded in basically everything that has any need whatsoever to draw graphs.
So, I guess:
> - it would be a big effort, but move the core algorithms to a framework that supports interaction with layout generation
If that's what you mean by that.
It'd make it way easier to pretty up Graphviz output. I'd rather have "renderer" applications that run on top of Graphviz and have Graphviz itself lose all but its most basic build-in drawing capabilities, than have more of that built into Graphviz itself.
One problem with this is that—at least in some Graphviz layout engines—"the size each node is going to occupy" is chosen to minimize the energy/stress of the graph, sort of like how line breaks on TeX pages are chosen to optimize for whole-page metrics.
For example, in a graph with only two nodes, where each node contains a long text string, there is no "pressure" on the nodes, so the default result might be to not break the text, creating two wide, short node-boxes, and then to arrange them with one above the other. Whereas if you have many such nodes in a densely-connected web, the text in them will likely be wrapped in order to make the nodes more box-shaped, so that nodes can fit between the cuts of the pairwise-acute spirograph-like edge lines.
In order to resolve this sort of layout, Graphviz has to understand a lot of things about fonts, padding, and borders (just like TeX does.) It's already doing "rendering" at that point, even if the result gets thrown away.
I have used Graphviz that way. It wasn't too bad. The most annoying part was inconsistency in input and output units. Some properties expect values in pixels, some are in inches, and dpi for input and output are different with only one of them being configurable.
Otherwise code was quite straight-forward: create context, create nodes, create edges, set attributes, run layout, read positions and edge path coordinates, do the cleanup.
That doesn't let you tell graphviz how large you want to draw each node, right? Just how large graphviz would draw them? What I'd like is a way to take styling and drawing outside GraphViz. It's important (for what I'd like) that graphviz know how large each node is going to be so it can route around them. If you apply, say, a typeface or padding even very slightly different than what graphviz was using, or if there are just slight differences in, say, how a given browser renders a <div>, it could change the size of the rendered nodes, and you end up with edges drawn under/over nodes.
Much cleaner (and way more useful) to be able to tell graphviz "this is how large I need this node to be, and that one this size, and the other one such-and-such, and they are connected thusly, now please give me coords for a layout"
This isn't just for looks, either: if you want the resulting graph to be interactive, and perhaps even graphically (drag-n-drop) editable after the initial graphviz auto-arranging, you're probably wanting output that's not exactly in graphviz's wheelhouse. You want to tell it node sizes and have it tell you where to put them.
Hey there, I'm the owner of webgraphviz.com and I am totally excited to see that it made it to the front page of hackernews!!
THANK YOU for making this wonderful program.
Also special thanks to the emscripten team for their wonderful transcompiler.
I am constantly amazed at all the WONDERFUL software that exists on unix as single threaded applications (required for emscriptem asm.js output). There could be a whole sub-culture of webdev which uses these old unix programs. I feel like it's an untapped resource, truly.
Agreed 100%. I don't care if graphviz looks a bit dated -- it's straightforward and easy to generate. (I wouldn't say "no" to having more layout algorithms, though!)
My favourite personal use of Graphviz: A few years ago I inherited a large, legacy codebase that was very hard to understand -- full of global state modified from dozens of functions, obscure function names, etc. I used a C parser (forget which one) to convert the code to a set of ASTs, and then hacked up a Web-based, interactive graph generator, using Graphviz to create the interactive SVGs. The "app" let you click on a function (node) and zoom in to examine its callers, callees, global accesses, global mutations, etc., with a "radius" parameter to decide how much of the large graph you wanted to see. Every node was clickable, and would ask the Web app to generate a new graph centered on that node.
It was an awful, throwaway hack, and was only about 90% accurate due to parsing/preprocessor challenges. (At times I resorted to annotating the code with magic comments to facilitate graph generation -- not a sustainable approach.) But a day spent hacking with Graphviz dramatically improved my learning rate, and it was also useful in helping describe the code to others.
I have done the same and it totally saved my ass on legacy code that I was tasked with extending or fixing.
I just pumped the output of dot to a static web page.
It was awesome.
Also, I rendered the entire graph as a single page, and started printing it tiled to multiple 8.5x11 sheets. One of the women I worked with that did all our document versioning and tracking saw me taping the sheets together, and asked me for a copy of the document. An hour later she walked into my office with a single page print from a 42" plotter. That hung like artwork on my office wall for about eight years.
She was a wonderful soul for that. And the print was beautiful.
I'm not a TeX user, are you asking for:
1. TeX output file format, but with current font drivers
2. Current output file formats, but with TeX fonts
3. TeX output with TeX fonts
4. Something else
I'm asking for an easy way to use the same fonts with exactly the same size in both places, I do not really care how it is implemented. Maybe it is already possible and the only missing thing is the documentation to do so. I can do it via some pstricks hackery, and it sort of works, but the process is a bit indirect and not really comfortable.
Continuing to show my ignorance, would adding a TikZ output option be a good thing? I'm fuzzy as to Tex/LaTex/TikZ relationship. The graphics part in TikZ looks pretty simple to do. The font/equations/... stuff is an unknown story.
at some point I was able to do this via tex->dvi->postscript->pdf conversion - basically getting the font installed in ghostscript let me use it directly from graphviz when rendering to eps and installing the font into the tex/postscript machinery let me also reference the same font.
granted, this was not fun, and also now 'modern' tex (not sure about graphviz) will use fontconfig on linux which may require different machinations.
so obviously your point on 'better integration' still stands unless I'm just out of date on how to do it..
Not OP, but I find yEd by yworks is a really good editor, and they also have a really cool developer library yFiles for HTML. It’s all proprietary, but just amazing to work with. Here’s an example of what you can do they made for GDC2019: https://live.yworks.com/demos/promo/GDC2019/
(It’s not mobile friendly however).
(yWorks employee here, having worked on that Graph Drawing Contest)
Thank you for the kind words.
I've tried to make it mobile-friendlier, after our marketing team told me that most people who come via Twitter use a phone. But we kinda ran out of time, so I only managed to fix the most egregious problems. By now I also have a few ideas how to get the edge paths to be much better (and built-in Bézier spline routing would have helped, but that was only released publicly ... two days ago). Admittedly, while that layout has been produced by yFiles' hierarchical layout it needed a bit massaging to do so properly (about 200 lines of custom layout code, if I remember correctly). However, a proper library that gives you that flexibility helps tremendously, of course. Sometimes, trying to get Graphviz to do the right thing can be pretty complicated and may involve hacks like invisible edges to force a certain layering (although that was way back and I didn't know about "rank=foo" back then; perhaps the invisible edges were really not needed).
In any case, yEd Live (https://www.yworks.com/yed-live/), built on yFiles for HTML, also has an undocumented, incomplete, and rudimentary Graphviz import. I've got a fairly exhaustive list of issues and missing features, but little time to tackle it, sadly. This is further complicated by the fact that the DOT language uses attributes to describe the graph structure, visual attributes of items, and to control layout settings. That makes mapping Graphviz to anything else a bit hard.
I'm excited for better default styles and colors. I love the text editing experience of Graphviz but spend a lot of time trying to style it unfortunately.
This is something I've not only thought out but have a design document surrounding.
What I want from graphviz is a rich library, based on D3, for building interactive web components for graphviz SVG output.
dot is an absolute dream for constructing automatic representations of graph and tree data, including great stuff like lexical scope and project maps. But simply building it into a raw SVG runs the risk of drowning in detail.
If this library were built in support of a graph generator SPA, something that lets a user tweak the huge state space of graphviz style parameters in real time, well, sky's the limit.
I work with parsers and abstract syntax trees professionally. I've been salivating over the kind of legibility we could introduce into this space with just such a library.
I know it's a huge undertaking! I think you'd find a lot of enthusiasm for actually doing it, if you organized the space to make it possible and put out a call to action.
I was thinking something similar. The default styles don't look super shiny, I suppose, but they are clean, which I appreciate. All in all, I think it does a good job of supporting my main reason for choosing graphviz over something like Visio: It encourages me to get the illustration done and then get on with my day without getting caught up with trying to make everything perfect.
I will turn to Visio if I need to make something presentation-quality, so there's that.
I have similar feelings about the lack of ability to fine-tune the layout: I've started seeing it as a feature, because it gives me a great feedback mechanism: If the graph is too complicated for Graphviz to lay out nicely, I take that as a sign that the thing the graph represents needs to be simplified. I've even gone so far as to incorporate Graphviz into my definition of done for a refactoring project: I kept a dotfile representing the current state of the dependency graph, and stopped refactoring when the rendered graph stopped making my eyes water.
"20 year old code"?!?
I have been using graphviz since early '90s, when ek provided a first prototype.
You mention a possible improvement of classes of nodes/edges. If I understood correctly, this is typically used for styling, and is most commonly achieved via a pre-processing step. We all use our own tools for that (I've personally used m4, cpp, sed, Tcl, and I'm sure others that I forget).
Graphviz is one of the tools that I use in a wide variety of circumstances. I'd say the most satisfying cases from all these years were (a) producing a genealogical graph of around 1000 people drawn with neato (very organic-looking!); and (b) producing orgcharts for an organization (that had to look acceptable to what people were used to seeing).
Right now my biggest gripe is I can't tell clusters to go to a specific rank. Although enabling "newrank" helped a lot, clusters I want to be the first, or last of the whole graph, still end in the middle for whatever reason, resulting in lots of edges that curve backwards, so the graph overall shape instead of looking like a diamond or a wrapped candy, instead looks like a big mess with lots of U shaped edges that go all over each other resulting in something completely impossible to read.
EDIT: also, being able to create "venn diagrams" of sorts with subgraphs would be awesome, basically allowing a node to be in several clusters, and have the clusters borders cross each other so that the item is inside all of them.
> - better default styles that don't look like troff from 1985
Design is not something that should be tied to a particular decade. It's not fashion. Good design is timeless and only adopts to new technologies/media. Design is how well a particular solution works for the purpose of it. If it looks like 1985 and works well, there is absolutely no reason to change it. If it doesn't, then there is no need to look at "modern trends", instead we need to go back to the drawing board and find out what the problem is first.
Can you identify the problem with the design besides the superficial aesthetic (which can be easily themed)?
> Design is not something that should be tied to a particular decade.
Design does not exist in a vacuum. Technological progress, for example, creates the need for design change. Microsoft's switch from a serif to a sans serif font as the default typeface for Word was a good move, because we rarely print documents anymore and a the best design for print is not the same as the best design for screens.
20th century physics books had a distinct design for illustrations. It was beautiful and functional. But it was also designed around the limitations of their eventual monochrome (not even greyscale) print. A 2020 textbook does not have the same limitations and should not be designed with the same set of constraints.
> Design is how well a particular solution works for the purpose of it
That's one half. The other one is how people feel while using it. 1985 aesthetic makes people feel bad. Thus design is half bad. Or, for you maybe, half good.
:D The joy of aesthetics and style is that there's enough room for more than one of us to be right, and certainly enough room for all of us to be wrong :-)
Many would argue good fashion is timeless as well. A good chunk of haute couture from decades past would be seen as modern and appealing today. (Which is why the houses like to repackage and ship them as such...)
> Fashion is a popular aesthetic expression at a particular time, place and in a specific context, especially in clothing, footwear, lifestyle, accessories, makeup, hairstyle, and body proportions.
Fashion is inexplicably linked to a particular time. Just like Art - Art evolves with time and it is part of the culture, current events, etc.
Design is not (unless you want to include say media as it changes through time. For e.g. print -> digital media).
I just want to say thank you for releasing this. I have been using graphviz since 2008. It is part of an internal tool to visualize information in the financial industry. It has been a life saver.
I've been looking into supporting UTF-8 characters to create graphs with non-English text using Graphviz in an application that's used on a number of different machines. Is there a straightforward way of doing this right now?
It would be nice if we could add a fonts folder in our application folder and set a relative path to it for Graphviz to perform its lookup in without having to rebuild Graphviz without fontconfig.
I took a closer look at the FAQ and it doesn't sound like Graphviz can do exactly what I'd like it to do.
"It is essential that a font which has the glyphs for your specified characters is available at final rendering time."
It sounds to me like UTF-8 encoded characters won't show if the font isn't available on the machine, in which case we'd have to either somehow force a font install or ideally just package the font with the application. The latter would require rebuilding Graphviz without fontconfig enabled, I think?
Just an appreciation post, not a question. I have reached out to graphviz as my tool of choice for diagramming for my entire career. Sometimes years go by without me using it, but I always end of finding a place to use it.
Recently I started teaching Software Development, and once again reached for graphviz for a huge variety of classroom uses.
> - more expressive graph language with classes or templates
There are some who view the dot language as an "assembler" language, good as the output for graph generators. It would be desirable to have more expressive costructs, but barring that, a lot can be achieved by using gvpr, m4 or various scripting languages.
I found a great use for Graphviz recently. I needed to implement a model that was created by a scientist with no programming experience outside of a Fortran class in the early 1980s. Meanwhile, I didn't have much knowledge of the subject matter or terminology. The model was described in a multipage Excel file and an accompanying PDF and I implemented it in Clojure.
In order to help us communicate, I wrote a script that built a data-dependency graph directly from the code and produced a diagram with Graphviz for the scientist to review. It helped us to catch a couple errors resulting from my misinterpretations and it gave the scientist confidence that the code accurately reflected his design.
A couple of important tips that the article omits:
1. For manual editing, dot -Tx11 foo.dot displays the graph in a window and updates it automatically whenever you save. So you can have an editor window open and the dot window and see the results of every tweak. For automatically generated graphs, this provides you with a window that you can update by overwriting a file with a new graph description.
2. Although HTML nodes are more versatile, shape=record is much easier, and sufficient for a pretty wide range of diagrams.
For doing quick stuff by hand if you don't have Graphviz installed, or if you're stuck on a Mac without X-Windows, there's https://graphviz.christine.website/. I like Graphviz a lot; as other people point out, TikZ is capable of a wider range of graphics, and also you can write programs to generate graphs in TikZ. But Graphviz is often enough.
subgraph types {
node [shape=square];
subgraph ints {
node [label=int];
int bool fd u32in die stride;
}
long int s32 u8 u32 -> ypix ywin;
...
Its expressivity is limited, since it depends on a hierarchical classification of your nodes and arcs that doesn't always eliminate all duplication, but it's usually enough to manually style the nodes the way I want without too much hassle. Because "types" and "ints" aren't "clusters", they don't affect the layout. (If you do want to use clusters, that can make this approach more difficult.)dnl
I haven't ever been quite desperate enough to use m4 to generate Graphviz files, although clearly it is a good fit. My experiences with m4 are more in the nature of getting way too much rope to hang myself with and then having a terrible time debugging. I wrote an HTML-generating macro language in m4 in 1994 and have never stopped regretting it.dnl
I do agree about the Makefile. In Dumpulse I used the following Makefile rule:
You only need a couple of line to plug in automatic m4 preprocessing in Makefile. And perhaps add a .SECONDARY line if you are debugging to prevent the intermediate .dot files from being deleted.
%.dot: %.dot.m4
m4 < $< > $@
I use m4 to implement something akin to css classes, only a bit more powerful because you can do pseudo-subclassing. E.g.
Right! That kind of crosscutting thing is tricky to do with the hierarchical nature of subgraphs. Without some kind of macro preprocessor you'd end up doing something like
This obviously has the drawback that if you change the importance font, you have to change it twice instead of once, and you might forget. And clearly there are cases where that kind of duplication is a bigger problem than the difficulties with m4.
Shameless plug: I created an online Graphviz/dot editor which is powered by a language server that provides auto completion and refactorings. It uses a WASM version of Graphviz to render the graph. You can try it out here:
One huge advantage of Tikz is that you can use LaTeX equations natively. E.g. subscripts and superscripts in graphviz involve jumping through a few hoops, iirc.
That's one of its main uses. One thing it does not do (or I don't know how) and graphviz does, though, is arranging nodes intelligently so as to minimize clutter and edge distances. That's one of the nice things in graphviz.
> One thing it does not do (or I don't know how) and graphviz does, though, is arranging nodes intelligently
That's exactly what "graph drawing" means [0]. Can tikz choose the position of the vertices itself or you have to specify the positions yourself? If it is you who chooses the positions, then tikz does not do "graph drawing".
That's great! Did these people really implement graph drawing algorithms as latex macros, or does it call an external program? I'm afraid to look it myself, lest I discover the truth.
Wow, that was a long time ago, very fun project to work on. But yeah, without deep knowledge of the TeX side you'd likely still struggle a bit to understand how the two sides interact, at least it was a bit of a struggle for me, maybe / hopefully it got a bit better in the meantime.
And thankfully LuaLaTex was ready enough at that time, I can't imagine how bad it would've been to do this in pure Tex ...
Just a former student who participated in the first version (let's say draft) of it, which had no really interesting algorithms in it yet, just the overall graph framework and integration with the rest of PGF/TikZ.
Really cool project though, one of the few that made it outside of uni.
A library of pgf/tikz that requires lualatex can do graph drawing. It is called "graphdrawing" actually. It can do the layout automatically and so on. You can add new automatic layouts using lua.
Also I think graphviz is a great tool when you want to generate some diagrams quickly and don't care too much about the design. If you have a precise idea of how it should look, it is possible to force it to look that way but it becomes a lot of work (with a complex logic of clusters, ranks, groups, etc).
Any time Graphviz is not enough for whatever reason, I’ll usually reach for TikZ. This is part of the TeX ecosystem, but I often use Graphviz by itself and paste the resulting images into web pages, presentations, or design docs. TikZ lets you control the path of arrows to a fault, so you can easily get the straight arrows and 90-degree turns, rather than the “anything goes” automatic layout that you get in Graphviz.
I use it pretty often to illustrate state machines, system diagrams, or flowcharts.
It has been over a decade since I did this regularly, but I would import my Graphviz files into the excellent OmniGraffle (macOS) to provide what ever styling I wanted, and use a variety of highly configurable layout engines. Almost certain that the "straight arrows and 90 degree turns" layout is in there.
OmniGraffle is one of the best commercial software packages every developed. Well worth a look if you are on macOS
> Nicer, more modern looks (the original is too... LaTeX-y for my tastes)
Can you explain what do you mean by that, exactly? I think the looks of graphviz graphs are exceedingly beautiful and I cannot imagine a better looking way of drawing graphs (other than some minor technical issues with font kerning).
I was about to summarize my pain points but you covered them all and expressed them better than I could. What I often find difficult is to reliably prevent overlap, I would subsume that under you last point about margins and paddings.
I've been working on diagram.codes, it's not a replacement for Graphviz as my goal is to have a self contained tool that is friendly to non technical users (so flexibility is sacrificed for some diagrams), you may find it useful.
I love how quickly you can generate a large GraphViz diagram! In a past job we had the "network drive of shame" (actually all 4 of my internships had that). So many Excel files which had dependencies which weren't documented at all.
I once made a script which would go through each subdirectory, open every Excel file, and document all dependencies, and output to a GraphViz diagram. This enabled me to move a file and know which files would break, absolutely vital for making changes in that environment.
It wasn't beautiful - VBA checking properties of tables, pivot tables, examining embedded VBA code searching for the network share URI - but it did work.
For safety, I copied 200 GB from the network drive locally. 6 months later the guy in IT was curious why imaging my replacement machine took so long.
--
Last week I documented how money moves around my various bank accounts. I needed to make sure all the bills get paid even though I'm switching banks. A quick GraphViz diagram is proving to be really handy.
The book's home page above also has a nice actor-message-passing diagram rendered with Graphviz (might need to scroll down a bit).
My only preferred change to the default style is `node [shape=box width=0 height=0]`. Otherwise the nodes have tons of white space that makes the graph a lot more bulky than it really needs to be.
The automated layout engine gives me exactly what I want 90% of the time, and the last 10% is usually isn't too hard to coax into looking good via `rank=same`s or `constraint=false` or similar. In particular, the examples above required zero coaxing: I just specified the graph structure, and that's the layout that popped out.
I ended up doing a lot of prototyping in http://www.webgraphviz.com/ and before pasting the final DOT into my markdown file. IntelliJ has a Graphviz/DOT plugin, but it's not as seamless as using that web editor. The graphs definitely end up looking a lot more consistent than anything I could come up with dragging boxes around in microsoft office or google docs.
The graphs don't look fancy and design-y, but they're simple and straightforward and get the point across clearly.
I'm using it at work, e.g. to visualize state machines. It makes it a lot easier to discuss it with business people. In Java there is a great library which translates code into graphviz markup: guru.nidi/graphviz-java
haha, that is awesome. "show don't tell", "the medium is the message"... and wow, what a great use case! This tree UI for rendering multi-threaded conversations would be a great feature in slack or twitter. Bravo -- and thanks for sharing! :)
Ha nice visualisation. Would be amazing if this was available for more chat systems where conversations branch like this.
Also, as a side note its funny that there is a lot of discussion (including Baez!) about theoretical maths, and one lone tweet about molecular symmetry.
Fun hidden use of graphviz: if you use GCC's <regex> in your code, try defining _GLIBCXX_DEBUG and call the member function _M_dot() on your regex objects.
We left that in when developing the <regex> module because it turned out to be very useful for debugging regular expressions, not just the regex implementation itself.
That's cool! Every time I end up implementing some kind of graph structure, writing a simple dot output method is one of the first things I do. It's incredibly useful for debugging stuff, and only takes a couple minutes to put together.
One interesting thing is that graphviz can output to many formats, including SVG. This makes it great for websites, where one can later do things like later tweak the colours on the fly.
Being SVG also means you can style them via CSS, allowing simple interactivity. For example, you can make graph edges change color or become thicker when you mouse over them, making it easier to follow edges in a large messy graph
Many years ago I wrote an XSL file that uses the Graphviz SVG output and applies gradients and shadows (the repo also has a couple of tiny tools that output graphviz graphs):
I'm a big fan of Graphviz. My old team created a library called Loman, which we open-sourced, which uses DAGs to represent calculations. Each node represents a part of the calculation and contains a value, similar to a cell in an spreadsheet, and Loman tracks what is stale as you update inputs. Loman includes built in support for creating diagrams using Graphviz. In our quant research we have found that invaluable when revisiting old code, as it allows you to quickly see the structure and meaning of graphs with hundreds of nodes, containing thousands of lines of code.
We've found it quite useful for quant research, and in production it works nicely because you can serialize entire computation graph which gives an easy way to diagnose what failed and why in hundreds of interdependent computations. It's also useful for real-time displays, where you can bind market and UI inputs to nodes and calculated nodes back to the UI - some things you want to recalculate frequently, whereas some are slow and need to happen infrequently in the background.
I wasted in my current project too many time trying to make GViz behave. It is a tool that has lots of potential but has some insanely obvious flaws, I literally wasted 8 work days just trying to make a small planning document, because Graphviz won't cooperate unless you start to pile up attributes one after the other in Byzantine hacks.
1. Why the "cluster" word is needed on subgraph names? I am not making my project in English.
2. Why I can't move a whole subgraph to the "end" or "start" ? GViz attempts to make all graphs compact (regardless your settings) and thus tends to shove subgraphs in "random" places.
3. Why nodes sometimes leave their subgraph and end on another one? Even when the end result makes no sense? (My graph ended with several places where "a" and "c" is on one cluster and "b" is in a another, with lots of "U" shaped edges connecting then)
The official website has a bunch of broken links.
"Weight" attribute often is ignored...
And the list goes on.
Stack overflow is full of bizarre solutions to Graphviz behavior, for example minimum edge length (that for some reason is in inches despite most of the planet using mm)
Graphviz's syntax easy enough to programmatically generate, here's the course dependencies for CS classes at my university, for instance, generated by a Haskell program that scraped the appropriate data.
I love generating DOT from my Java programs. I recently implemented a query explainer that would output the query plan as DOT.
Btw. For those working with DOT I've always found it great to be able to copy-paste it right onto a webpage and see the results. My current favourite tool: https://dreampuf.github.io/GraphvizOnline/
https://github.com/mingrammer/diagrams - uses graphviz under the hood, and it's super easy to extend the list of available nodes. Also you can tweak it with node/edge/graph attributes to fit in your style/needs.
I've been trying to use graphviz for many years. Idea of storing graph data as text with presentation hints is very appealing. But simple diagrams can be made in corresponding software (draw.io) way too faster. For complex diagrams I had to constantly fight with layout engine and place too many hints.
I've gotten a lot of mileage from Graphviz over the years. As an example outside of work, I wanted a way to depict parse trees for an article I was writing. So, after I wrote an EBNF parser generator (great fun!), I wrote a little utility to apply a grammar to stdin and emit to stdout a JSON representation of the resulting parse tree; another utility handles converting the JSON to dot, which I can plot at my leisure.
I was writing a parser recently, and I was fed up with having to look at a textual tree output. I did a bit of Googling, found Graphviz, and I had the whole thing working in like 15 minutes. I think it's absolutely essential to me now anytime I work with trees/graphs that I need to visualize.
I used graphviz as the main visualisation for bear-note-graph [1], and it's super-easy to use programmmatically, and gives decent-looking results even for large graphs. It is also pretty customizable.
I have a WIP version now using D3, and that one has been harder to manage (when the graph is too large you don't want to have it animate the layout on the fly). If you are curious, I used the same D3 code I have in the WIP to present a sitemap of my blog [2]
Curious what you think about something, since it seems like you've been iterating on the challenge of a big interactive graph lately.
I've been pondering building a big interactive chart, like a decision tree or differential diagnosis chart, that maps goals/needs/problems to docs/examples/tools (for the Nix/NixOS/Nixpkgs ecosystem, but the basic concept applies to any sprawling ecosystem where discovery is hard).
I recently stumbled on https://github.com/mermaid-js/mermaid, which seems like it has an interaction model that could support what I have in mind (minus the question of whether there are performance cliffs that'd make it unsuitable).
If you considered mermaid while working on bear-note-graph, could you share the conclusions you came to?
I didn't check mermaid for bng, but had checked it before (I like visual representations of knowledge, no matter what they are for). Although I found it interesting, my gut feeling here was that if my problem's solution (at that point it was just out of curiosity) was going to be JS-based at some point, I should go directly for D3 (I already had experience, but not recent, with D3).
Mermaid uses D3 under the scenes, so depending on your specifics it could be the best solution anyway, though. Performance wise, I'd expect it to be OK (D3 is pretty fast in most cases) although if there are any issues down the road, fixing them from such a high level library as mermaid could be daunting (it's "easier" to move down from D3 to paper.js or g.js or any other high performance canvas renderer if the case arises).
I use graphviz a lot; here I generate a 'call graph' of the codebase of simavr[0] as a pdf for example [1]. But I also use it for introspection for complex data structure.
I'm working on a Typescript Call Graph [0] and am leaning towards D3 for my visualization. But I hope I can generate something as pretty and useful as your link [1]
The closest I found was TS-Call-Graph [0] which works well but only on classes while mine is aimed at functions
I have a very rough draft of a graph working [1] (currently hardcoded with a specific function name) but I intend to make it interactive and to have more than one visualization of the files.
I use GraphViz to produce a visual, browsable version of the NIEM data model. GraphViz can output images and HTML maps, which allows easy building of clickable web pages with hover notes.
You might as well just use something like plantUML instead of this from a productivity standpoint.
However, I don't want to discount the value of Graphviz. Python has a little known class diagram generator built into pylint which uses Graphviz for its rendering and its pretty cool. You can find out just how bad your #BIGCORPS code architecture is just by checking a reasonably large project with Pylints class diagraming tool...
There seems to be somewhat of a myth that it's hard to get GraphViz diagrams to "look nice". I (obviously biased) feel that the diagrams I generated for my reference implementation of RETE look quite clean: https://github.com/bollu/rete#example-rete-diagrams-to-learn...
I'm going to hijack this thread to ask if anyone knows of a library that creates "hand drawn"-style sequence diagrams from code? I basically want this: https://bramp.github.io/js-sequence-diagrams/ -- but sadly, this one only seems to run inside a browser.
Can anyone recommend a resource for learning how to diagram?
Notably, I don't want to free-design directional relationships that are counter intuitive to what people expect. Eg, if Service A calls Service B, does the arrow go to Service B? What about the response? I imagine there are a ton of little questions like this and I'd like to learn to write what people expect to see.
There are standards like UML, but I’ve never found those to be as useful to start with. It’s best to treat this as a “design problem”: first, answer the question: “what am I communicating”.
Then, maybe look into conventions - but often you’ll find less need for one “master UML diagram” and instead use many, smaller diagrams embedded within reference docs.
Great post. I've used it to generate UML diagrams from databases with sqlalchemy, and more recently to generate protobuf diagrams in Python (needed it quickly to update some documentation): https://github.com/kinow/protobuf-uml-diagram
Some times the existing layouts, ranks, clusters, etc, won't help you to produce the diagram you have in your mind. So instead of giving up and drawing it in draw.io or Inkspace (which I used to do), a co-worker showed me how he was using this technique in several of his diagrams.
I run a web service "QuickChart" that renders Graphviz charts to PNG/SVG so you can easily bring graphviz diagrams into a web app or spreadsheet. Some Graphviz fans may find it useful (it's intended as a replacement for the old Google Image Charts graphviz renderer).
GraphViz is great. I used it in a Cypress DSP processor development mini-IDE (C#) [1]. A diagram is generated for each step of the assembler code showing the data and addressing. Being able to visual the pipelining of instructions and data flow was the main motivation. Scrubbing through the program step by step to see how the state changes made the VLIW assembler programming much easier.
I've used it mostly to mix edge+node definitions in comments in asciidoc or code, and the non-nested nature makes it easy to compose different sources of edges and nodes.
(It's just a POC. If you know of something similar that's more actively developed, I'd be very interested)
I'm also interested in this (or something more actively-developed), as it's the first time I've seen what looks like an answer to a question I've had recently.
If it helps to know how someone else thinks about it: I've been looking for a way to _compose_ or _import_ or _include_ a graph or subgraph defined in one file into multiple other graphs. I've started to assume I'll just need a preprocessor or template engine.
In my case, I'm interested in the feasibility of building a really big interactive chart, like a decision tree or differential diagnosis chart, to help users discover docs/examples/tools/tutorials etc. that can meet their needs or fix their problems, and I suspect a single-file approach just isn't going to scale well. (Composition/inclusion is a bit of an MVP focus, I guess. I think it would also be nice to be able to have a good way to generate versions of the graphs from multiple perspectives--like 1. a diagnosis chart that helps users identify a common formulation of their problem and its most-canonical solution, 2. a graph that helps users figure out what a command-line tool is used for by mapping each one to the problems they solve, 3. a graph that helps users who've run into trouble solving X with Y by mapping it to more known solutions and showing additional context on the pros/cons/limits of each.)
For Python I love using Pyan (https://github.com/davidfraser/pyan, though I'm not sure this is the main repo but it's the first result on Google and it seems to work fine). My workflow is
Graphviz got me a company paid trip to Orlando back in 2003. I built a Perl script that parsed a firewall configuration file to produce a visualisation of the policy and relationships between the various entities like network addresses, protocols and so on. My abstract I wrote on it was good enough to be selected to attend our company technical conference, but fortunately not so good that I would have to write a full paper add present ;-)
If you need a library with a lot more power out of the box (interaction tools, undo manager, data binding, lots of layouts, and many more visualization options), I make GoJS: https://gojs.net/latest/index.html
It's not free, however, though you can use the evaluation version indefinitely if you wanted to make your own graphs for personal use.
Just wanted to show my appreciation to the team supporting Graphviz. It's an instrumental capability of a library[0] we developed to turn Java DSL code into a diagram.
I’d like to write some scripts that can take some of my code and produce a graph of it.
Things I’d like is for example to draw a GCP cloud build file, or something like that.
What would be a good intermediate format for this? I’ll read an xml or yaml file into a python list of dicts and then loop through it and write ... Graphviz? Mermaid? Tikz?
How convenient, I just added graphviz support to my Pandoc filter, pandoc-plot. It renders graphviz code blocks into graphs (also works with other plotting toolkits).
What I've been craving for is a way to respect the order of the nodes when being drawn. Since currently it re-orders them to occupy less space.
With this I would be able to finish my data flow diagram out of a functional programming project. To describe in a visual way how the function calls are happening.
I use this quite often. Graphviz and the dot language are really useful tools. Here is my roundup of a collection of free-software network graphing tools:
I thought this article might of been about creating diagrams from already created code, which is a project I worked on with Ruby code https://visualize-ruby.herokuapp.com/
I like Graphviz, but it's sad that we get such a tiny selection of graph-drawing algorithms to go with it. For instance, I don't see a way to draw a force-directed layout that also tries to account for edge direction, like a more flexible version of dot.
I ended up with a different tool, but I was uncomfortable using drawing apps for diagrams, and only rarely included them in my blog until I could use text to define them.
I’m all-in on Markdown + Github for writing, so working with text-driven diagrams is a natural fit.
I am also using mermaid. Like Markdown, it has a ton of shortcomings. But just like Markdown, the big win is that it forces me to keep things simple.
Markdown forces me to focus on just the words, not the layout and fancy formatting. Mermaid does the same thing for diagrams: Anything I can draw with a pencil but can't express in Mermaid must be simplified or broken into separate sub-diagrams.
This would be terrible if I was trying to draw a diagram of the entire infrastructure of a modern SaaS company, but is actually good when I am trying to write a post explaining ideas: Multiple simple diagrams interspersed with text get the job done.
I recently wrote about using Markdown with Diagram codes https://blog.diagram.codes/posts/markdown-intro/ (I'm the creator) it's a complementary desktop tool with (web version is limited and free, desktop is paid)
I love text based tools but wanted to create something that users without technical backgrounds can use, I feel that a lot of existing tools are too complex for casual users.
I have used Graphviz successfully to communicate with other software engineers about non-trivial state machines in the program. Specifically, C# Stateless allows exporting DOT files. Does anyone know if graphing nested nodes has already been solved?
I wouldn't quite call it nesting, but you can draw nodes on top of other nodes and to a large degree edges still work. But it requires explicit positioning of the "upper" nodes.
While the stylings on graphviz are somewhat limited, as others have indicated, I have yet to find a modern js based in browser library makes the layouts as aesthetically balanced right out of the box as much as graphiz/dot does.
RIP NetViz (90s - 2015)
Back then it was one of the first to link with a db of nodes to auto update diagrams the job I'm thinking of had thousands of sites & it saved so much work once you had templates set up.
Been super interested to write my own layout engine. Does anyone have resources, tutorials, etc. that I should look into if someone wants to write the layout engine that powers something like GraphViz?
I was looking into that a while ago, but sadly I did not find anything great. Back then I wanted to draw animated Binary Decision Diagrams, so I had to come with an incremental (and simple and fast) layout algorithm, which could determine positions for new nodes without interfering with the original graph. The result works fine, but it did require a fair amount of tweaking. (The comments document these tweaks extensively [1].)
If you want to write something more general, then that would probably be much more complicated.
I have used it to visualize dependency trees for several thousand nodes and show my team loops and broken deps. For this kind of situations, a picture is better than a thousand lines of code.
Great tutorial! Is there a way to extract the bounding box of nodes, and the endpoints of lines? This would be useful to generate ML models to automatically parse graphs!
Graphviz is almost deceptively bad. If I see a graph in a book; I expect it was made in TikZ.
TikZ isn't fun, but at least it has the flexibility to get a great looking image at the end of the process. The theoretical simplicity advantages of Graphviz usually get worn down by the fact that the diagrams look bad. Use PowerPoint, and if code is needed bite the bullet and struggle through TikZ.
Graphviz is for noobs. Try TikZ, aka the Gigachad of vector graphics. I spent more time creating TikZ diagrams than actually writing my whole MSc. thesis.
> I spent more time creating TikZ diagrams than actually writing my whole MSc. thesis.
Isn't this the primary problem with TikZ? It makes you do all the time consuming layout stuff by hand. With Graphviz you just chuck your data at it and get results instantly. Sure it won't be eye-optimized, but it also didn't require work on your part, nor will it require more work on your part when your data changes.
> Graphviz is for noobs. Try TikZ, aka the Gigachad of vector graphics.
Maybe you are right, in today's decaying world. But any civilized person can see that tikz, latex and even graphviz are all ultimately hipster tools. Real men of course use pic and troff.
We've gotten a lot of help lately from Magnus Jacobsson, Matthew Fernandez and Mark Hansen on cleaning up the website and the code base, even some persistent bugs we could never find ourselves.
Improvements that would benefit the community the most?
- better default styles that don't look like troff from 1985
- better default layout parameters in neato than statistical multidimensional scaling based on shortest path
- more expressive graph language with classes or templates
- more robust handling of error conditions like out of memory
- better documentation to help people find useful tools or just know what they should be looking for
- find someone to donate a generic orthogonal routing algorithm based on a modern algorithm since people want this
- it would be a big effort, but move the core algorithms to a framework that supports interaction with layout generation
Hope this makes sense.