I'm building an algorithm for drawing directional lines between two nodes. In the trivial case of one link it works fine.


But this method fails when there's a reciprocal line it overlaps the first one.

[2]: http://i.stack.imgur.com/z14sV.png

My first approach to resolve this is to arch the two lines, but now I don't know where to put the arrow? It can't go where it used to, because it will overlap with the outgoing line.


Where should the arrow go in this case?

Edit - Node Labels

Here's an illustration of how each link between the nodes has a label.


  • What's wrong with doing it the way you show in the third diagram? I'm not sure what you're asking... – Zach Saucier Jan 22 '16 at 0:21
  • The links don't have arrows in the third diagram. So there's no directionality (apart from the tiny gap). @ZachSaucier – Morgan Wilde Jan 22 '16 at 0:26
  • Ohhh, I think you mean which arrow, the top or bottom, should have the arrow. That was not clear. In that case it's up to you but I think the convention would be to have the bottom point from A to B – Zach Saucier Jan 22 '16 at 0:57

I would need to know a bit more about its usage and functionality to make a better answer, but with the information I have...

You could keep it simple by putting the arrows on the circles and using just one line.

Something like this:

enter image description here

  • Stylish and simple! – go-junta Jan 22 '16 at 10:51
  • What about the label? Your design is missing the 1 I had in the question. – Morgan Wilde Jan 22 '16 at 20:56
  • @MorganWilde you mean the sideways number in the center? What's its purpose? – Joonas Jan 22 '16 at 23:00
  • @Joonas I've updated my question (the very end of it) to include a bigger graph with the line labels. Labels indicate information that connects the two nodes. Say if you're at node A and you have 2, you can only transition to B and not any other node. – Morgan Wilde Jan 23 '16 at 0:16
  • @MorganWilde So what happens with the label if the line goes both ways? What you've done with the label so far seems pretty ok to me and would work with my arrow example as well. Although I wonder if it would look good if the number didn't rotate with the line. 6 and 9 might be hard to distinguish from each other. Maybe the number could be next to the line instead? Also depending on stuff and things... maybe it would make sense that you only see the number when you hover over a line or a circle. – Joonas Jan 23 '16 at 1:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.