图的圆点流程图表-标签位置，有时被截断

Question

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

• 某些表格单元格中的文本在表单元格之外结束。
• 这张桌子有时越过边缘
• 当流程图被呈现为PNG映像(这是我想要的输出)时，这些表的某些部分在图像区域之外。

这个图表的思想是有一个水平的时间线，“列节点”同时发生(或者在时间线中紧密相连)。因此，为了执行这个“时间流”，我最终使用了rankdir="LR";和{rank=same; my_first_node; my_second_node; }。

如何使那些“表标签”呈现得更好一些？就像不跨越边缘，将文本完全放在其表格单元格中，导出到PNG?时可以看到完整的图形。

我使用以下命令：dot -Tpng foo.dot -o foo.png生成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>> ];
}

产额

​

​

在给定的上下文中，我发现节点解决方案更好/更干净，因为它使表中的信息更清晰。但如果有更多的，边缘的方式也将发挥作用。