Live data from Hacker News

Create diagrams with code using Graphviz

ncona.com

71–80 of 221 posts

Re: Create diagrams with code using Graphviz

#71

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

Re: Create diagrams with code using Graphviz

#72
post #44

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.

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

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.

Re: Create diagrams with code using Graphviz

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

Re: Create diagrams with code using Graphviz

#75
post #70
post #58

Earlier quoted context omitted.

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

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') def…

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.

Re: Create diagrams with code using Graphviz

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

Re: Create diagrams with code using Graphviz

#77
post #67

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

Thank you

Re: Create diagrams with code using Graphviz

#78
post #48

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

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

Re: Create diagrams with code using Graphviz

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

Re: Create diagrams with code using Graphviz

#80

Earlier quoted context omitted.

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

Yes, TikZ can position the vertices itself. E.g. http://www.tcs.uni-luebeck.de/downloads/papers/2011/2011-con... http://www.tcs.uni-luebeck.de/downloads/mitarbeiter/tantau/2... https://tex.stackexchange.com/questions/203692/how-to-automa...
Post reply on HN