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

How to draw S-curved arrows between boxes

dragonman225.js.org

Post reply on HN
Print view View original

41–50 of 59 posts

Re: How to draw S-curved arrows between boxes

#41

Post by db48x »

kazinator wrote: post #14
nescioquid wrote: post #2

I enjoyed reading this because it reminded me of a moment of hubris as junior developer. I was working with a complicated data structure I wanted to visualize, so I decided to write some quick code to basically read the data structure and output a graph as rectangles and lines connecting them. I was chastened by the complexity of just drawing the lines between boxes so that they didn't overlap (as much as possible) a…

Today (or twenty years ago, for that matter) I'd just output the data structure in graphviz syntax and throw it at the dot tool.

That’s what I do too. Then I make the graph output into a test.

Re: How to draw S-curved arrows between boxes

#43

Post by drudru »

kevin_thibedeau wrote: post #22
anonymous532 wrote: post #10

Earlier quoted context omitted.

Yes, that is what I've noticed too. On medium/big projects macro-level(holistic) arrow functionality is far more important than having beautifully curved arrows from node A to node B. Solving that problem strangely resembles routing on a circuit board with buses, labels, colors, layers etc.

There is a section in Graphics Gems 3 that describes a layout system for an Atari ST DAW app.

Which chapter in Gems III has this? I couldn’t find it.

Re: How to draw S-curved arrows between boxes

#44

Post by alhirzel »

monkeycantype wrote: post #40
alhirzel wrote: post #37

Earlier quoted context omitted.

Sometimes I wish there were a more modern replacement for Graphviz. There are things that it doesn't handle very well (e.g., nested subgraphs) and I feel like there are good (albeit proprietary) algorithms which could make their way into a general package.

I use dot, and manually position everything, then use the neato -n2 option to render: `dot -T ${format} -n${n} ${verbose>1?"-v ":""}-Goverlap-true -Gsplines=false -Kneato -o "${ output }" "${ input }"` this still doesn't do subgraphs well, so I sometime do the 'groups' in a separate document, then composite the layers with image magick `magick composite ${verbose>1?"-verbose ":""}-gravity NorthWest "${a}" "${b}" "${p…

Cool, I appreciate you sharing the info on your process!

Re: How to draw S-curved arrows between boxes

#45

Post by sriram_malhar »

I don't see why arrows must start at the middle of an edge. Sometimes multiple arrows from an edge look better if the end points are spaced apart (to emphasise the connectivity visually, for example). There are times when an arrow is positioned just on the inside of a corner, depending on what it is connected to and the angle of the arrow with respect to the edge.

In the final analysis, one should strive to get a visually balanced look, which takes into account placement, thickness of lines, density of information etc. There is no one-size fits all.

Re: How to draw S-curved arrows between boxes

#46

Post by monkeycantype »

alhirzel wrote: post #44
monkeycantype wrote: post #40

Earlier quoted context omitted.

I use dot, and manually position everything, then use the neato -n2 option to render: `dot -T ${format} -n${n} ${verbose>1?"-v ":""}-Goverlap-true -Gsplines=false -Kneato -o "${ output }" "${ input }"` this still doesn't do subgraphs well, so I sometime do the 'groups' in a separate document, then composite the layers with image magick `magick composite ${verbose>1?"-verbose ":""}-gravity NorthWest "${a}" "${b}" "${p…

Cool, I appreciate you sharing the info on your process!

You’re welcome

Re: How to draw S-curved arrows between boxes

#47

Post by resonious »

This is a really great writeup. Whenever I try to draw diagrams using software tools, I always run into stuff like this and am disappointed with the tool's ability to help me out.

I've actually taken up hand-drawing diagrams lately and it's worked well. I get a lot of comments at work - "haha wow nice art!" (sarcasm) followed by "actually this is really easy to follow". I feel like it's both faster to draw and a more accurate representation of my mental model when I draw by hand.

But hey, if the diagramming tools were smart like in this post, maybe I'd go back to the tools for awhile ;)

Re: How to draw S-curved arrows between boxes

#48

Post by arendtio »

anonymous532 wrote: post #5

It's cute and definitely a great way to "draw S-curved arrow between boxes", but, under the assumption of being built to be used within a real project with dozens or hundreds of overlapping connections, this, like many other node systems, fails to be usable unless you push the complexity somewhere else.

I think it depends on the use case and the organization/ordering of the boxes, which is not the focus of this library.

So for example, if the user is responsible for organizing the boxes and there is also a way to create custom arrows, this library can be used to suggest arrows, which might be good 95% of the time. That would be better than many of the tools I have used over the years.

However, if you want to generate a final diagram and can't guarantee, that the order of boxes doesn't allow for overlapping connections, this library is probably the wrong choice.

Re: How to draw S-curved arrows between boxes

#49

Post by CyberSimon »

alejohausner wrote: post #29

The graphviz system [1], originally from at&t labs, has a program called "dot" that does this kind of thing very well, including routing the arrows around other boxes that may be in the way. It's been open sourced. It's also been ported to the web [2] 1: https://graphviz.org/ 2: http://www.webgraphviz.com/?tab=map

This is a great github to play around with dot online: https://dreampuf.github.io/GraphvizOnline/

Re: How to draw S-curved arrows between boxes

#50

Post by jeffreygoesto »

alhirzel wrote: post #37
alejohausner wrote: post #29

The graphviz system [1], originally from at&t labs, has a program called "dot" that does this kind of thing very well, including routing the arrows around other boxes that may be in the way. It's been open sourced. It's also been ported to the web [2] 1: https://graphviz.org/ 2: http://www.webgraphviz.com/?tab=map

Sometimes I wish there were a more modern replacement for Graphviz. There are things that it doesn't handle very well (e.g., nested subgraphs) and I feel like there are good (albeit proprietary) algorithms which could make their way into a general package.

Not as easy to use, because it does not have a simple cli, but nested layouts are better than dot's with the Eclipse Layout Kernel. There is a JavaScript version, as well and you can try it in recent plantuml versions.

[0] https://www.eclipse.org/elk

[1] https://github.com/eclipse/elk

[2] https://plantuml.com/elk

Post reply on HN