Graph 如何影响图形项的布局？

我试图使用Graphviz可视化一个简单的有限状态机图。Graphviz创建的布局并不完全符合我的喜好。我希望得到更紧凑、边缘更短的结果

到目前为止，我已经尝试使用组和更改边的权重，但运气不太好。我不清楚Graphviz为什么用这种方式绘制图形，以及如何根据我的喜好调整算法。我可以设置哪些参数来实现这一点？或者我应该使用另一个命令而不是

dot

？我尝试了neato，但结果看起来完全是一团糟，我真的不明白我在做什么

这是我迄今为止最好的结果：

尝试想象一个比这更好的布局，我认为如果红色框排列方式不同，图形会看起来更好，更紧凑，例如，如图中箭头所示：

我使用

dot

创建了图形，源代码如下：

  1 digraph JobStateDiagram
  2 {
  3   rankdir=LR;
  4   size="8,5";
  5 
  6   node  [style="rounded,filled,bold", shape=box, fixedsize=true, width=1.3, fontname="Arial"];
  7   Created   [fillcolor=black, shape=circle, label="", width=0.25];
  8   Destroyed [fillcolor=black, shape=doublecircle, label="", width=0.3];
  9   Empty     [fillcolor="#a0ffa0"];
 10   Announced [fillcolor="#a0ffa0"];
 11   Assigned  [fillcolor="#a0ffa0"];
 12   Working   [fillcolor="#a0ffa0"];
 13   Ready     [fillcolor="#a0ffa0"];
 14   TimedOut  [fillcolor="#ffa0a0"];
 15   Failed    [fillcolor="#ffa0a0"];
 16 
 17   {
 18     rank=source; Created Destroyed;
 19   }
 20 
 21   edge  [style=bold, fontname="Arial" weight=2]
 22   Empty     -> Announced [ label="announce"   ];
 23   Announced -> Assigned  [ label="assign"     ];
 24   Assigned  -> Working   [ label="start"      ];
 25   Working   -> Ready     [ label="finish"     ];
 26   Ready     -> Empty     [ label="revoke"     ];
 27 
 28   edge  [fontname="Arial" color="#aaaaaa" weight=1]
 29   Announced -> TimedOut  [ label="timeout"    ];
 30   Assigned  -> TimedOut  [ label="timeout"    ];
 31   Working   -> TimedOut  [ label="timeout"    ];
 32   Working   -> Failed    [ label="error"      ];
 33   TimedOut  -> Announced [ label="announce"   ];
 34   TimedOut  -> Empty     [ label="revoke"     ];
 35   Failed    -> Announced [ label="announce"   ];
 36   Failed    -> Empty     [ label="revoke"     ];
 37 
 38   edge  [style=bold, fontname="Arial" weight=1]
 39   Created   -> Empty     [ label="initialize" ];
 40   Empty     -> Destroyed [ label="finalize"   ];
 41   Announced -> Empty     [ label="revoke"     ];
 42   Assigned  -> Empty     [ label="revoke"     ];
 43   Working   -> Empty     [ label="revoke"     ];
 44 }

另外，如果我在上面的Graphviz文件中做了任何奇怪的事情，请任何人告诉我——任何反馈都将不胜感激

---

更新：

更多的实验和尝试，如用户marapet给出的端口建议，增加了我的困惑。。。例如，在下图中，

dot

为什么选择为

Working->Failed

和

Failed->Announced

绘制这些奇怪的弯路，而不是直线

---

在我看来，您的输出看起来不错

TimedOut

和

Failed

当然都是右边的，因为从

工作到它们有一条边。这正是
dot
最擅长的，虽然您可以对graphviz布局进行一些调整，但我认为如果您想要创建特定的图形布局并控制一切，最好使用其他工具

尽管如此，我还是用graphviz快速尝试了一下。我更改了一些线，以创建一条包含所有绿色节点的直线，并将红色节点对齐，如您的问题所示。我还添加了边缘集中器-结果在我看来并不好：

digraph JobStateDiagram
{
  rankdir=LR;
  size="8,5";
  concentrate=true;

  node  [style="rounded,filled,bold", shape=box, fixedsize=true, width=1.3, fontname="Arial"];
  Created   [fillcolor=black, shape=circle, label="", width=0.25];
  Destroyed [fillcolor=black, shape=doublecircle, label="", width=0.3];
  Empty     [fillcolor="#a0ffa0"];
  Failed    [fillcolor="#ffa0a0"];
  Announced [fillcolor="#a0ffa0"];
  Assigned  [fillcolor="#a0ffa0"];
  Working   [fillcolor="#a0ffa0"];
  Ready     [fillcolor="#a0ffa0"];
  TimedOut  [fillcolor="#ffa0a0"];

  {
    rank=source; Created; Destroyed;
  }
  {
    rank=same;Announced;Failed;
  }
  {
    rank=same;Assigned;TimedOut;
  }

  edge  [style=bold, fontname="Arial", weight=100]
  Empty     -> Announced [ label="announce"   ];
  Announced -> Assigned  [ label="assign"     ];
  Assigned  -> Working   [ label="start"      ];
  Working   -> Ready     [ label="finish"     ];
  Ready     -> Empty     [ label="revoke", weight=1     ];

  edge  [color="#aaaaaa", weight=1]
  Announced -> TimedOut  [ label="timeout"    ];
  Assigned  -> TimedOut  [ label="timeout"    ];
  Working   -> TimedOut  [ label="timeout"    ];
  Working   -> Failed    [ label="error"      ];
  TimedOut  -> Announced [ label="announce"   ];
  TimedOut  -> Empty     [ label="revoke"     ];
  Failed    -> Announced [ label="announce"   ];
  Failed    -> Empty     [ label="revoke"     ];

  Created   -> Empty     [ label="initialize" ];
  Empty     -> Destroyed [ label="finalize"   ];
  Announced -> Empty     [ label="revoke"     ];
  Assigned  -> Empty     [ label="revoke"     ];
  Working   -> Empty     [ label="revoke"     ];
}


您还可以通过使用端口来控制边的起点和终点来进行改进

关于你的点文件中奇怪的东西的问题：除了行号（这最终使我能够很好地使用我的文本编辑器的列模式）和对齐，我觉得你的文件很好。只要可能，我都会以类似的方式构造我的点文件（图形属性、节点列表、分组、边）。请注意，节点首次出现的顺序可能会对最终布局产生影响。
虽然这是一个非常古老的问题，但我也遇到了类似的问题，希望与大家分享我的结果。除了“权重”、“排名=相同”技巧外，我刚刚发现可以使用以下方法来调整布局结果：


dir=返回
添加更多边或节点并设置style=invi

当涉及到问题中的这个特定图形时，实际上rank=same和weight将完成主要工作，style=invi可以进行一些微调。所以通过添加这些行

 {
  rank=same;Announced;Failed;
 }
 {
  rank=same;Assigned;TimedOut;
 }

将
weight=1
添加到文件的“准备清空”边缘，并使用一些不可见的边缘来微调空间，我得到了以下结果：


完整的图形点源：

digraph JobStateDiagram
{
  rankdir=LR;
  size="8,5";

  node  [style="rounded,filled,bold", shape=box, fixedsize=true, width=1.3, fontname="Arial"];
  Created   [fillcolor=black, shape=circle, label="", width=0.25];
  Destroyed [fillcolor=black, shape=doublecircle, label="", width=0.3];
  Empty     [fillcolor="#a0ffa0"];
  Announced [fillcolor="#a0ffa0"];
  Assigned  [fillcolor="#a0ffa0"];
  Working   [fillcolor="#a0ffa0"];
  Ready     [fillcolor="#a0ffa0"];
  TimedOut  [fillcolor="#ffa0a0"];
  Failed    [fillcolor="#ffa0a0"];

  {
    rank=source; Created Destroyed;
  }
  {
    rank=same;Announced;Failed; #change here
  }
  {
    rank=same;Assigned;TimedOut; #change here
  }

  edge  [style=bold, fontname="Arial" weight=20] #change here
  Empty     -> Announced [ label="announce"   ];
  Announced -> Assigned  [ label="assign"     ];
  Assigned  -> Working   [ label="start"      ];
  Working   -> Ready     [ label="finish"     ];
  Ready     -> Empty     [ label="revoke" weight=1 ]; #change here

  edge  [fontname="Arial" color="#aaaaaa" weight=2] #change here
  Announced -> TimedOut  [ label="timeout"    ];
  Assigned  -> TimedOut  [ label="timeout" weight=1]; #change here
  Working   -> TimedOut  [ label="timeout"    ];
  Working   -> Failed    [ label="error"      ];
  TimedOut  -> Announced [ label="announce"   ];
  TimedOut  -> Empty     [ label="revoke"     ];
  Failed    -> Announced [ label="announce"   ];
  Failed    -> Empty     [ label="revoke"     ];

  edge  [style=bold, fontname="Arial" weight=1]
  Created   -> Empty     [ label="initialize" ];
  Empty     -> Destroyed [ label="finalize"   ];
  Announced -> Empty     [ label="revoke"     ];
  Assigned  -> Empty     [ label="revoke"     ];
  Working   -> Empty     [ label="revoke"     ];
  
  Assigned  -> Working   [ label="start"  style=invis     ]; #change here 
  Assigned  -> Working   [ label="start"  style=invis     ]; #change here 
}

更新：与其将“失败”和“宣布”放在同一个等级上，不如将“失败”、“分配”和“时间”放在同一等级上可能会产生如下更好的结果，这更好地说明了失败和时间之间的相似性和差异。（但必须删除Invi边才能获得下图）

感谢您努力尝试此功能，并给了我更多建议。我用一些结果更新了这个问题。我不认为这是一个完整的解决方案，所以这将需要更多的实验从我这边来实现我所寻找的。谢谢你回答一个老问题。在我看来，你的图表确实是目前为止最好的。我不明白你的修改是怎么做到的。特别是，您能否解释一下使用
style=invi
包含边的基本原理？使用style=invi的边的目的是使超时边从工作到时间都更弯曲，以便结果图看起来更好（更对称）。没有它们，结果看起来几乎相同，只是超时边缘是一条直线。正如我所说，这只是一些“微调”。：）