diagrammer - how can I add arms to my flowchart?

Question

For my flowchart, I have a vertical chart detailing the data flow. However on the downward arrows, I want to add side arrows to describe where the missing data is going. How do I do this? I can't see it in any of the documentation and examples because it tends to be about far more complex things, and I know this is a very basic task!

library(DiagrammeR)

grViz("digraph flowchart {
  # node definitions with substituted label text
  node [fontname = Helvetica, shape = rectangle, fixedsize = false, width = 1] 
  1 [label = 'data (100%)']
  2 [label = 'data  (90.4%)']
  3 [label = 'data  \\ndata (83.3%)']
  4 [label = 'data (66%)']


  7 [label = 'data (100%)']
  8 [label = 'data  (74.4%)']
  9 [label = 'data  (69.6%)']
  10 [label = 'data  (55.4%)']

  1 -> 2 -> 3 -> 4;

  7 -> 8 -> 9 -> 10
}      ")

This gives me two side by side panels, but I want arrows coming off the downward arrows where I can put the n for missing data.

Answer 1

The standard trick is to create invisible dummy nodes, then break up each edge into two parts: 1) source -> dummy, and 2) dummy -> target:

library(DiagrammeR)

grViz("digraph flowchart {
  # node definitions with substituted label text
  node [fontname = Helvetica, shape = rectangle, fixedsize = false, width = 1] 
  1 [label = 'data (100%)']
  2 [label = 'data  (74.4%)']
  3 [label = 'data  (69.6%)']
  4 [label = 'data  (55.4%)']
  m1 [label = 'missing (25.6%)']
  m2 [label = 'missing (4.8%)']

  node [shape=none, width=0, height=0, label='']
  p1 -> 2; p2 -> 3 -> 4;
  {rank=same; p1 -> m1}
  {rank=same; p2 -> m2}

  edge [dir=none]
  1 -> p1; 2 -> p2;
}")

I shortened your example for demonstration purposes. In the above, p1 and p2 are invisible dummy nodes. There are three sets of edges:

• Downward directed edges from dummy nodes to targets (e.g., p1 -> 2)
• Horizontal directed edges from dummy nodes to "missing" nodes. Edge direction is imposed through rank=same.
• Undirected edges from source to the dummy nodes