Using Graphviz DOT for UML

Graphviz DOT, UML, and VIM


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

Create a file, 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:

link to img

Create a file, 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.


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