The Graphviz DOT language is used to create graphical representations of nodes and edges, allowing for the definition of nodes, edges, clusters, and edge routing. The language provides various attributes for styling and appearance, including font, color, and style, to customize the look of the graph, as demonstrated in an example graph representing an Angular 2 application architecture.

Cell 4

%%
dot

digraph
apply
{
    label = 'Angular 2 Architecture'
    rankdir = TB;
    fontname = Helvetica
    node[fontname = Helvetica, width = 1.8, height = 0.8]
    edge[fontname = Helvetica, fontsize = 12, fontcolor = blue, labeldistance = 1.8]

    subgraph
    cluster_browser
    {
        label = 'Web Browser'

        socket[shape = 'box', label = 'SocketJS'];
        xhr[shape = 'box', label = 'XHR'];

        subgraph
        cluster_angular_component
        {
            label = 'Angular Components'

            core[shape = 'box', label = 'Core'];
            router[shape = 'box', label = 'Router'];
            rxjs[shape = 'box', label = 'RxJs'];

            cli[shape = 'box', label = 'CLI'];
            less[shape = 'box', label = 'Less/SASS'];
            material[shape = 'box', label = 'Material'];

            {
                rank = same
                core
                router
                rxjs
            }
        ->
            {
                rank = same
                cli
                less
                material
            }
            [style = invis]
        }

        edge[style = 'invisible', dir = 'none'];
        router -> material -> socket -> xhr;
    }

    subgraph
    cluster_angular_tools
    {
        label = 'Developer Tools'
        rank = same;

        teamcity[shape = 'box', label = 'TeamCity'];
        lint[shape = 'box', label = 'Lint'];
        webpack[shape = 'box', label = 'Webpack'];

        edge[style = 'invisible', dir = 'none'];
        teamcity -> lint -> webpack
    }

    webpack -> socket [minlen = 3]

    subgraph
    cluster_aws
    {
        label = 'AWS'

        subgraph
        cluster_vm
        {
            label = 'Hyper-V / Docker'
            windows[shape = 'box', label = 'Windows'];

            subgraph
            cluster_server
            {
                label = 'Server Stack'

                csharp[shape = 'box', label = 'C#'];
                swagger[shape = 'box', label = 'Swagger'];
                identity[shape = 'box', label = 'Identity\nServer 3'];

                subgraph
                cluster_server_tools
                {
                    label = 'Developer Tools'
                    blueprint[shape = 'box', label = 'Blueprint'];
                    msbuild[shape = 'box', label = 'MSBuild'];
                }

                edge[style = 'invisible', dir = 'none'];
                csharp -> swagger -> identity
            }

            xhr -> identity [minlen = 3]
        }
    }
}

digraph Angular2Architecture {
    label = 'Angular 2 Architecture';
    rankdir = TB;
    fontname = Helvetica;
    node[fontname = Helvetica, width = 1.8, height = 0.8];
    edge[fontname = Helvetica, fontsize = 12, fontcolor = blue, labeldistance = 1.8];

    # Web Browser
    subgraph cluster_browser {
        label = 'Web Browser';
        socket[shape = 'box', label = 'SocketJS'];
        xhr[shape = 'box', label = 'XHR'];
        cli[shape = 'box', label = 'CLI'];
        less[shape = 'box', label = 'Less/SASS'];
        material[shape = 'box', label = 'Material'];

        # Angular Components
        subgraph cluster_angular_component {
            label = 'Angular Components';
            core[shape = 'box', label = 'Core'];
            router[shape = 'box', label = 'Router'];
            rxjs[shape = 'box', label = 'RxJs'];

            {
                rank = same
                core
                router
                rxjs
            }
        ->
            {
                rank = same
                cli
                less
                material
            }
            [style = invis]
        }

        # Connections between components
        edge[style = invisible, dir = none];
        router -> material -> socket -> xhr;
    }

    # Developer Tools
    subgraph cluster_angular_tools {
        label = 'Developer Tools';
        rank = same;
        teamcity[shape = 'box', label = 'TeamCity'];
        lint[shape = 'box', label = 'Lint'];
        webpack[shape = 'box', label = 'Webpack'];

        # Connections between tools
        edge[style = invisible, dir = none];
        teamcity -> lint -> webpack;
    }

    # Connections between web browser and tools
    webpack -> socket [minlen = 3];

    # AWS
    subgraph cluster_aws {
        label = 'AWS';
        subgraph cluster_vm {
            label = 'Hyper-V / Docker';
            windows[shape = 'box', label = 'Windows'];

            subgraph cluster_server {
                label = 'Server Stack';
                csharp[shape = 'box', label = 'C#'];
                swagger[shape = 'box', label = 'Swagger'];
                identity[shape = 'box', label = 'Identity\nServer 3'];

                subgraph cluster_server_tools {
                    label = 'Developer Tools';
                    blueprint[shape = 'box', label = 'Blueprint'];
                    msbuild[shape = 'box', label = 'MSBuild'];
                }

                # Connections between server tools
                edge[style = invisible, dir = none];
                csharp -> swagger -> identity;
            }

            # Connections between server and tools
            xhr -> identity [minlen = 3];
        }
    }
}

Graphviz DOT Language Breakdown

This code is written in the Graphviz DOT language, used to create graphical representations of nodes and edges.

Code Structure

• The code starts with a digraph statement, defining a directed graph.
• The graph has several subgraphs, each representing a cluster of nodes and edges.
• Each subgraph is defined using the subgraph statement, and is given a label using the label attribute.

Node and Edge Definition

• Nodes are defined using the node statement, and can have shape, label, and other attributes.
• Edges are defined using the edge statement, and can have attributes such as label, color, and style.
• Edges can also be labeled using the label attribute.

Clusters

• Clusters are used to group nodes and edges together.
• Clusters are defined using the subgraph statement, and can have a label using the label attribute.
• Clusters can be used to create hierarchical structures.

Edge Routing

• Edge routing is used to specify the flow of edges between nodes.
• The rank attribute is used to specify the rank of nodes in a cluster.
• The dir attribute is used to specify the direction of an edge.

Style and Appearance

• The fontname, fontsize, and fontcolor attributes are used to specify the style and appearance of nodes and edges.
• The style attribute is used to specify the style of edges (e.g. invisible, solid, etc.).

Example Graph

This code generates a graph representing the architecture of an Angular 2 application, with clusters for the web browser, Angular components, developer tools, and AWS.