Generate Graphviz Files for Project

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.