Search code examples
graphviz

How to generate nodes with customized shape?

HERE is a very good example that illustrates how to generate complex graphs using graphviz. The dot file is listed here.

digraph G {
    compound=true;
    ranksep=1.25;
    label="From Past to Future...";

    node [shape=plaintext, fontsize=16];

    bgcolor=white;
    edge [arrowsize=1, color=black];

    /* Nodes */
    subgraph cluster_Computers {label="Computers"; labelloc="b"; Computers_icon};
    Computers_icon [label="", shape=box, style=invis, shapefile="Computers.png"];

    subgraph cluster_Semantic_Web {label="Semantic Web"; labelloc="b"; Semantic_Web_icon};
    Semantic_Web_icon [label="", shape=box, style=invis, shapefile="Semantic_Web.png"];

    subgraph cluster_Cryptography {label="Cryptography"; labelloc="b"; Cryptography_icon};
    Cryptography_icon [label="", shape=box, style=invis, shapefile="Cryptography.png"];

    subgraph cluster_Automata {label="Automata"; labelloc="b"; Automata_icon};
    Automata_icon [label="", shape=box, style=invis, shapefile="Automata.png"];

    subgraph cluster_AI {label="A.I."; labelloc="b"; AI_icon};
    AI_icon [label="", shape=box, style=invis, shapefile="AI.png"];

    subgraph cluster_Chaos {label="Chaos / Fractals"; labelloc="b"; Chaos_icon};
    Chaos_icon [label="", shape=box, style=invis, shapefile="Chaos.png"];

    subgraph cluster_XML {label="XML / RDF / URI"; labelloc="b"; XML_icon};
    XML_icon [label="", shape=box, style=invis, shapefile="XML.png"];

    subgraph cluster_Ontology {label="Ontology / Clustering"; labelloc="b"; Ontology_icon};
    Ontology_icon [label="", shape=box, style=invis, shapefile="Ontology.png"];

    subgraph cluster_Biology {label="Biology / Neurons"; labelloc="b"; Biology_icon};
    Biology_icon [label="", shape=box, style=invis, shapefile="Biology.png"];

    subgraph cluster_Agents {label="Agents / Security"; labelloc="b"; Agents_icon};
    Agents_icon [label="", shape=box, style=invis, shapefile="Agents.png"];

    subgraph cluster_Small_World {label="The Small World Project"; labelloc="b"; Small_World_icon};
    Small_World_icon [label="", shape=box, style=invis, shapefile="Small_World.png"];

    subgraph cluster_Social_Networks {label="Social Networks"; labelloc="b"; Social_Networks_icon};
    Social_Networks_icon [label="", shape=box, style=invis, shapefile="Social_Networks.png"];

    subgraph cluster_Search_Engines {label="Search Engines"; labelloc="b"; Search_Engines_icon};
    Search_Engines_icon [label="", shape=box, style=invis, shapefile="Search_Engines.png"];

    subgraph cluster_Turing {label="A. Turing"; labelloc="b"; Turing_icon};
    Turing_icon [label="", shape=box, style=invis, shapefile="Turing.png"];

    subgraph cluster_Rejewski {label="M. Rejewski"; labelloc="b"; Rejewski_icon};
    Rejewski_icon [label="", shape=box, style=invis, shapefile="Rejewski.png"];

    subgraph cluster_Dertouzos {label="M. Dertouzos"; labelloc="b"; Dertouzos_icon};
    Dertouzos_icon [label="", shape=box, style=invis, shapefile="Dertouzos.png"];

    subgraph cluster_Berners_Lee {label="T. Berners-Lee"; labelloc="b"; Berners_Lee_icon};
    Berners_Lee_icon [label="", shape=box, style=invis, shapefile="Berners_Lee.png"];

    /* Relationships */
    Computers_icon -> Semantic_Web_icon;
    Semantic_Web_icon -> Computers_icon;
    Cryptography_icon -> Semantic_Web_icon;
    Cryptography_icon -> Computers_icon;
    Automata_icon -> Computers_icon;
    AI_icon -> Automata_icon;
    Automata_icon -> AI_icon;
    Chaos_icon -> Computers_icon;
    Chaos_icon -> AI_icon;
    AI_icon -> Chaos_icon;
    Computers_icon -> Chaos_icon;
    XML_icon -> Semantic_Web_icon;
    XML_icon -> Computers_icon;
    Computers_icon -> XML_icon;
    Ontology_icon -> Semantic_Web_icon;
    Biology_icon -> AI_icon;
    Biology_icon -> Chaos_icon;
    Chaos_icon -> Biology_icon;
    Chaos_icon -> Semantic_Web_icon;
    Agents_icon -> Semantic_Web_icon;
    Semantic_Web_icon -> Agents_icon;
    Agents_icon -> AI_icon;
    AI_icon -> Agents_icon;
    Small_World_icon -> Chaos_icon;
    Small_World_icon -> Agents_icon;
    Small_World_icon -> Biology_icon;
    Biology_icon -> Small_World_icon;
    Social_Networks_icon -> Small_World_icon;
    Social_Networks_icon -> Biology_icon;
    Search_Engines_icon -> Semantic_Web_icon;
    Computers_icon -> Search_Engines_icon;
    Turing_icon -> Cryptography_icon;
    Turing_icon -> Computers_icon;
    Turing_icon -> Automata_icon;
    Rejewski_icon -> Turing_icon;
    Rejewski_icon -> Cryptography_icon;
    Dertouzos_icon -> Computers_icon;
    Dertouzos_icon -> Berners_Lee_icon;
    Berners_Lee_icon -> Semantic_Web_icon;


    { rank=same; Rejewski_icon; Turing_icon; Dertouzos_icon; Berners_Lee_icon };
    { rank=same; Biology_icon; AI_icon; Social_Networks_icon };

}

I run dot -Tpng -ofrom-past-to-future.png from-past-to-future.dot with warnings

C:\dot>dot -Tpng -ofrom-past-to-future.png from-past-to-future.dot
Warning: AI_icon was already in a rankset, deleted from cluster G
Warning: Biology_icon was already in a rankset, deleted from cluster G
Warning: Social_Networks_icon was already in a rankset, deleted from cluster G
Warning: Turing_icon was already in a rankset, deleted from cluster G
Warning: Rejewski_icon was already in a rankset, deleted from cluster G
Warning: Dertouzos_icon was already in a rankset, deleted from cluster G
Warning: Berners_Lee_icon was already in a rankset, deleted from cluster G

I tried to modify the dot file but could not get the same png image as the original post. How to approach it?

Solution

  • Here's a modified script which works with current versions of graphviz. Please note that you'll need to have all the images in the same directory as the script.

    Changes I made:

    • Cleaned up redundant attribute declarations (label="", labelloc, etc.)
    • Used the image attribute instead of the old shapefile
    • Removed shape=box and style=invis from the nodes
    • Added penwidth=0 to get rid of the cluster border
    • Put the graph label at the bottom (should always be at the bottom)
    • Commented out the rank constraints. The same nodes cannot be part of different subgraphs.

    This will not reproduce exactly the same graph, of course. Recreating the rank constraints will need some more creativity, mainly because each node is packed into its own cluster in order to attach a label to it... very hacky. You may try the same without clusters, but with the new xlabel attribute.

    I added a second version, in which I uncommented the rank=same subgraphs and placed them before the definition of the clusters. Graphviz will then create an output, but without any labels for those nodes.

    Here's the script:

    digraph G {
    compound=true;
    ranksep=1.25;

    node [shape=plaintext, fontsize=16, label=""];

    bgcolor=white;
    edge [arrowsize=1, color=black];
    graph[penwidth=0, labelloc="b"];

    /* Nodes */
    //{ rank=same; Rejewski_icon; Turing_icon; Dertouzos_icon; Berners_Lee_icon };
    //{ rank=same; Biology_icon; AI_icon; Social_Networks_icon };

    subgraph cluster_Computers {label="Computers"; Computers_icon[image="Computers.png"];};
    subgraph cluster_Semantic_Web {label="Semantic Web"; Semantic_Web_icon[image="Semantic_Web.png"];};
    subgraph cluster_Cryptography {label="Cryptography"; Cryptography_icon[image="Cryptography.png"];};
    subgraph cluster_Automata {label="Automata"; Automata_icon[image="Automata.png"];};
    subgraph cluster_AI {label="A.I."; AI_icon[image="AI.png"];};
    subgraph cluster_Chaos {label="Chaos / Fractals"; Chaos_icon[image="Chaos.png"];};
    subgraph cluster_XML {label="XML / RDF / URI"; XML_icon[image="XML.png"];};
    subgraph cluster_Ontology {label="Ontology / Clustering"; Ontology_icon[image="Ontology.png"];};
    subgraph cluster_Biology {label="Biology / Neurons"; Biology_icon[image="Biology.png"];};
    subgraph cluster_Agents {label="Agents / Security"; Agents_icon[image="Agents.png"];};
    subgraph cluster_Small_World {label="The Small World Project"; Small_World_icon[image="Small_World.png"];};
    subgraph cluster_Social_Networks {label="Social Networks"; Social_Networks_icon[image="Social_Networks.png"];};
    subgraph cluster_Search_Engines {label="Search Engines"; Search_Engines_icon[image="Search_Engines.png"];};
    subgraph cluster_Turing {label="A. Turing"; Turing_icon[image="Turing.png"];};
    subgraph cluster_Rejewski {label="M. Rejewski"; Rejewski_icon[image="Rejewski.png"];};
    subgraph cluster_Dertouzos {label="M. Dertouzos"; Dertouzos_icon[image="Dertouzos.png"];};
    subgraph cluster_Berners_Lee {label="T. Berners-Lee"; Berners_Lee_icon[image="Berners_Lee.png"];};


    /* Relationships */
    Agents_icon -> {AI_icon Semantic_Web_icon};
    AI_icon -> {Agents_icon Automata_icon Chaos_icon};
    Automata_icon -> {AI_icon Computers_icon};
    Berners_Lee_icon -> Semantic_Web_icon;
    Biology_icon -> {AI_icon Chaos_icon Small_World_icon};
    Chaos_icon -> {AI_icon Biology_icon Computers_icon Semantic_Web_icon};
    Computers_icon -> {Chaos_icon Search_Engines_icon Semantic_Web_icon XML_icon};
    Cryptography_icon -> {Computers_icon Semantic_Web_icon};
    Dertouzos_icon -> {Berners_Lee_icon Computers_icon};
    Ontology_icon -> Semantic_Web_icon;
    Rejewski_icon -> {Cryptography_icon Turing_icon};
    Search_Engines_icon -> Semantic_Web_icon;
    Semantic_Web_icon -> {Agents_icon Computers_icon};
    Small_World_icon -> {Agents_icon Biology_icon Chaos_icon};
    Social_Networks_icon -> {Biology_icon Small_World_icon};
    Turing_icon -> {Automata_icon Computers_icon Cryptography_icon};
    XML_icon -> {Computers_icon Semantic_Web_icon};

    fontsize=28;
    label="From Past to Future...";
}

    And that's what it looks like:

    graphviz output

    Second variant, with rank=same subgraphs uncommented:

    graphviz output