Hacker News new | past | comments | ask | show | jobs | submit login
Create diagrams with code using Graphviz (ncona.com)
646 points by adrianancona on June 10, 2020 | hide | past | favorite | 211 comments



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

Hope this makes sense.


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.


Doesn't the export to plain give you what you need in term of location and size of the different items?

https://graphviz.org/doc/info/output.html#d:plain


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.


I think you can have fixed size nodes where you can specify the dimensions.


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.


Sincerely, I think graphviz is great the way it is. I wouldn't change the graph language and most of the suggested changes would be "nice to have".

Thanks for your hard work on it!


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 imagine you used cflow and dot

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 never thought of getting a big plot or print of our graph. That is a great idea. :)


Better integration with TeX, I want to put formulas inside the graph using the exact same fonts as in the rest of my paper.


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


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

Yup, I think these are the ones that mean I never actually end up using Graphviz for anything :)

If I'm generating graphs, I want them laid out in a hierarchical style.

To do that, I need a library which can do that layout.

Those libraries are often written in a higher level language like C#, Java, etc, which come with their own simple drawing layer.

And then I don't need Graphviz anymore! (not that I'm suggesting graphviz should change)


I'm curious to know which libraries you use.

Also, in my own experience, I was able to get hierarchical layouts Graphviz by using directional graphs with subgraphs.


So what library do you use for hierarchical layouts?


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.


No critique from me, instead a big thanks from me to you and anyone else who worked on graphviz!

I've used it a few times for visualizing aspects of my research, usually by writing .dot files directly from Racket. It turned out to be quite useful.


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.


There's a proof of concept here: https://github.com/mstefaniuk/graph-viz-d3-js


> look like troff from 1985

This is a feature, not a bug.

The rest would be nice to have, though.


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

Many thanks for your work all this time!


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.


Anger, what's wrong with people? For the record, I love graphviz. Thanks!


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


Speak for yourself; some of us think computer aesthetics peaked by the 90s ;)


and some of us are still waiting for aesthetics to reach computers ;)


: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 :-)


> it’s not fashion

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


I disagree, accordingly Wikipedia:

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


> A good chunk of haute couture from decades past would be seen as modern and appealing today.

But not at every given point in time. That fashion ebbs and flows is a given, but that's not the same thing as being timeless.


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.


Hmmm, Graphviz can do this now. Search the FAQ for "how do I use non-ASCII character sets"


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?


I completely missed that, thank you!


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.

Thanks!


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


"default styles" - are you talking about default fonts, or something else?


I have been nothing but happy to use graphviz and recommend it regularly. Thank you for all of your work, truly.


i love graohviz. thank you for all the hard work over the years.


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.


I have used rather nice clojure library that also uses graphviz under the bonnet, with great success:

https://github.com/Engelberg/ubergraph

Did you use something similar or roll your own?

In any case, your project sounds great and I am glad it was a success.


I used Rhizome[1]. (It looks like it is no longer being maintained, but I didn't run into any issues.)

1. https://github.com/ztellman/rhizome


Very nice! (and pleasingly similar)

Thanks


That’s fantastic. You should write a blog post on that.


There's an Emacs package which also uses Graphviz in the same way to show function dependencies during development:

https://github.com/mtekman/elisp-depmap.el


Also i think it's a great use case for the data-drivenness of clojure :)


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.

A really simple graph like https://graphviz.christine.website/#digraph%20G%20%7Ba-%3E%7... is sometimes good enough without further tweaking, but for, e.g., the top diagram in https://github.com/kragen/dumpulse#dumpulse-an-embeddable-du..., you usually have to tweak stuff a bit.


3. dot pairs nicely with m4 [1] and a Makefile. Without m4, it's a pain to apply a uniform style on groups of nodes.

[1] https://en.wikipedia.org/wiki/M4_(computer_language)


You can put the group of nodes in a subgraph and apply the uniform style to the subgraph. In https://gitlab.com/kragen/bubbleos/-/tree/master/yeso#callin... I did that for example as follows in https://gitlab.com/kragen/bubbleos/-/blob/master/yeso/api-ty...:

        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:

    %.png: %.dot
     dot -Tpng < $< > $@
That way I can rebuild the README diagrams (if outdated) just by listing "diagram.png heartbeat.png health-report.png" as dependencies of the "all" target. https://github.com/kragen/dumpulse/blob/master/Makefile


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.

    define(`base_node', `width=1.75, height=1.0, fontname="Menlo", fontsize=13')
    define(`file',`base_node, shape=note')
    define(`directory',`base_node, shape=folder')
    define(`important', `fontname="Menlo Italic"')

    ...

    tarball [file, label="foo.tar"];
    vardir  [directory, label="/var"];
    etcdir  [directory, important, label="/etc"];


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

    node [width=1.75, height=1.0, fontname="Menlo"];

    subgraph files {
        node [shape=note];
        tarball [label="foo.tar"];
        subgraph importantfiles {
            node [fontname="Menlo Italic"];
            ...
        }
    }

    subgraph dirs {
        node [shape=folder];
        vardir [label="/var"];
        subgraph importantdirs {
            node [fontname="Menlo Italic"];
            etcdir [label="/etc"];
        }
    }
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.


I used xdot in Ubuntu earlier this week and it crashed my Gnome session. Beware!


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:

https://edotor.net


Looks cool, but either the default graph has incorrect comments, or it's buggy on firefox. There were no lightbulbs, and clicking on "a" did nothing.


That's a fantastic tool! I've been doing some work to create some hierarchy diagrams and this is perfect.


I like graphviz a lot, but I almost always end up using [Tikz](http://www.ctan.org/tex-archive/graphics/pgf/), which is quite a bit more flexible.

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.


Does it have graph-drawing included?


Yes, part of TikZ is a clone of Graphviz, but implemented in LaTeX.


And Lua for the more advanced layout calculations, which need LuaLaTeX.


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

[0] https://en.wikipedia.org/wiki/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.


Some of it is LaTeX, but the more intensive algorithms are done with embedded Lua, using LuaLaTeX. There is no external program.


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


Are you one of the authors of tikz graphdrawing?


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.

It's described in part IV of the pgf manual.


As much as I like Graphviz (and I've been using it for ages) I keep looking for an equivalent with two features:

- Nicer, more modern looks (the original is too... LaTeX-y for my tastes)

- A different layout engine that uses straight arrows and 90 degree turns

So far I haven't been able to find any good replacements, although a few JS libraries come reasonably close.


> A different layout engine that uses straight arrows and 90 degree turns

It's not a property of the engine but of the graph itself:

http://www.graphviz.org/doc/info/attrs.html#d:splines

https://stackoverflow.com/a/9055243


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


My main complaint.


I was thinking that a d3 implementation would help with this, except for the 90 degree, and found a project [0].

It’s not a force directed graph, but does seem to me to look better. And since the output is javascript it can be styled and formatted as you like it.

[0] https://github.com/magjac/d3-graphviz


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.

Well, or I’ll reach for Inkscape.


Possibly Elk? - there's a simple start notebook here: https://observablehq.com/@tmcw/elk and example of more complex output here: https://observablehq.com/@observablehq/notebook-visualizer-e...


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


My top graphviz issues.

* Automatic edge placement can lead to visually ambiguous results and it is very hard to tweak it.

* Edge title placement engine is sort of naive and best solution is to not use edge titles at all.

* Bogus text wrapping. Text can leak outside of the node box.

* Default margins and padding lead to visual clutter.


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 use mermaid when I need a graph in markdown along with the mermaid extension to render it inline.


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.


I use Graphviz throughout my book https://www.handsonscala.com to render diagrams. I honestly think it looks pretty good:

- Dependency graph between chapters in the book: https://www.handsonscala.com/chapter-1-hands-on-scala.html#s...

- Tree-shaped `Vector` with structural sharing: https://www.handsonscala.com/chapter-4-scala-collections.htm...

- Singly-linked `List` with shared tails: https://www.handsonscala.com/chapter-4-scala-collections.htm...

- Collections class inheritance hierarchy: https://www.handsonscala.com/chapter-4-scala-collections.htm...

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.


Those all look great! I'm jealous! I think the green arrows do look fancy and design-y.

I've sometimes been able to get surprisingly flashy results with cluster subgraphs with background colors.


I use GraphViz a lot. Here it the Twitter conversation that ensued when I asked a question about the use of Group Theory "In Real Life":

https://www.solipsys.co.uk/Chitter/GroupTheory_IRL.svg


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


I don't want to diminish importance of graphviz, but PlantUML is better suited for visualizing state machines, message sequence diagrams and whatnot.


PlantUML is a good syntax. Under the hood... it renders via GraphViz


which is exactly why it's great! :)


Does PlantUML do statecharts?



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.


I have the same system for Mastodon ... works well to help visualise the complex discussions that sometimes happen.


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.

e.g. https://harishnarayanan.org/writing/kubernetes-django/


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):

https://github.com/vidarh/diagram-tools/tree/master


SVGs created by GraphViz (and possibly in general?) also has the benefit of being searchable within a browser, etc.

So if you have a huge diagram and want to find a node of interest, with a SVG, it's only a quick CTRL-F away.


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.

[1] Github: https://github.com/janushendersonassetallocation/loman

[2] Docs: https://loman.readthedocs.io/en/latest/

[3] Examples: https://github.com/janushendersonassetallocation/loman/tree/...


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)


At ObservbleHQ they use this to automatically visualise dependencies: https://observablehq.com/@observablehq/notebook-visualizer

More generally, Observable gives you a 'playground' where you can interactively see graphviz results: https://observablehq.com/@observablehq/graphviz

Another option - which for some applications is visually more appealing - is Elk: https://observablehq.com/@observablehq/notebook-visualizer-e...

There's a simple start notebook here: https://observablehq.com/@tmcw/elk


I find plantuml a more useful abstraction for software stuff (uses graphviz under the covers)

https://plantuml.com/


The Zim wiki software has a plugin for graphviz (https://www.zim-wiki.org/manual/Plugins/Diagram_Editor.html), where you can edit your graph and see the results in real time. Very helpful if only for this feature


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.

https://i.imgur.com/OZarGSg.png


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.

https://github.com/reindeereffect/tools-from-blog/tree/maste...


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]

    [1] https://github.com/rberenguel/bear-note-graph
    [2] https://mostlymaths.net/sitemap/


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.

[0]: http://github.com/buserror/simavr [1]: https://github.com/buserror/simavr/blob/master/doc/simavr_ca...


This is excellent! Thank you for the share!

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]

[0]: https://github.com/whyboris/TypeScript-Call-Graph


Nice. This will be useful, I'm looking forward to it.

Are you aware of any similar tools for creating class diagrams from TS code?


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.

[0] https://github.com/Deskbot/TS-Call-Graph

[1] https://github.com/whyboris/TypeScript-Call-Graph/pull/1


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.

See the diagram at https://niem.github.io/model/4.2/nc/ItemType/ . Hover over a term to see its definition. Click on a term to navigate to its diagram.


Another plug: I wrote about using Graphviz for representing project management dependencies in code and collaborating with my team here:

https://zwischenzugs.com/2017/12/18/project-management-as-co...

The OP page is a really great intro, I could have used it as a reference when I was doing that work.


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


The instant place to look for graphviz issues is a distance between arrow head/tail to node. But yes your diagrams are very clean indeed!


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.


PlantUML supports this https://plantuml.com/handwritten

Add this to any diagram to get the effect you want,

  skinparam handwritten true
  skinparam monochrome true
Demo: https://tinyurl.com/ycdu7owa


Also, you can use https://collabuml.com to collaboratively build diagrams.


Thank you


This one is also web-based, but it takes graphviz source: https://sketchviz.com/new


there must be away to run it in a headless browser en screencapture and parse the output as png


Actually, it's pretty simple, just include https://github.com/markushedvall/plantuml-encoder and call

    "https://www.plantuml.com/plantuml/img/" + encode(text);
    
That's what I did on collabuml.


Surely there is. It just seems overly complicated to me.


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.


I’d actually start with Tufte: https://www.edwardtufte.com/tufte/books_vdqi

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.

I feel like project reactor did a good job here: https://projectreactor.io/docs/core/release/api/reactor/core...

Personally I’d like to see more related to inheritance, but I’ll take what I can get. The tooling can be a pain to embed automatic diagrams in



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

One thing that I think was not mentioned in the article, are invisible nodes, which are really handy: https://stackoverflow.com/search?q=invisible+node+%5Bgraphvi...

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

   https://quickchart.io/chart?cht=gv&chl=<DOT here>
e.g.

   https://quickchart.io/chart?cht=gv&chl=digraph%20MyGraph%20%7Bbegin%20-%3E%20end%7D
The service is open source: https://github.com/typpo/quickchart


Graphviz has improved my development workflow.

I use dot notation, and in spacemacs I can have a buffer with the the png file that reloads on save.

When debugging distributed enterprise systems, being able to type in the workflow as you go and then share your findings is awesome.


One of my favourite online graphviz editors for quickly creating something is: https://dreampuf.github.io/GraphvizOnline/


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.

MIT-license code is here with screenshots:

[1] https://github.com/paphillips/DFB


Big fan of graphviz.

Lots of interesting tools that use it being posted here, so here's a toy of mine: https://github.com/alexbrasetvik/graphspec

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

An aside: I noticed a TODO on your repo about supporting a comment syntax. Your existing syntax is very close to directives from reStructuredText (https://docutils.sourceforge.io/docs/ref/rst/restructuredtex...). Since it's already a Python project, I wonder if it makes sense to piggy-back on docutils, or at least borrow the comment syntax (https://docutils.sourceforge.io/docs/ref/rst/restructuredtex...).



Dokuwiki has a very usefull graphviz plugin. https://www.dokuwiki.org/plugin:graphviz


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

cd ~/projectdir pyan3 path/to/file/i/want.py --uses --no-defines --colored --grouped --annotated --dot > dotfile.dot dot -Tsvg dotfile.dot > diagram.svg


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.


Used Viz.js (Graphviz compiled to JavaScript) for an animated B-Tree visualization, and it works great:

http://ysangkok.github.io/js-clrs-btree/btree.html#{%22actio...


Navigation is very important too for large graphs. Go with yEd instead and graphml, networkx is great too https://networkx.github.io/documentation/stable/reference/re...


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.

Thank you, keep it as it is, it's just great!

[0] https://github.com/ing-bank/baker


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?

What do you guys recommend?


Using graphviz for visualizing these things is fast and easy.

    print('digraph foo {')
    # adj_list contains tuples of (parent node name, child node name)
    for parent, child in adj_list:
        print(f'{parent} -> {child}')
    print('}')
Redirect that to a file and view with `xdot`, done.

I've done exactly this a few days ago to visualize the Linux build graph: https://q3k.org/u/73839114a0e5ee65002029892a069dd1b645a8f9f0...


Sweet! It was excactly this kind of advice I was hoping to get. Thank you.


Great article. You might also have use for http://magjac.com/graphviz-visual-editor/ and the new https://forum.graphviz.org


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

https://github.com/LaurentRDC/pandoc-plot


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.


Isn't the point of data flow that the order doesn't matter? Otherwise it's control flow isn't it? I use GraphViz to render both data flow and control flow without issue https://engineering.shopify.com/blogs/engineering/understand....


You can use "rank" to force the ordering.


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:

https://lwn.net/Articles/639998/


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.


What tool did you use? I’ve been using mermaid and its markdown plug-ins and like it quite a bit, but am always looking for new ways.


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.

[1] https://github.com/suyjuris/obst/blob/feb8e766ce226ca1afe862...


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!


There are multiple ways. Several of the output file formats contain this info as text.


I heartily recommend the Graphviz plugin for MediaWiki.

Also, http://www.webgraphviz.com/


Has anyone seen a library to draw genealogy trees programatically? Every time I look at it, it looks like an impossible problem.



Really nice, well written introduction. Graphviz is a cool tool, we used this when debugging some graph-related algorithms.


Graphviz works great with LaTeX. It removes the pain point of moving your workflow out of LaTeX.


Still remember learning to generate dot by lisp in the book learning lisp one game at a time.


I really like graphviz for visualizing the call graphs generated by the Python profiler.


Is there code publicly available to do this?


What you need is gprof2dot. It will chew up your pstats file and spit out a dot file. Enjoy!


chime in just to add that I discovered grapviz using the venerable doxygen[0] tool and the availability of the calling graph

[0] https://www.doxygen.nl/index.html


It would be nice, if they add theme effect like a game called Detroit become human


Used Graphviz to visualize gstreamer pipelines, and it was awesome for the task.


I wonder if this could be used on windows via the Windows Subsystem for Linux?


Can't find a Windows binary to download.


Looks like you need to grab the build artifacts from their CI/CD system.

https://ci.appveyor.com/project/ellson/graphviz-pl238/builds...

Not something I would trust out of the blue, but that's the best I see off of https://graphviz.org/download/


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.


I don't believe TikZ does any kind of automatic layout - that's what most people use Graphviz for I believe.


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


I think dpic has surpassed pic/gpic


Now, 28 year old me after leaving academia and learning the superpower of TikZ, LaTeX and Beamer, I just use draw.io and google docs/slides.


the horror, the horror




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: