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... Jan 22, 2016 at 0:21
  • The links don't have arrows in the third diagram. So there's no directionality (apart from the tiny gap). @ZachSaucier Jan 22, 2016 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 Jan 22, 2016 at 0:57

1 Answer 1


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, 2016 at 10:51
  • What about the label? Your design is missing the 1 I had in the question. Jan 22, 2016 at 20:56
  • @MorganWilde you mean the sideways number in the center? What's its purpose?
    – Joonas
    Jan 22, 2016 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. Jan 23, 2016 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, 2016 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.