Generate Graphviz Files for Project

0 README.md

short url: caseywatts.com/graphviz

Graphviz is like markdown, for diagrams.

It's a tool that can transform text input into a "directed graph" output, which is nodes pointing to other nodes. You can use it for architecture diagrams, DB diagrams, documentation for users, etc.

You'll want to use a tool with a two-pane layout - the left side is the source text, the right side is the image output.

• For just you working on it, use http://graphviz.it (shown above; it has more features)
• For realtime collaboration, use http://graphvizrepl.com

Tutorial

Check out this graphviz tutorial Casey wrote here.

Keeping Track of These Diagrams (git)

You can keep track of these in your github repo, and even check in the images there.

Local CLI Setup

Install graphviz, which installs the dot command line tool: brew install graphviz

Single-file example: dot -Tpng sourcefile.dot -o outputfile.png

Or, you can do all .dot files in a folder with the bash script below.

Try the bash script

• git clone https://gist.github.com/caseywatts/be69bf941fa1f8e264bd07de698366a0 caseywatts-graphviz
• cd caseywatts-graphviz
• modify the example.dot file (change some text, or put in your own .dot file)
• ./generate_all_graphviz.sh
• success! ✨

Set up your own repo

• For a project, put your .dot files in some folder like /graphviz-diagrams.
• Put generate_all_graphviz.sh in that folder.
• Whenever you change the source .dot files, run it graphviz-diagrams/generate_all_graphviz.sh.

example.dot

// source http://graphviz.it/#/QNbvKoTB

digraph G {
///// start Heroku styles
    // rankdir=LR
    graph [fontname = "helvetica"];
    node [fontname = "helvetica"];
    edge [fontname = "helvetica"];
    node [
      color=purple3,
      style=filled,
      fillcolor=purple4,
      fontcolor=white
    ]
    edge [
      color=indigo,
      fontcolor=black
    ]
    graph [
      labeljust="c",
      color="grey87"
      fontcolor="purple4"
    ]
///// end Heroku styles


    subgraph cluster2 {
      label="Private Space B"
      "App B"
    }
    subgraph cluster1 {
      label="Private Space A"
      "App A"
      "Postgres Instance\n(Private or Shield Plan)"
    }
    subgraph cluster3 {
      label="Common Runtime"
      "App C"
    }

    "App A" -> "Postgres Instance\n(Private or Shield Plan)" [color=chartreuse3]
    "App B" -> "Postgres Instance\n(Private or Shield Plan)" [color=red, style=dashed]
    "App C" -> "Postgres Instance\n(Private or Shield Plan)" [color=red, style=dashed]
}

example.png

generate_all_graphviz.sh

#!/usr/bin/env sh

# this will generate a .png from each .dot file in a directory
# install graphviz before this script will work, eg `brew install graphviz`

# for every file
# that ends in .dot
# in the same folder where this shell script lives
for FILENAME in $(dirname "${BASH_SOURCE[0]}")/*.dot
do
  # convert .dot to .png
  # and trim off the '.dot' part in the output (don't name the output .dot.png)
  dot -Tpng $FILENAME -o ${FILENAME%.*}.png
done

graphviz-it.png