Graphviz DOT, UML, and VIM

Prerequisites

• Graphviz
• WM Graphviz Vim Plugin (Optional)
• Grip Github Markdown Previewer (Optional)

Add UML Diagrams to your Github README with Graphviz

Install the prereqs.

If you would rather use some other editor, you can always compile from the command line with dot -Tpng uml.dot -o uml.png.

Create a file, uml.dot and add the following code.

digraph G {
  {Book, Patron} -> Library
}

Compile the dot.

If you're using WM Graphviz for vim, I needed to add a set maplocalleader="-" in my init.rc to use the shortcuts. Also, it will compile to pdf by default, so you'll have to set g:WMGraphviz_output="png".

You should see something like this:

Create a file, README.md and add the following text.

# Library UML


<*>![some description](uml.png)

* Ghost has some funny parsing which is different from Github. Remove the <*> from the line above. I just put that in there so Ghost would render it correctly.

Run grip in the folder. Visit the address that grip prints to console. Probably http://localhost:6419/.

You should see the markdown with your graph, which is exactly how it will show up in a Github README.

Postscript

This blog is hosted on Ghost, which uses Markdown for its posts. So I wrote this post exactly as described above. Cool.