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

Create diagrams with code using Graphviz

ncona.com

Post reply on HN
Print view View original

61–70 of 221 posts

Re: Create diagrams with code using Graphviz

#61

Post by RBerenguel »

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/

Re: Create diagrams with code using Graphviz

#62

Post by josteink »

hnarayanan wrote: post #4

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/

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.

Re: Create diagrams with code using Graphviz

#64

Post by lihaoyi »

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.

Re: Create diagrams with code using Graphviz

#65

Post by macintux »

jetrink wrote: 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…

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

Re: Create diagrams with code using Graphviz

#66

Post by kragen »

lihaoyi wrote: post #64

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/ch…

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.

Re: Create diagrams with code using Graphviz

#67

Post by mpk »

kristiandupont wrote: post #45

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

Re: Create diagrams with code using Graphviz

#68

Post by yboris »

buserror wrote: post #56

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

Re: Create diagrams with code using Graphviz

#69

Post by [deleted] »

enriquto wrote: post #40
Schiphol wrote: post #36

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

[deleted]

Re: Create diagrams with code using Graphviz

#70

Post by m000 »

kragen wrote: post #58
m000 wrote: post #43

Earlier quoted context omitted.

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 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')
    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"];
Post reply on HN