You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何为Graphviz中rank=same分组的节点添加虚线包围盒

给Graphviz同层级节点添加虚线包围盒方案

刚好可以用Graphviz的cluster子图来实现你的需求!每个cluster会自动生成一个包围盒,咱们只需要把每个层级的节点放进对应的cluster里,再设置虚线样式就行。下面是修改后的完整代码:

digraph customer {
 layout=dot
 label = "some diagram";
 labelloc = "t"; // place the label at the top
 node [shape=record];

 // 层级1的虚线包围盒
 subgraph cluster_level1 {
  {rank=same a1 b1 c1 d1};
  label="Level 1 Group";
  graph[style=dotted];
 }

 // 层级2的虚线包围盒
 subgraph cluster_level2 {
  {rank=same a2 b2 c2 d2};
  label="Level 2 Group";
  graph[style=dotted];
 }

 // 层级3的虚线包围盒
 subgraph cluster_level3 {
  {rank=same a3 b3_1 b3_2 c3_1 c3_2 d3_1 d3_2};
  label="Level 3 Group";
  graph[style=dotted];
 }

 // 层级4的虚线包围盒
 subgraph cluster_level4 {
  {rank=same a4 b4_1_1 b4_1_2 b4_2_1 b4_2_2 c4_1_1 c4_1_2 c4_2_1 c4_2_2 d4_1_1 d4_1_2 d4_2_1 d4_2_2};
  label="Level 4 Group";
  graph[style=dotted];
 }

 // 层级5的虚线包围盒
 subgraph cluster_level5 {
  {rank=same a5 b5_1 b5_2 b5_3 b5_4 c5_1 c5_2 c5_3 c5_4 d5_1 d5_2 d5_3 d5_4};
  label="Level 5 Group";
  graph[style=dotted];
 }

 // 层级6的虚线包围盒
 subgraph cluster_level6 {
  {rank=same a6 b6_1 b6_2 b6_3 b6_4 c6_1 c6_2 c6_3 c6_4 d6_1 d6_2 d6_3 d6_4};
  label="Level 6 Group";
  graph[style=dotted];
 }

 // 节点定义与连接关系
 a1 [label = "Level 1"];
 a2 [label = "Level 2"];
 a3 [label = "Level 3"];
 a4 [label = "Level 4"];
 a5 [label = "Level 5"];
 a6 [label = "Level 6"];

 a1 -> a2 -> a3 -> a4;
 a4 -> a5 [label = "case ..." ];
 a5 -> a6;

 b1 [label = "Text A"];
 b2 [label = "false"];
 b3_1 [label = "no"];
 b3_2 [label = "yes"];
 b4_1_1 [label = "same"];
 b4_1_2 [label = "different"];
 b4_2_1 [label = "same"];
 b4_2_2 [label = "different"];
 b5_1 [label = "no", fillcolor = red, style=filled];
 b5_2 [label = "no", fillcolor = red, style=filled];
 b5_3 [label = "no", fillcolor = red, style=filled];
 b5_4 [label = "yes", fillcolor = green, style=filled];
 b6_1 [label = "yes", fillcolor = green, style=filled];
 b6_2 [label = "yes", fillcolor = green, style=filled];
 b6_3 [label = "yes", fillcolor = green, style=filled];
 b6_4 [label = "yes", fillcolor = green, style=filled];

 b1 -> b2;
 b2 -> b3_1;
 b3_1 -> b4_1_1;
 b4_1_1 -> b5_1 [label = "A" ];
 b5_1 -> b6_1;
 b3_1 -> b4_1_2;
 b4_1_2 -> b5_2 [label = "B" ];
 b5_2 -> b6_2;
 b2 -> b3_2;
 b3_2 -> b4_2_1;
 b4_2_1 -> b5_3 [label = "C" ];
 b5_3 -> b6_3;
 b3_2 -> b4_2_2;
 b4_2_2 -> b5_4 [label = "D" ];
 b5_4 -> b6_4;

 c1 [label = "Text B"];
 c2 [label = "true"];
 c3_1 [label = "no"];
 c3_2 [label = "yes"];
 c4_1_1 [label = "same"];
 c4_1_2 [label = "different"];
 c4_2_1 [label = "same"];
 c4_2_2 [label = "different"];
 c5_1 [label = "no", fillcolor = red, style=filled];
 c5_2 [label = "no", fillcolor = red, style=filled];
 c5_3 [label = "yes", fillcolor = green, style=filled];
 c5_4 [label = "yes", fillcolor = green, style=filled];
 c6_1 [label = "yes", fillcolor = green, style=filled];
 c6_2 [label = "yes", fillcolor = green, style=filled];
 c6_3 [label = "yes", fillcolor = green, style=filled];
 c6_4 [label = "yes", fillcolor = green, style=filled];

 c1 -> c2;
 c2 -> c3_1;
 c3_1 -> c4_1_1;
 c4_1_1 -> c5_1 [label = "E" ];
 c5_1 -> c6_1;
 c3_1 -> c4_1_2;
 c4_1_2 -> c5_2 [label = "F" ];
 c5_2 -> c6_2;
 c2 -> c3_2;
 c3_2 -> c4_2_1;
 c4_2_1 -> c5_3 [label = "G" ];
 c5_3 -> c6_3;
 c3_2 -> c4_2_2;
 c4_2_2 -> c5_4 [label = "H" ];
 c5_4 -> c6_4;

 d1 [label = "(else)"];
 d2 [label = "???", fillcolor = yellow, style=filled];
 d3_1 [label = "no"];
 d3_2 [label = "yes"];
 d4_1_1 [label = "same"];
 d4_1_2 [label = "different"];
 d4_2_1 [label = "same"];
 d4_2_2 [label = "different"];
 d5_1 [label = "no", fillcolor = red, style=filled];
 d5_2 [label = "no", fillcolor = red, style=filled];
 d5_3 [label = "no", fillcolor = red, style=filled];
 d5_4 [label = "no", fillcolor = red, style=filled];
 d6_1 [label = "yes", fillcolor = green, style=filled];
 d6_2 [label = "yes", fillcolor = green, style=filled];
 d6_3 [label = "yes", fillcolor = green, style=filled];
 d6_4 [label = "yes", fillcolor = green, style=filled];

 d1 -> d2;
 d2 -> d3_1;
 d3_1 -> d4_1_1;
 d4_1_1 -> d5_1 [label = "I" ];
 d5_1 -> d6_1;
 d3_1 -> d4_1_2;
 d4_1_2 -> d5_2 [label = "J" ];
 d5_2 -> d6_2;
 d2 -> d3_2;
 d3_2 -> d4_2_1;
 d4_2_1 -> d5_3 [label = "K" ];
 d5_3 -> d6_3;
 d3_2 -> d4_2_2;
 d4_2_2 -> d5_4 [label = "L" ];
 d5_4 -> d6_4;
}

关键细节说明:

  • Cluster识别规则:所有cluster子图的名字必须以cluster开头,Graphviz才会将其渲染为带包围盒的分组
  • 层级对齐保障:把原有的{rank=same ...}语句放到对应cluster内部,确保节点依然保持同一水平层级
  • 样式自定义:通过graph[style=dotted]设置虚线边框,你还可以调整label内容、labelloc(标签位置)、fontsize等参数优化显示效果

内容的提问来源于stack exchange,提问作者Christian

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.12 03:59:19