DiagrammeR flowchart with horizontal aligments of nodes within and between subgraphs

Question

I need to create a flowchart and below is a reproducible example in R:

    library(DiagrammeR)
    library(DiagrammeRsvg)
    library(magrittr)
    library(rsvg)
    library(tidyverse)

    flowchart = grViz("digraph flowchart {
                  
      graph [rankdir = LR]

      subgraph cluster_one {
      peripheries=1

      label = 'Procedure 1';
      style = solid;
      fontname = 'helvetica-bold';
      
      node [fontname = Helvetica, shape = circle,  style=solid]
      R1 [label = '1']; R2 [label = '2']; R3 [label = '3']; R4 [label = '4']
      
      node [fontname = Helvetica, shape = rectangle, style=filled] 
      A1 [label = 'A1']
      node [fontname = Helvetica, shape = rectangle, style=filled] 
      A2 [label = 'A2']
      node [fontname = Helvetica, shape = rectangle, style=filled] 
      B1 [label = 'B1'] 
      node [fontname = Helvetica, shape = rectangle, style=filled]
      B2 [label = 'B2']
      node [fontname = Helvetica, shape = rectangle, style=filled] 
      C1 [label = 'C1']
      node [fontname = Helvetica, shape = rectangle, style=filled] 
      C2 [label = 'C2']
      node [fontname = Helvetica, shape = rectangle, style=filled] 
      D1 [label = 'D1']
      node [fontname = Helvetica, shape = rectangle, style=filled] 
      D2 [label = 'D2']
      
      # edge definitions with the node IDs
      edge[len = 0.01, arrowhead = none];
      R1 -> {A1 A2}; R2 -> {B1 B2};
      R3 -> {C1 C2}; R4 -> {D1 D2};
      
      node [fontname = Helvetica, shape = diamond, style=solid]
      IA1 [label = 'Y']; IA2 [label = 'Y'];
      node [fontname = Helvetica, shape = diamond, style=dashed]
      IA3 [label = 'N']; IA5 [label = 'N'];
      node [fontname = Helvetica, shape = oval, style=dashed]
      IA4 [label = 'N'];
      node [fontname = Helvetica, shape = oval, style=filled]
      Final [label = 'GO']
      }

      subgraph cluster_two {
      peripheries=1

      label = 'Procedure 2';
      style = solid;
      fontname = 'helvetica-bold';
      
      node [fontname = Helvetica, shape = rectangle, style=filled]
      A1_Y [label = 'A1']
      node [fontname = Helvetica, shape = rectangle, style=filled]
      C2_Y [label = 'C2']
      
      edge[len = 0.01, arrowhead = vee, label = ''];
      IA1 -> A1_Y; 
      IA2 -> C2_Y;
      
      edge[style='invisible', dir='none'];
      A1 -> IA1; C2 -> IA2; A2 -> IA3; 
      {B1 B2} -> IA4; C1 -> IA5; {D1 D2} -> Final;
      }
   }
             ")
       flowchart

The output is shown below:

I am seeking help to revise the codes to achieve the following changes (all marked in red):

1. For nodes 3 and 4: how can they each positions like nodes 1 and 2, i.e., just in the middle between C1 and C2, and between D1 and D2, respectively? Currently node 3 is a little down while node 4 is a little up...
2. For nodes A1 and C2, their corresponding decisions are "Y" in diamond shape - how to align A1 with the "Y" horizontally, and how to align C2 and "Y" horizontally?
3. For the arrow of "Y" in Procedure 1 to nodes A1 and C2 in Procedure 2, how can I align them horizontally, so that "A1""Y""A1" across the two subgraphs are on the same line, and "C2""Y""C2" across the two subgraphs are on the same line?

Thank you very much!

Answer 1

Adding invisible nodes and edges:

library(DiagrammeR)
library(DiagrammeRsvg)
library(magrittr)
library(rsvg)
library(tidyverse)

flowchart = grViz("digraph flowchart {
                  
      graph [rankdir = LR]

      subgraph cluster_one {
      peripheries=1

      label = 'Procedure 1';
      style = solid;
      fontname = 'helvetica-bold';
      
      node [fontname = Helvetica, shape = circle,  style=solid]
      R1 [label = '1']; R2 [label = '2']; R3 [label = '3']; R4 [label = '4']; R5 [label = '', style = invis ]; R6[label = '', style = invis ]; R7[label = '', style = invis ];
      
      node [fontname = Helvetica, shape = rectangle, style=filled] 
      A1 [label = 'A1']
      node [fontname = Helvetica, shape = rectangle, style=filled] 
      A2 [label = 'A2']
      node [fontname = Helvetica, shape = rectangle, style=filled] 
      B1 [label = 'B1'] 
      node [fontname = Helvetica, shape = rectangle, style=filled]
      B2 [label = 'B2']
      node [fontname = Helvetica, shape = rectangle, style=filled] 
      C1 [label = 'C1']
      node [fontname = Helvetica, shape = rectangle, style=filled] 
      C2 [label = 'C2']
      node [fontname = Helvetica, shape = rectangle, style=filled] 
      D1 [label = 'D1']
      node [fontname = Helvetica, shape = rectangle, style=filled] 
      D2 [label = 'D2']
      
      # edge definitions with the node IDs
      edge[len = 0.01, arrowhead = none];
      R1 -> {A1 A2}; R2 -> {B1 B2};
      R3 -> {C1 C2}; R4 -> {D1 D2};
      
      node [fontname = Helvetica, shape = diamond, style=solid]
      IA1 [label = 'Y']; IA2 [label = 'Y'];
      node [fontname = Helvetica, shape = diamond, style=dashed]
      IA3 [label = 'N']; IA5 [label = 'N'];
      node [fontname = Helvetica, shape = oval, style=dashed]
      IA4 [label = 'N'];
      node [fontname = Helvetica, shape = oval, style=filled]
      Final [label = 'GO']
      
      edge[style='invisible', dir='none'];
      {rank=same; R4 -> R5 -> R3 -> R6 -> R2 -> R7 -> R1}
      }
      
      subgraph cluster_two {
      peripheries=1

      label = 'Procedure 2';
      style = solid;
      fontname = 'helvetica-bold';
      
      node [fontname = Helvetica, shape = rectangle, style=filled]
      A1_Y [label = 'A1']
      node [fontname = Helvetica, shape = rectangle, style=filled]
      C2_Y [label = 'C2']
      T1 [label = 'T1', style = invis]; T2 [label = 'T2', style = invis];
      
      edge[len = 0.01, arrowhead = vee, label = ''];
      IA1 -> A1_Y; 
      IA2 -> C2_Y;
      
      edge[style='invisible', dir='none'];
      A1 -> IA1; C2 -> IA2; A2 -> IA3; 
      {B1 B2} -> IA4; C1 -> IA5; {D1 D2} -> {Final};
      {rank=same; C2_Y -> T1 -> T2 -> A1_Y}
      }
   }
             ")
flowchart