Skip to content

Instantly share code, notes, and snippets.

@caseywatts caseywatts/0 README.md
Last active Feb 22, 2019

Embed
What would you like to do?
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.

graphviz-it

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.

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.
// 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]
}
#!/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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.