graphviz 点流程图表标签放置和有时被截断

Question

我创建了一个相当大的流程图。一些边缘标签（呈现为表格）存在以下问题：

• 某些表格单元格中的文本最终位于表格单元格之外
• 桌子有时会越过边缘
• 当流程图呈现为 PNG 图像（这是我想要的输出）时， 那么这些表格的某些部分在图像区域之外

这个图表的想法是有一个水平时间线，“列节点”同时发生（或在时间线中靠近）。所以为了执行这个“时间流”，我最终使用了rankdir="LR"; 和{rank=same; my_first_node; my_second_node; }。

如何使这些“表格标签”更好地呈现？比如不越界，将文本完全放在表格单元格中，导出为 PNG 时看到完整的图表？

我使用此命令生成 PNG 输出图像：dot -Tpng foo.dot -o foo.png，请参阅下面的“表格标签”问题：

digraph my_flow {
  // global graph conf
  rankdir="LR"; // orziontal
  nodesep=0.9;

  // shared conf
  edge [ fontname="Courier New", fontsize=20];
  node [ fontname=Helvetica, fontsize=26, style="rounded,filled", nojustify=true];

  // many different node "classes"
  node[shape=doublecircle, color=navajowhite]
    my_first_node; my_second_node;
  node[shape=rect, color=aquamarine2]
    first_std_horiz_node; second_std_horiz_node;

  // custom configuration for each node
  first_std_horiz_node[label="First \l std \l horizontal \l node"]
  second_std_horiz_node[label="Second \l std \l horizontal \l node"]
  my_first_node[label="My \l first \l node"]
  my_second_node[label="My \l second \l node"]

  // sets of nodes in the same "column"
  {rank=same; my_first_node; my_second_node; }

  first_std_horiz_node -> second_std_horiz_node
  second_std_horiz_node -> my_first_node
  my_first_node -> my_second_node [label=<<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
                             <TR><TD BGCOLOR="gray">action type 1</TD></TR>
                             <TR><TD>action 1 very very very very long description</TD></TR>
                             <TR><TD BGCOLOR="gray">action type 2</TD></TR>
                             <TR><TD>action X</TD></TR>
                             <TR><TD>action Y</TD></TR>
                             <TR><TD BGCOLOR="gray">action type 3</TD></TR>
                             <TR><TD>action A</TD></TR>
                             <TR><TD>action B</TD></TR>
                             <TR><TD>action C</TD></TR>
                             <TR><TD BGCOLOR="gray">action type 4</TD></TR>
                             <TR><TD>action Q</TD></TR>
                             <TR><TD>action W</TD></TR>
                           </TABLE>>];
}

Answer 1

如果您将表放在节点而不是边缘标签中，事情看起来会更好；并使用 HTML 标记 <BR/>，您可以在表格中换行。相应地编辑您的代码，我想出了

digraph my_flow {
  // global graph conf
  rankdir="LR"; // horizontal
  nodesep=0.9;

  // shared conf
  node [ fontname=Helvetica, fontsize=26, style="rounded,filled", nojustify=true];

  // node instead of edge label
  my_table[ shape=none, margin=0, fontname="Courier New", fontsize=20, label=<
          <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
           <TR><TD BGCOLOR="gray">action type 1</TD></TR>
           <TR><TD BGCOLOR="white">action 1<BR/>very very very very<BR/>long description</TD></TR>
           <TR><TD BGCOLOR="gray">action type 2</TD></TR>
           <TR><TD BGCOLOR="white">action X</TD></TR>
           <TR><TD BGCOLOR="white">action Y</TD></TR>
           <TR><TD BGCOLOR="gray">action type 3</TD></TR>
           <TR><TD BGCOLOR="white">action A</TD></TR>
           <TR><TD BGCOLOR="white">action B</TD></TR>
           <TR><TD BGCOLOR="white">action C</TD></TR>
           <TR><TD BGCOLOR="gray">action type 4</TD></TR>
           <TR><TD BGCOLOR="white">action Q</TD></TR>
           <TR><TD BGCOLOR="white">action W</TD></TR>
         </TABLE>> ]

  // many different node "classes"
  node[shape=doublecircle, color=navajowhite]
    my_first_node; my_second_node;
  node[shape=rect, color=aquamarine2]
    first_std_horiz_node; second_std_horiz_node;

  // custom configuration for each node
  first_std_horiz_node[label="First \l std \l horizontal \l node"]
  second_std_horiz_node[label="Second \l std \l horizontal \l node"]
  my_first_node[label="My \l first \l node"]
  my_second_node[label="My \l second \l node"]

  // sets of nodes in the same "column"
  {rank=same; my_first_node; my_table; my_second_node; }

  first_std_horiz_node -> second_std_horiz_node -> my_first_node;
  my_first_node -> my_table[ dir = none ];
  my_table -> my_second_node;
}

产生

编辑

表格代码修改后，也可以将表格作为标签使用；为了更容易在这里再次参考完整的代码：

digraph my_flow {
  // global graph conf
  rankdir="LR"; // horizontal
  nodesep=0.9;

  // shared conf
  node [ fontname=Helvetica, fontsize=26, style="rounded,filled", nojustify=true];

  // node instead of edge label


  // many different node "classes"
  node[shape=doublecircle, color=navajowhite]
    my_first_node; my_second_node;
  node[shape=rect, color=aquamarine2]
    first_std_horiz_node; second_std_horiz_node;

  // custom configuration for each node
  first_std_horiz_node[label="First \l std \l horizontal \l node"]
  second_std_horiz_node[label="Second \l std \l horizontal \l node"]
  my_first_node[label="My \l first \l node"]
  my_second_node[label="My \l second \l node"]

  // sets of nodes in the same "column"
  {rank=same; my_first_node; my_second_node; }

  first_std_horiz_node -> second_std_horiz_node -> my_first_node;
  my_first_node -> my_second_node[ fontname="Courier New", fontsize=20, label=<
          <TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
           <TR><TD BGCOLOR="gray">action type 1</TD></TR>
           <TR><TD BGCOLOR="white">action 1<BR/>very very very very<BR/>long description</TD></TR>
           <TR><TD BGCOLOR="gray">action type 2</TD></TR>
           <TR><TD BGCOLOR="white">action X</TD></TR>
           <TR><TD BGCOLOR="white">action Y</TD></TR>
           <TR><TD BGCOLOR="gray">action type 3</TD></TR>
           <TR><TD BGCOLOR="white">action A</TD></TR>
           <TR><TD BGCOLOR="white">action B</TD></TR>
           <TR><TD BGCOLOR="white">action C</TD></TR>
           <TR><TD BGCOLOR="gray">action type 4</TD></TR>
           <TR><TD BGCOLOR="white">action Q</TD></TR>
           <TR><TD BGCOLOR="white">action W</TD></TR>
         </TABLE>> ];
}

产生

在给定的上下文中，我发现节点解决方案更可取/更清洁，因为它使表中的信息所属的位置更加清晰。但如果还有更多，边缘方式也可以。