Planning Your Web Site With GraphViz

Graphviz is an open source program for making site map diagrams. It runs on Linux, Windows, and Mac OS X. The sitemap charts can be generated in many formats: png, jpg, gif, svg, ps, Dia (an opensource program similar to Visio), and others. After installing Graphviz and going through this tutorial, type man dot to get more information on what Graphviz can do.

Graphviz files can be created in a text editor, with a (Python|Perl|PHP|Ruby) script, and/or with a TAB-delimited file created with a spreadsheet program like OpenOffice or Excel.

Creating Graphs From Dot Files

Once you have a .dot file (see below on how to create them), you can turn it into a graph in .png format with the following line in the terminal:

dot -Tpng InputFile.dot -o OutputFile.png

To create a Dia diagram, use this:

dot -Tdia InputFile.dot -o OutputFile.dia

PostScript format:

dot -Tps InputFile.dot -o OutputFile.ps

SVG format:

dot -Tsvg InputFile.dot -o OutputFile.svg

GraphViz is fairly intuitive once you learn the basics, and the documentation can be called up in the terminal by typing man dot.

Creating GraphViz .dot Files Manually

The most basic way of creating graphs and flowcharts with Graphviz is with a text editor. Start by creating a new file called mysite.dot (or download the sample code here). The comments explain some of the basics. Click on the image below to see what the output of the sample code looks like. Then try modifying the sample code to make it do what you want.

Sitemap chart in GraphViz

digraph "Example.com" {

    // Set the defaults for the nodes and edges between nodes
    node [ shape=box, color=gray, fontname="Sans", fontsize=10 ]
    edge [color=gray, arrowhead=open, weight=2 ]

    // Create the home page node
    home        [ label="Home", fillcolor="#efefef", style=filled ]

    /* Create the first level of pages under the home page.
    The main page of the "Dogs" section is called "dogs"
    and subpages are d1, d2, d3, etc. */
    dogs        [ label="Dogs", fillcolor="#eeeeee", style=filled ]
    d1          [ label="Bulldogs" ]
    d2          [ label="Chihuahuas" ]
    d3          [ label="Yorkshire Terriers" ]
    d4          [ label="Great Danes" ]
    d5          [ label="Labrador Retrievers" ]

    // Connect the "dogs" page to its subcategories
    dogs -> d1
    dogs -> d2
    dogs -> d3
    dogs -> d4
    dogs -> d5 

    // Put some pages in the Chihuahua section
    chi1        [ label="Chihuahua Colors" ]
    chi2        [ label="Chihuahua Photos" ]
    chi3        [ label="Chihuahua History" ]

    // Connect the Chihuahua pages to the Chihuahua category
    edge [ color=gray, arrowhead=none ]
    d2 -> chi1          // d2 is the Chihuahua category page
    chi1 -> chi2
    chi2 -> chi3

    // Create the dog care section
    care        [ label="Dog Care", fillcolor="#eeeeee", style=filled ]
    c1          [ label="Getting Rid of Fleas" ]
    c2          [ label="How to Brush Your Dog" ]
    c3          [ label="How to Clip Dog Nails" ]

    // Connect dog care pages to the dog care category
    edge [ color=gray, arrowhead=none ]
    care -> c1
    c1 -> c2
    c2 -> c3

    // Create the products category pages
    products    [ label="Products", fillcolor="#eeeeee", style=filled ]
    p1          [ label="Dog Brushes" ]
    p2          [ label="Dog Shampoo" ]
    p3          [ label="Chew Toys" ]

    // Connect the products pages to the product category
    edge [ color=gray, arrowhead=none ]
    products -> p1
    p1 -> p2
    p2 -> p3

    // Connect the home page to the first level category pages
    edge [ color=gray, arrowhead=open, weight=2 ]
    home -> dogs
    home -> care
    home -> products 

}

GraphViz Sitemap Generator and Python Script

I found an interesting script called GraphViz Sitemap Generator that creates a sitemap graph from an uploaded tab-delimited file. There is more information about how to prepare your input file here.

I modified the PHP source code that I found there into a quick Python script that takes a tab delimited file (e.g., created in OpenOffice or Excel) and makes a sitemap diagram like this:

Sitemap diagram - GraphViz and Python script

Check out the original TSV input file. There are three columns. The first column is a unique ID number for each row. The second column is the parent item. In this case Scripts is a page with an ID of 1. So all subpages of Scripts have the number 1 in their parent item column. The third column is the label for the page.

To use this script, create a TSV file in OpenOffice or Excel. In OpenOffice, save as a CSV file and change the filter to {tab} instead of a comma. Name the file sitemap.tsv. The run the Python script in the same directory as the TSV file like this:

./create_dot_file.py

Then run GraphViz on the dot file like this:

dot -Tpng sitemap.dot -o sitemap.png

The original GraphViz Sitemap Generator has some more features that I will add to this Python version soon.

More GraphViz Resources

AttachmentSize
graphviz_example.dot2.09 KB
sitemap.tsv.txt174 bytes
create_dot_file.py.txt1.19 KB
Average: 4.5 (2 votes)