graphviz - 使用 graphviz 生成图形的最佳方法

Question

这是我在这里的第一篇文章，我不确定它是否属于正确的子。

假设我们在某些数据结构中定义了以下工作流：

使用以下信息绘制此有向图的最佳方法是什么：

• 节点有2种类型（矩形最多1进1出，菱形最多2进2出
• 给出初始节点和最终节点
• 节点（边）之间的链接是已知的

我使用此信息生成的代码给出了以下图表：

我在这里想念什么？

Edit1：添加源代码

digraph flow_view {
rankdir = TB;  
graph[fontsize="22"];
node [shape="box", fontsize="11.0", style="filled", fillcolor="peachpuff", fontcolor="black"];
 "Case created" [fillcolor="seagreen1"];
 "Case created" -> "Case assigned" ; 
 "Case assigned" -> "Case review and initial analysis" ; 
 "Case review and initial analysis" -> "Further action required?" ; 
 "Close case" [fillcolor="lightpink"];
 "Further action required?" -> "Close case"[label="No", fontsize="8.5"]
 "Further action required?" [shape="diamond", fillcolor="peachpuff"] ; 
 "Further action required?" -> "Further work"[label="Yes", fontsize="8.5"]
 "Further action required?" [shape="diamond", fillcolor="peachpuff"] ; 
 "Close case" [fillcolor="lightpink"];
 "Satisfactory explanations?" -> "Close case"[label="Yes", fontsize="8.5"]
 "Satisfactory explanations?" [shape="diamond", fillcolor="peachpuff"] ; 
 "Case escalated / reassigned" -> "Further action required?" ; 
 "Satisfactory explanations?" -> "Case escalated / reassigned"[label="No", fontsize="8.5"]
 "Satisfactory explanations?" [shape="diamond", fillcolor="peachpuff"] ; 
 "Further work" -> "Satisfactory explanations?" ; 
}

标签： graphvizdot

Answer 1

我设法调整它以匹配您的示例图像，但不确定它的可扩展性如何。我大致做了以下事情：

• 结构化代码（只是为了便于阅读）：
  • 节点定义首先在两组中，基于形状
  • 边缘定义第二
  • 按照图形顺序的语法中的有序连接
  • 添加fontsize定义为全局边缘属性而不是每个连接
• 添加了一些格式调整（可选）
  • 添加了更现代的字体（Arial）
  • 使背景透明，以防您导出为 png。
• 用于portPos某些节点（例如"Further work":s）。这表明边应该连接到节点的哪一侧（n orth 、e ast、s outh、w est）。
• 添加constraint=false到一些连接。这表明在订购节点时不应考虑该连接。
• rank=same为两组节点添加
• 添加weight以缩短/拉直一些边缘

digraph flow_view {
rankdir = TB;
splines=splines
graph[fontsize="22", bgcolor="transparent", fontname="Arial"];
//Node definition
node [shape="box", fontsize="11.0", style="filled", fillcolor="peachpuff", fontcolor="black", fontname="Arial"];
    "Case created"               [ fillcolor="seagreen1"];
    "Close case"                 [ fillcolor="lightpink"];
    "Case assigned"
    "Case review and initial analysis"
    "Further work"
    "Case escalated / reassigned"
 node [shape="diamond"];
    "Further action required?"  
    "Satisfactory explanations?"
// Chart definition
edge [fontsize="8.5", fontname="Arial"]
    "Case created"                     -> "Case assigned" ;
    "Case assigned"                    -> "Case review and initial analysis" ;
    "Case review and initial analysis" -> "Further action required?" ;
    "Further action required?":w       -> "Close case":e[label="No", weight=100000, constraint=false]
    "Further action required?":s       -> "Further work":n[label="Yes", weight=10]
    "Further work":s                   -> "Satisfactory explanations?":n [weight=10] ;
    "Satisfactory explanations?":w     -> "Close case":s[label="Yes"]
    "Satisfactory explanations?"       -> "Case escalated / reassigned"[label="No"]
    "Case escalated / reassigned":n    -> "Further action required?":e
// Tweaks
{rank=same "Further action required?";"Close case"}
{rank=same "Satisfactory explanations?";"Case escalated / reassigned"}
}