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

51–60 of 221 posts

Re: Create diagrams with code using Graphviz

#52

Post by kinow »

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.

Re: Create diagrams with code using Graphviz

#53

Post by fsiefken »

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.

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

Re: Create diagrams with code using Graphviz

#55

Post by chrisseaton »

npiit wrote: 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.

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

Re: Create diagrams with code using Graphviz

#56

Post by buserror »

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

Re: Create diagrams with code using Graphviz

#57

Post by kristiandupont »

fsiefken wrote: post #53
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.

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

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

Re: Create diagrams with code using Graphviz

#58

Post by kragen »

m000 wrote: post #43
kragen wrote: post #34

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

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

Re: Create diagrams with code using Graphviz

#59

Post by chrisweekly »

ColinWright wrote: post #2

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

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! :)
Post reply on HN