Live data from Hacker News

Create diagrams with code using Graphviz

ncona.com

21–30 of 221 posts

Re: Create diagrams with code using Graphviz

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

Re: Create diagrams with code using Graphviz

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

[deleted]

Re: Create diagrams with code using Graphviz

#23

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/

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

Re: Create diagrams with code using Graphviz

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

Re: Create diagrams with code using Graphviz

#25

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

Re: Create diagrams with code using Graphviz

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

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.

Re: Create diagrams with code using Graphviz

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

> 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

Re: Create diagrams with code using Graphviz

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

I use mermaid when I need a graph in markdown along with the mermaid extension to render it inline.

Re: Create diagrams with code using Graphviz

#29
post #26

Earlier quoted context omitted.

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

Re: Create diagrams with code using Graphviz

#30
post #7

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?
Post reply on HN