Search code examples
graphvizplantuml

How to draw bloks top to bottom in the PlantUML/Graphviz


I want to draw like my drawing(first photo) in the plantUML(second photo) but I can not align box top to bottom. How can I do that? My plant UML code:

@startuml
digraph dfd{
  node[shape=record]
  {
  scheduler[label="<f0> scheduler"];
  store1 [label="<f0> firstTotalTimeBlockAddress|<f1> D"];
  store2 [label="<f0> secondTotalTimeBlockAddress|<f1> D"];
  store3 [label="<f0> firstTotalTime|<f0> D"];
  store4 [label="<f0> secondTotalTime|<f1> D"];
  store5 [label="<f0> firstTotalTimeBlockAddress|<f1> D"];
  store6 [label="<f0> secondTotalTimeBlockAddress|<f1> D"];
  store7 [label="<f0> firstTotalTime|<f1> D"];
  store8 [label="<f0> secondTotalTime|<f1> D"];
  store9 [label="<f0> firstTotalTimeBlockAddress|<f1> D"];
  store10 [label="<f0> secondTotalTimeBlockAddress|<f1> D"];
  store11 [label="<f0> firstTotalTime|<f1> D"];
  store12 [label="<f0> secondTotalTime|<f1> D"];
  proc1 [label="{<f0> 1|<f1> totalTimeRead\n\n\n}" shape=Mrecord];
  }  
subgraph cluster_0 {
    rank=same;
    store1 [label="<f0> firstTotalTimeBlockAddress|<f1> D"];
        store2 [label="<f0> secondTotalTimeBlockAddress|<f1> D"];
        store3 [label="<f0> firstTotalTime|<f1> D"];
        store4 [label="<f0> secondTotalTime|<f1> D"];

        label = "process #1";
}

  store1:f1 -> proc1:f0;
  store2:f1 -> proc1:f0;
  store3:f1 -> proc1:f0;
  store4:f1 -> proc1:f0;
  proc1:f1 -> store5:f0;  
  proc1:f1 -> store6:f0;  
  proc1:f1 -> store7:f0;  
  proc1:f1 -> store8:f0;  

  proc2 [label="{<f0> 2|<f1> updateTotalTime\n\n\n}" shape=Mrecord];

  store5:f1 -> proc2:f0;
  store6:f1 -> proc2:f0;
  store7:f1 -> proc2:f0;
  store8:f1 -> proc2:f0;

  proc2:f1 -> store9:f0;  
  proc2:f1 -> store10:f0;
  proc2:f1 -> store11:f0;  
  proc2:f1 -> store12:f0;
  
}
@enduml

https://ibb.co/b7Kqb0W (my drawing)

https://ibb.co/4dDW9Nq (plantUML photo)

I tried rankdir prompt for top to bottom align but I see this prompt change whole file. And I do not want to this.


Solution

  • A re-worked version of your input.
    It could also have been done by replacing each cluster and contents with a single html-like node (https://graphviz.org/doc/info/shapes.html#html).

    digraph dfd{
      compound=true  // allow edges to terminate at cluster
      ranksep=.2     // bring nodes within clusters closer together
      node[shape=record]
      edge[style=invis]  // invisible edges within clusters to determine ranking (rows)
    
    subgraph cluster_0 {
        //rank=same;
        store1 [label="<f0> firstTotalTimeBlockAddress|<f1> D"];
        store2 [label="<f0> secondTotalTimeBlockAddress|<f1> D"];
        store3 [label="<f0> firstTotalTime|<f1> D"];
        store4 [label="<f0> secondTotalTime|<f1> D"];
        store1->store2->store3->store4  // establish ranking
        label = "process #1";
    }
    
    subgraph cluster_1 {
        //rank=same;
        store5 [label="<f0> firstTotalTimeBlockAddress|<f1> D"];
        store6 [label="<f0> secondTotalTimeBlockAddress|<f1> D"];
        store7 [label="<f0> firstTotalTime|<f1> D"];
        store8 [label="<f0> secondTotalTime|<f1> D"];
        store5->store6->store7->store8
        label = "process #2";
    }
    
    subgraph cluster_2 {
        //rank=same;
        store9 [label="<f0> firstTotalTimeBlockAddress|<f1> D"];
        store10 [label="<f0> secondTotalTimeBlockAddress|<f1> D"];
        store11 [label="<f0> firstTotalTime|<f1> D"];
        store12 [label="<f0> secondTotalTime|<f1> D"];
        store9->store10->store11->store12
        label = "process #3";
    }
    
      scheduler[label="<f0> scheduler"];
      proc1 [label="{<f0> 1|<f1> totalTimeRead\n\n\n}" shape=Mrecord];
      proc2 [label="{<f0> 2|<f1> updateTotalTime\n\n\n}" shape=Mrecord];
    
      // make edges visible & increase node-to-node spacing
      edge[style=solid  minlen=2]
      scheduler->store1 [lhead=cluster_0]
      store4->proc1     [ltail=cluster_0]
      proc1->store5     [lhead=cluster_1]
      store8->proc2     [ltail=cluster_1]
      proc2->store9     [lhead=cluster_2]
    }
    

    Giving:
    enter image description here