Skip to content

Instantly share code, notes, and snippets.

Last active February 25, 2022 17:46
What would you like to do?
Generate Graphviz Files for Project

short url:

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.


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 -o outputfile.png

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

Try the bash script

  • git clone caseywatts-graphviz
  • cd caseywatts-graphviz
  • modify the file (change some text, or put in your own .dot file)
  • ./
  • success!

Set up your own repo

  • For a project, put your .dot files in some folder like /graphviz-diagrams.
  • Put in that folder.
  • Whenever you change the source .dot files, run it graphviz-diagrams/
// source
digraph G {
///// start Heroku styles
// rankdir=LR
graph [fontname = "helvetica"];
node [fontname = "helvetica"];
edge [fontname = "helvetica"];
node [
edge [
graph [
///// 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]
#!/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
# 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment