Search code examples
svgdrawinggraph-theorygraphvizdiagram

Placing colored arrows alongside an edge

I am looking for a way to draw colored arrows alongside edges in Graphviz. It must be possible to choose which side of the edge they are on, and it must be possible to draw multiple arrows of differing colors on each side of each edge. The arrows represent packets of data, so ideally they should not touch the vertices.

A diagram of a small network annotated with nodes "A", "B", "C" and red, blue, and green arrows besides most of the edges. Some of the arrows have a strike through them.

I've looked at the documentation for Edge Attributes or Arrow Shapes, but do not see any way to do what I described.

The goal is to create a simple web app that allows me to simulate a network algorithm and see how that algorithm plays out, to replace doing it by hand (above). Any other suggestions for how to go about this would be appreciated.

Solution

  • This problem is poorly specified, maybe the following can help.
    In no particular order:

    • The Graphviz language does not directly support the request (see below for not-very-close). Either Zaz has to give up some of the requirements or will have to build a hybrid system that pre/post processes Graphviz output to get close enough to the desired result
    • Graphviz edges do not have a definition of "sides", this has to be solved
    • Labels and edges sometimes collide "normally". Any hybrid system would have to try to minimize extra collisions with the added edges.
    • The diagram seems to depict that some of the "extra" edges have diagonal slashes through them. Again, Graphviz does not natively support slashed edges.
    • As long as the "original" edges are built from straight-line segments (not splined or curved), adding parallel edges with a post-processor might not be too difficult (but see comment about "side")
    • All-in-all, could it be done programmatically? Probably. Graphviz easily supports adding your own attributes. And a gvpr program could (?) add the colored, parallel edges. The Graphviz Forum (https://forum.graphviz.org/) has some examples of post-processing, though none too close to this request.

    not-very-close (using neato):

    digraph G {

  splines=false
  node [shape=point xlabel="\N"]
  edge [dir=none]
  
  a -> b [color="red" dir=forward]
  a -> b [color="green" dir=back]
  a -> b 
  b -> x [color="green" dir=forward]
  b -> x 
  x -> y
  y -> a

  c -> d [color="green:white:black:white:blue"]
  d -> e [color="green:white:black:white:blue"]
  e -> c [color="white:white:black:white:red"]
}

    Giving:
    enter image description here