Flow charts in code: enter graphviz and the “dot” language

If you’re like me, you like gui’s as long as they don’t push you in a direction other than your train of thought. Whenever the tool tends to distract you from the task you are performing, you get annoyed. Stuff like “why am I searching for such an over-obvious functionality”, or “why didn’t they think of making the clickable area a bit bigger”, or simply “aaaarggghhh, it crashed on me again”.

I like typing code. It says what it is. I even considered writing graphs such as flow charts or database models in SVG once, but that’s a bridge too far. What is pretty helpful though, is graphviz, and the “dot” language.

In essence, DOT1 is a declarative language in which you express nodes and their relations in a graph. You can label the nodes and their edges (links between nodes) and you have an array of styling and shaping tools at hand. I have never more quickly drawn a flow chart for some documenting work than with this tool. So I decided I’d use it for my database model too, and behold, it helped me focusing on just the content and logic in stead of any other crap.

I’ll focus just on the flow chart here, but I hope it’ll get you enthusiastic to apply it to other types of graphs.

Installing graphviz

Graphviz is oooold. It should be available in your distro’s package repository, or you can download binaries from the graphviz website.

The tools

Graphviz comes with a set of layout engines which have different command line tools. I have only used dot so far, tried a bit of fdp and neato, but as long as I do not really understand how they differ, I can’t really tell you anything about them.

So, you’ll only need dot for now.

How to get started

There are two basic structures you can use, a graph and a digraph which stand for a graph and a directed graph respectively. The difference is that a directed graph always has edges with a “value”, i.e., you’d speak of a “parent”-“child” type of relationship. A regular graph is just nodes that are somehow connected, but there is no direction or value to their relationship. For example, synonyms are synonyms either way.

In practice, most of the graphs or charts you’ll do are directed graphs. For now it suffices to say that a directed graph connects nodes by arrows (->) and regular graphs by a line (--).

My first graph

digraph {
    A -> B;
}

Using the dot utility, you can render the graph as an image or many other output formats:

dot -Tpng -o graph.png graph.dot


We declare a relationship between the parent and the child. By declaring the relationship, we also declare the nodes. So if we’d output this graph, we’d see the relationship.

We can continue declaring relationships and nodes like this, in this declarative form:

digraph {
    A -> B -> C -> D;
    C -> E -> F;
    F -> B;
}

As you can see, it is pretty darn easy. There is absolutely no way you could have done this faster, and have the advantages of easily editing the graph structure, be able to version control it, insert comments, etc.


How to start writing a flow chart

Flow charts are a typically good example for using graphviz. You’ll usually only need a few different shapes, layout of the resulting graph isn’t overly important, and specifying relationships between the different nodes really is all you need.

digraph {
    label="How to make sure 'input' is valid"
 
    start[shape="box", style=rounded];
    end[shape="box", style=rounded];
    if_valid[shape="diamond", style=""];
    message[shape="parallelogram", style=""]
    input[shape="parallelogram", style=""]
 
    start -> input;
    input -> if_valid;
    if_valid -> message[label="no"];
    if_valid -> end[label="yes"];
    message -> input;
}


Since all node mentioning is declarative, you can easily put labels in a different section than the structure of your graph:

digraph {
    label="How to make sure 'input' is valid"
 
    start[shape="box", style=rounded];
    end[shape="box", style=rounded];
    if_valid[shape="diamond", style=""];
    message[shape="parallelogram", style=""]
    input[shape="parallelogram", style=""]
 
    start -> input;
    input -> if_valid;
    if_valid -> message[label="no"];
    if_valid -> end[label="yes"];
    message -> input;
 
    if_valid[label="Is input\nvalid?"]
    message[label="Show\nmessage"]
    input[label="Prompt\nfor input"]
}


Moreover, you can use the node keyword to declare attributes for sets of nodes:

digraph {
    label="How to make sure 'input' is valid";
 
    node[shape="box", style="rounded"]
       start; end;
    node[shape="parallelogram", style=""]
       message; input;
    node[shape="diamond", style=""]
       if_valid;
 
    start -> input;
    input -> if_valid;
    if_valid -> message[label="no"];
    if_valid -> end[label="yes"];
    message -> input;     
 
    if_valid[label="Is input\nvalid?"]
    message[label="Show\nmessage"]
    input[label="Prompt\nfor input"]
}


This can add so much productivity to drawing graphs that it is silly not to use it. If you’re not happy about the layout, you can use ranking of nodes to make sure nodes are ranked equally so they are put next to each other:

digraph {
    label="How to make sure 'input' is valid";
 
    node[shape="box", style="rounded"]
       start; end;
    node[shape="parallelogram", style=""]
       message; input;
    node[shape="diamond", style=""]
       if_valid;
 
    start -> input;
    input -> if_valid;
    if_valid -> message[label="no"];
    if_valid -> end[label="yes"];
    message -> input;     
 
    {rank=same; message input}
}


But if I’m honest, you shouldn’t bother too much. If you want the layout more presentable, you should just output any of the vector-based output formats and tweak it yourself with any drawing program out there, or even better: output SVG and an XSL transformation to do that for you ;). The essence of it all is that you are productive in documenting something, not in making beautifully laid out graphs. Be focused on that rather than having people “ooh” and “aah” your handywork.

Summarizing

Keep focus on the structure and decisions in your chart, in stead of how stuff should be placed and how it is laid out. You should be worrying about the concept behind the chart in stead of the chart it self. What better way just to be concerning yourself with the nodes, their relations and their type?

The key is that you are documenting domain logic, which is expressed in a logical sense rather than some graphical visualization. You have many possibilities here: for example, generate these charts from static code analysis, generate model relationships from your domain model, class diagrams, etc, etc. I’d say the possibilities are endless, but that seems tautologic.

Have fun, and let me know if you have any tips regarding graphviz or the DOT language!


  1. Don’t worry, you don’t need to be able to read the BNF syntax description. There’s more docs out there. 

This entry was posted in Development, Linux & BSD and tagged , , . Bookmark the permalink. Trackbacks are closed, but you can post a comment.

36 Comments

  1. Marlin Forbes
    Posted July 20, 2016 at 06:36 | Permalink

    This package is especially useful for mapping out state changes and event flows in a workflow system. Instead of having a separate .dot file with your graphic defined in it, use a PHP package like this https://github.com/graphp/graphviz to generate a graphic from the runtime state of your application. You could also use PHP to generate the .dot file based on internal application state. Then you don’t have to worry about keeping the .dot file up-to-date, it’s live. 🙂

  2. Tom Newton
    Posted September 30, 2016 at 11:10 | Permalink

    Thanks – really useful primer.

  3. Mayank Jain
    Posted October 6, 2016 at 13:34 | Permalink

    Exactly what I was looking for.. Thanks!

  4. Chris Dowey
    Posted January 4, 2017 at 18:14 | Permalink

    Very useful overview, thanks!

  5. Jay
    Posted January 10, 2017 at 07:26 | Permalink

    Great intro, thanks!

  6. James
    Posted September 28, 2018 at 20:58 | Permalink

    This is the first graphviz walk-through I’ve found that’s been helpful to really understanding what’s going on. Thanks!

  7. Posted December 6, 2018 at 23:58 | Permalink

    My developer is trying to persuade me to move to .net from PHP. I have always disliked the idea because of the costs. But he’s tryiong none the less. I’ve been using Movable-type on numerous websites for about a year and am concerned about switching to another platform. I have heard good things about blogengine.net. Is there a way I can import all my wordpress posts into it? Any help would be really appreciated!

  8. suc khoe va sac dep
    Posted June 9, 2020 at 10:28 | Permalink

    You have done an impressive job and our entire community

  9. Posted June 16, 2020 at 21:51 | Permalink

    Alternative Links to Official Online Gambling Internet sites Now in an all-sophisticated era, everyone can access the internet very easily. Up to now many online games that can be performed by everyone, one example is online gambling games. With the appointment of betting that used to be only on land, now an online system has made it super easy for many wagering players to route their hobbies in the world of online gambling.

  10. singing lessons
    Posted June 29, 2020 at 13:06 | Permalink

    I will not speak about your competence, the write-up simply disgusting

  11. Rolet online
    Posted June 29, 2020 at 13:28 | Permalink

    Thanks again for the blog article.Really thank you! Really Cool.

  12. Posted July 4, 2020 at 10:48 | Permalink

    If some one needs to be updated with newest technologies afterward he must be pay a quick visit this site and be up to date everyday.

  13. for more info
    Posted July 6, 2020 at 14:25 | Permalink

    Major thankies for the article.Thanks Again. Will read on click here

  14. Download Mp3
    Posted July 6, 2020 at 14:52 | Permalink

    ugg australia ????????????classic tall bomber a boot women

  15. Buy pfizer genotropi
    Posted July 16, 2020 at 11:55 | Permalink

    the primary way to maximize SEO for a web site.

  16. Fake humatrope
    Posted July 16, 2020 at 12:47 | Permalink

    I think this is a real great blog article.Thanks Again. Keep writing.

  17. Posted July 21, 2020 at 21:56 | Permalink

    Very efficiently written post. It will be supportive to everyone who utilizes it, including myself. Keep up the good work – for sure i will check out more posts.

    my webpage – [parts industry](https://vimeo.com/user118136333 “parts industry”)

  18. Posted September 16, 2020 at 18:10 | Permalink

    Great items from you, man. I’ve remember your stuff prior to and you are simply too excellent. I actually like what you’ve received here, certainly like what you’re saying and the way in which in which you are saying it. You are making it entertaining and you still care for to stay it sensible. I cant wait to read much more from you. That is actually a wonderful web site.

  19. Sim Card Cloning
    Posted September 21, 2020 at 19:16 | Permalink

    Muchos Gracias for your post.Much thanks again. Will read on

  20. safety razors for me
    Posted September 21, 2020 at 19:41 | Permalink

    Thanks so much for the blog article.Thanks Again. Keep writing.

  21. Posted September 27, 2020 at 01:28 | Permalink

    partner to the final Mabosway sports betting swing by registering – Are you looking for an looking for excitement and further experience in the world of online gambling? You have come to the right place, because here you can colleague us, the best and most trusted gambling site agent in Indonesia!

    We are privileged to be able to offer the best servants to members who are always loyal to trust us and make us a gambling partner. Therefore, we have prepared various types of fun and popular games such as Mabosway sports betting, casino, lottery, and others.

    Not lonely that, there are after that many promos that we will meet the expense of and of course it is all aimed at the gain of the members. every the services that are up to standard for you behind you become a devotee here. Here are some of our advantages beyond further sites:

    The bump and dissolution process is quick and accurate Members’ personal data and identities are always secure and will not leak to new parties Mabosway login, one addict ID that can be used for various types of games Customer staff who are always ready to encourage you 24/7 Unlimited Bonuses and Promos The best encourage supported by years of experience has made Mabosway always trusted by its members and earned the title as the best gambling site agent in Indonesia.

  22. Posted October 5, 2020 at 16:18 | Permalink

    Enjoy the Best Movie regarding All Time What video do you want to be able to watch today? Sniper videos may be required on your list.

    This is usually the most exciting shooting battle, where every sniper action is always interesting to watch.

  23. Pallets Sydney
    Posted October 5, 2020 at 19:09 | Permalink

    I will make sure to bookmark it and return to read more of your useful information.

  24. best hemp oil on ama
    Posted October 9, 2020 at 22:36 | Permalink

    Its hard to find good help I am constantnly saying that its difficult to get good help, but here is

  25. NYU travel study
    Posted October 12, 2020 at 17:11 | Permalink

    This very blog is definitely cool and besides factual. I have picked many interesting things out of this source. I ad love to visit it every once in a while. Thanks a lot!

  26. Dstv renewal online
    Posted October 28, 2020 at 18:11 | Permalink

    wow, awesome article.Thanks Again. Will read on

  27. Recharge gotv subscr
    Posted October 28, 2020 at 18:38 | Permalink

    visit the website What is a good free blogging website that I can respond to blogs and others will respond to me?

  28. boost immune system
    Posted October 30, 2020 at 12:34 | Permalink

    Looking forward to reading more. Great article post.Really looking forward to read more. Fantastic.

  29. tesla solar subscrip
    Posted November 2, 2020 at 15:53 | Permalink

    Thanks-a-mundo for the blog article.Much thanks again. Great.

  30. sage bundle kit
    Posted November 2, 2020 at 16:15 | Permalink

    Wow, that as what I was seeking for, what a stuff! present here at this blog, thanks admin of this site.

  31. IELTS Preparation in
    Posted November 9, 2020 at 15:56 | Permalink

    in life. I ?ant to encourage you to continue your great

  32. google keyword finde
    Posted November 9, 2020 at 16:19 | Permalink

    this this web site conations in fact pleasant funny data

  33. Blog o finansach
    Posted November 16, 2020 at 16:21 | Permalink

    I wished to compose you one particular extremely little remark to finally say thanks when far more over the

  34. Question Paper 2021
    Posted November 16, 2020 at 17:16 | Permalink

    Thanks for sharing, this is a fantastic blog article.Really thank you! Awesome.

  35. Previous Paper 2021
    Posted November 16, 2020 at 17:44 | Permalink

    Thanks a lot for the blog.Much thanks again. Much obliged.

  36. Posted November 20, 2020 at 00:06 | Permalink

    I blog frequently aand I ?eally thank ?ou f?r your content. ?hi? article haas r?ally peaked my ?nterest. ?’m g?ing to t?ke a note of yo?r website and keep checking for ne? details a?out once a we?k. I subscribed t? you? RSS feed t??.

    Alsoo visit m? blog post :: [toto taipei](https://angkataipei.com/ “toto taipei”)

Post a Comment

Your email is never published nor shared.

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>