UML Diagrams with Graphviz

I worked on creating some plausible-looking diagrams for representing object inheritance (this is for my forthcoming book). Since I know I’ll forget how I did it, I wanted to share while I can remember!


digraph Couriers {
fontname = "Bitstream Vera Sans"
fontsize = 8

node [
fontname = "Bitstream Vera Sans"
fontsize = 8
shape = "record"
]

edge [
arrowtail = "empty"
]

Courier [
label = "{Courier|+ name : string\l+ home_country : string\l|+ calculateShipping() : float\l+ ship(): boolean\l}"
]

Monotype [
label = "{MonotypeDelivery|\l|+ ship(): boolean\l}"
]

Pigeon [
label = "{PigeonPost|\l|+ ship(): boolean\l}"
]

Courier -> Pigeon [dir=back]
Courier -> Monotype [dir=back]
}

And the resulting diagram:
UML diagram

Working out the arrow styles and that I then needed to style the tail rather than the head was a puzzle. Beyond that, the record shape with lines worked well enough for this example, and I was pleased with the result. I find graphviz gives a very “clean” output – not pretty, perhaps, but easier on the eye than anything I could draw myself!

5 thoughts on “UML Diagrams with Graphviz

  1. Hello,

    I’m very interested about creating class diagrams using graphviz, but I wonder how you can create complex class with it? I mean when you have lots of methods and variables, how do you escape the label property so it does not take 300 columns in your editor?

    • Honestly I would probably have the class details somewhere else like a config file, and then generate the dot source for the graphviz picture. It’s not particularly human-friendly.

    • I simply formatted it with newlines and it worked for me:
      [code]
      MyIdea [
      label=”{
      MyIdea|
      +description:String\l
      +status:int\l
      +date:Date\l
      }”
      ]
      [/code]

Leave a Reply

Please use [code] and [/code] around any source code you wish to share.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Find out more about Webmentions.)