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
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
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
- modify the
example.dotfile (change some text, or put in your own
Set up your own repo
- For a project, put your
.dotfiles in some folder like
generate_all_graphviz.shin that folder.
- Whenever you change the source
.dotfiles, run it