将图像或文本添加到矩形或簇的边框 - graphviz

Question

我有一个允许我执行集群的代码。我想将标签移动到输出中集群的边界。我已经尝试过 labelloc=l 和其他选项，但我无法使其工作。附件是我从 graphviz 得到的，而另一个是我所期待的。有没有办法修改代码，添加插件或 gvpr 以获得所需的输出？

digraph AlignmentMap {
/*
/*
Author: Lars Barkman
Created: 2015-08-25
Changelog: See version control system

This is an example of an Alignment Map visualized with the help of Graphviz.
This solution depends on either generation or maintaining a .dot file and from that generating a image or document.
Personally, I think that editing the file by hand should be fine if the naming conventions used are intuitive.
Alignment maps first came to my attention on Martin Fowlers blog (http://martinfowler.com/bliki/AlignmentMap.html).
*/

// General layout of the graph
rankdir=LR; // Direction of the graph Left to Right
node [style="rounded,filled",color=black,shape=box,fillcolor=white]; // Defines the default layout of the nodes
graph [style=filled, splines=line]; // Fills the subgraphs and defines the layout of the connections
rank = same; // Makes sure that nodes are properly aligned even without a connection

// Column for Business Outcomes
subgraph cluster_business_outcome {
    label="Business Outcomes"
    graph [color=pink];

    business_outcome_Customer_Acquisition [label="Customer\nAcquisition"];
    business_outcome_Customer_Retention [label="Customer\nRetention"];
    business_outcome_Cost_of_Operations [label="Cost of\nOperations"];
}

// Column for IT Outcomes
subgraph cluster_IT_outcome {
    label=< <table>
        <tr><td fixedsize="true" width="50" height="50"><img src="./Azure-PlantUML-master/dist/Identity/AzureActiveDirectory.svg" /></td></tr>
        <tr><td>Active Directory</td></tr>
    </table>
>
    graph [color=mistyrose2];

    IT_outcome_Platform_Unbundling [label="Platform\nUnbundling"];
    IT_outcome_Site_Ux [label="Site Ux"];
    IT_outcome_Site_Performance [label="Site\nPerformance"];
    IT_outcome_Site_Scalability [label="Site\nScalability"];
}

// Column for IT Initiatives
subgraph cluster_IT_initiatives {
    label="IT Initiatives"
    graph [color=papayawhip];

    IT_initiatives_API [label="API"];
    IT_initiatives_Pluginize [label="Pluginize"];
    IT_initiatives_Responsive_Rewrite [label="Responsive\nRewrite"];
    IT_initiatives_Catalog_Performance [label="Catalog\nPerformance"];
    IT_initiatives_Sharding [label="Sharding"];
}

// Column for Action Items
subgraph cluster_action_items {
    label="Action Items"
    graph [color=darkseagreen1];

    action_items_0 [label="..."];
    action_items_1 [label="..."];
    action_items_App_X [label="App X"];
    action_items_Search_In_One [label="Search-\nIn-One"];
    action_items_4 [label="..."];
}

// Connections between nodes in the different columns
// business_outcome_* -> IT_outcome_Platform_*
business_outcome_Customer_Acquisition   -> IT_outcome_Platform_Unbundling;
business_outcome_Customer_Acquisition   -> IT_outcome_Site_Ux;
business_outcome_Customer_Retention     -> IT_outcome_Site_Ux;
business_outcome_Customer_Retention     -> IT_outcome_Site_Performance;
business_outcome_Cost_of_Operations     -> IT_outcome_Site_Performance;
business_outcome_Cost_of_Operations     -> IT_outcome_Site_Scalability;
// IT_outcome_* -> IT_initiatives_*
IT_outcome_Platform_Unbundling          -> IT_initiatives_API;
IT_outcome_Platform_Unbundling          -> IT_initiatives_Pluginize;
IT_outcome_Site_Ux                      -> IT_initiatives_Responsive_Rewrite;
IT_outcome_Site_Performance             -> IT_initiatives_Catalog_Performance;
IT_outcome_Site_Scalability             -> IT_initiatives_Sharding;
// IT_initiatives_* -> action_items_*
IT_initiatives_API                      -> action_items_0;
IT_initiatives_Pluginize                -> action_items_1;
IT_initiatives_Responsive_Rewrite       -> action_items_App_X;
IT_initiatives_Catalog_Performance      -> action_items_Search_In_One;
IT_initiatives_Sharding                 -> action_items_4;

} The one on right is graphviz and left is what i expect

Answer 1

（对不起，我误解了请求）
这是 gvpr“修复”。

运行 dot -Tdot 定位节点、边、簇
运行通过 gvpr（下面的程序）删除标签并将其替换为（新）节点
运行通过 neato -n2 -Tsvg（见 https://graphviz.org/faq/#FaqDottyWithCoords）

[请注意，我必须调整 html 以删除边框：]

 label=< <table BGCOLOR="transparent" BORDER="0" CELLBORDER="0" CELLSPACING="0">
       <tr><td fixedsize="true" width="50" height="50"><img src="image_dir/Face-smile.svg" /></td></tr>
       <tr><td>Active Directory</td></tr>
   </table>
>

命令行：

dot -Tdot myfile.gv|gvpr -c -f moveLabel.gvpr | neato -n2 -Tsvg >myfile.svg

moveLable.gvpr:

BEGIN{
  string saveLbl, saveX, saveY, workS;
  graph_t theG;
  node_t newNode;
}
BEG_G{
  print("// ONE");
  theG=subg($G, "cluster_IT_outcome");
  saveLbl=theG.label;
  // next 3 steps get the left X coordinate of the cluster
  workS=llOf(theG.bb);
  workS=xOf(workS);
  saveX=(float)workS;
  // now get Y coordinate of label
  workS=yOf(theG.lp);
  saveY=(float)workS;
  theG.label="";     // remove label from cluster
}
END_G{  
  // create new node to replace cluster label
  newNode=node($G, "__myNewNode");
  newNode.pos=sprintf("%.2f,%.2f", saveX, saveY);
  newNode.shape="plain";
  newNode.fillcolor="none";
  newNode.label=html($G, saveLbl);
}

将图像或文本添加到矩形或簇的边框 - graphviz

Add image or text to border of rectangle or cluster - graphviz

graphviz