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

11–20 of 221 posts

Re: Create diagrams with code using Graphviz

#12

Post by braythwayt »

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.

Re: Create diagrams with code using Graphviz

#13

Post by rcarmo »

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.

Re: Create diagrams with code using Graphviz

#14

Post by wodenokoto »

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?

Re: Create diagrams with code using Graphviz

#15

Post by kstenerud »

nikeee wrote: post #9

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.

Re: Create diagrams with code using Graphviz

#16

Post by bvrmn »

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.

Re: Create diagrams with code using Graphviz

#17

Post by bregma »

Fun hidden use of graphviz: if you use GCC's 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 module because it turned out to be very useful for debugging regular expressions, not just the regex implementation itself.

Re: Create diagrams with code using Graphviz

#18

Post by q3k »

wodenokoto wrote: post #14

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

Re: Create diagrams with code using Graphviz

#19

Post by xamde »

h91wka wrote: post #5
Lunatic666 wrote: post #3

Earlier quoted context omitted.

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

Re: Create diagrams with code using Graphviz

#20

Post by enriquto »

rcarmo wrote: post #13

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.

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

Post reply on HN