graphviz html table 节点居中而不是同等级

Question

在此示例图中，我希望两个节点（源中的 A 和 B）从相同的 y 位置开始。特别是，我希望蓝色 header 和红色 header 处于同一等级或 y 位置——理想情况下尽可能靠近图像框的顶部，而不是它目前引发的所有行为。

换句话说，我希望红色 header 正好位于蓝色 header 所在的位置，就其 y 位置而言，但就目前而言，它似乎是所有新节点使用 html 标签相对于最大的 html 标签节点居中显示。

这里用另一张图来说明我的意思：

理想情况下，随着添加更多具有相似 html 标签结构的节点，它们从左向右移动，并从与所有其他节点相同的 y 位置开始 nodes/headers。

不幸的是，我尝试了 rank 的多种变体，但我似乎无法使用排名（或其他任何方式）来做到这一点。

记录不是可接受的解决方案；在我生成的图表中，行数非常大，并且行数 > 400 的记录似乎无法为我生成并出现解析错误。

请提供一个解决方案，该解决方案生成与良好图形示例图像（第 2 张图像）非常相似的内容，类似于以下 graphviz 源（用于使用 dot -O -Tpng <filename.gv> 生成不良图像）：

digraph example {

node [shape=plaintext]
rankdir=TB

A [label=<
  <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
   <TR>
    <TD BGCOLOR="lightblue">HEADER</TD>
   </TR>
   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>

   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>

   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>

   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>


   <TR>
    <TD ALIGN="LEFT">TEST</TD>
   </TR>

  </TABLE>
>];

B [
label=<
  <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
   <TR PORT="header">
    <TD BGCOLOR="#d23939" COLSPAN="2">HEADER</TD>
   </TR>
   <TR>
    <TD BGCOLOR="#ff6363">ONE</TD><TD BGCOLOR="#ff6363">TWO</TD>
   </TR>
   <TR>
    <TD PORT="1">1</TD><TD>2</TD>
   </TR>
   <TR>
    <TD PORT="3">3</TD><TD>4</TD>
   </TR>
  </TABLE>
>];

}

Answer 1

这是rankdir=LR的典型例子。辅助节点和边不可见

digraph example {
    rankdir=LR
    node [shape=plaintext]

    0, 1, 2, 3 [style=invis]
    0->1->2->3 [style=invis]
    { rank=same; 0->A [style=invis]}
    { rank=same; 1->B [style=invis]}

    A [label=<
      <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
       <TR>
        <TD BGCOLOR="lightblue">HEADER</TD>
       </TR>
       <TR>
        <TD ALIGN="LEFT">TEST</TD>
       </TR>
       <TR>
        <TD ALIGN="LEFT">TEST</TD>
       </TR>
       <TR>
        <TD ALIGN="LEFT">TEST</TD>
       </TR>
       <TR>
        <TD ALIGN="LEFT">TEST</TD>
       </TR>
       <TR>
        <TD ALIGN="LEFT">TEST</TD>
       </TR>
       <TR>
        <TD ALIGN="LEFT">TEST</TD>
       </TR>
       <TR>
        <TD ALIGN="LEFT">TEST</TD>
       </TR>
      </TABLE>
    >];

    B [label=<
      <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
       <TR PORT="header">
        <TD BGCOLOR="#d23939" COLSPAN="2">HEADER</TD>
       </TR>
       <TR>
        <TD BGCOLOR="#ff6363">ONE</TD><TD BGCOLOR="#ff6363">TWO</TD>
       </TR>
       <TR>
        <TD PORT="1">1</TD><TD>2</TD>
       </TR>
       <TR>
        <TD PORT="3">3</TD><TD>4</TD>
       </TR>
      </TABLE>
    >];
}

graphviz html table 节点居中而不是同等级

graphviz html table nodes centered instead of same rank

html

dot

graphviz