Sequence Diagram As Code

With the recent adoption of Infrastructure as Code we aim to eliminate theimpudent mismatch of documentation (eg. how is it supposed to look like) and howit actually set up by driving all changes from a textual representation.

1. Number Sequences Code
2. Project Sequence Diagram
3. Sequence Diagram Code Online
4. Simple Sequence Diagram
5. Sequence Diagram Java Code Example

A UML sequence diagram shows how a set of objects interact in a process over time. It shows the messages that pass between participants and objects in the system, and the order in which they occur. Newer desktop versions Web 2007–2010. These diagrams are used by software developers and business professionals to understand requirements for a new system or to document an existing process. Sequence diagrams are sometimes known as event diagrams or event scenarios. Note that there are two types of sequence diagrams: UML diagrams and code-based diagrams. When it comes to C, sequence diagrams are defined in the general sense by the UML specification, which is the same for all object oriented languages. UML is considered a higher-level concept from source code that looks the same for all languages, and the process of converting source code to UML is called code reverse engineering.

While JSON, YAML and HCL does a good job of representing out intent to acomputer it is not easily consumable for humans - unless you live and breath forthese types of configuration languages 🧙‍♂️

A diagram does a much better job of conveying information and relationships tous mortal humans but they struggle to keep up with the never ending changes asthey are often hand drawn and a snapshot somewhere in time. Who knows where themaster file for that one Visio diagram is, right?!

What if we could generate our diagrams in the same way as we generate ourinfrastructure?

This post aims to give an overview of the current state of diagram tools thatsupport some kind of Diagram as Code functionality. Lets dig in! 😄

Overview

Bellow is a table over the most popular tools with support for Diagram as Code.We have included some popular proprietary tools in the list but will leave it asan exercise to the reader to explore those as this post will focus on those thatare free and open source.

Graphviz (Live Demo)

Rock solid, and bindings for just about every language!

While JSON, YAML and HCL does a good job of representing out intent to acomputer it is not easily consumable for humans - unless you live and breath forthese types of configuration languages 🧙‍♂️

A diagram does a much better job of conveying information and relationships tous mortal humans but they struggle to keep up with the never ending changes asthey are often hand drawn and a snapshot somewhere in time. Who knows where themaster file for that one Visio diagram is, right?!

What if we could generate our diagrams in the same way as we generate ourinfrastructure?

This post aims to give an overview of the current state of diagram tools thatsupport some kind of Diagram as Code functionality. Lets dig in! 😄

Overview

Bellow is a table over the most popular tools with support for Diagram as Code.We have included some popular proprietary tools in the list but will leave it asan exercise to the reader to explore those as this post will focus on those thatare free and open source.

Graphviz (Live Demo)

Rock solid, and bindings for just about every language!

Graphviz is an open source graph visualization software written in C. It hasseveral main layout programs. It also has web and interactive graphicalinterfaces, and auxiliary tools, libraries, and a rich set of language bindings.The main project itself is not investing in graphical user interface editors,but leaving that up to the community to incorporate Graphviz. This results inGraphviz often being perceived as a little more low-level compared with theothers.

The Graphviz layout programs take descriptions of graphs in a simple textlanguage named DOT, and make diagrams in useful formats, such as images and SVGfor web pages; PDF or Postscript for inclusion in other documents; or display in an interactive graph browser.

Graphviz has many useful features for concrete diagrams, such as options forcolors, fonts, tabular node layouts, line styles, hyperlinks, and custom shapes.

In practice, graphs are usually generated from an external data sources, butthey can also be created and edited manually, either as raw text files or withina graphical editor. (Graphviz was not intended to be a Visio replacement, so itis probably frustrating to try to use it that way.)

Example diagram

PlantUML (Live Demo)

PlantUML is, imho, the most efficient and maintainable way to produce UMLdiagram.

PlantUML is another trued and true tool used written in Java to draw primarilyUML diagrams, using a simple and human readable text description. Be careful,because it does not prevent you from drawing inconsistent diagrams (such ashaving two classes inheriting from each other, for example). So it's more adrawing tool than a modeling tool.

PlantUML has its own simple, but powerful, domain specific language (DSL) thatallows for a lot of different types of UML diagrams:

• Sequence diagrams
• Usecase diagrams
• Class diagrams
• Activity diagrams
• Component diagrams
• State diagrams
• Object diagrams
• Deployment diagrams
• Timing diagrams

Also, it supports some non-UML diagrams which are pretty cool, for example theWireframe diagrams for UI design. Fun fact some of the diagrams in PlantUML isactually powered by Graphviz. Mac install xquartz brew.

PlantUML is also supported in GitLabmarkdownand there is an integration for VSCode,Atom,MediaWiki, GoogleDocsas well as Microsoft Word to mention a few and thisgreatly expends its usefulness!

PlantUML is primarily an UML drawing tool, and maybe the best there is. However,it is starting to show it's age along with the JVM, it's lack of modern diagramstyling and web integrations.

Example Diagram

Mermaid (Live Editor)

Mermaid lets you easily do is generate sequence diagrams from code such astest-cases, because the format is so simple and line-driven ✨

Mermaid is a diagram tool built for the web-era with native JavaScript supportjust include the js file and start rendering diagrams real time. It does notsupport as many diagrams as it's competitors (yet) but it is completelythemeable and has a rich and powerful syntax.

Mermaid is not a particular UML tool but rather a more general purpose diagramtool and supports the following diagrams:

Number Sequences Code

Comparing with Visio and similar applications, mermaid is a really fast way tocreate good visualizations. This is especially apparent when editing a complexvisualization, this could take hours in traditional tool but takes minutes (oreven less if generation has been scripted) with mermaid.

Mermaid also has support for Graphviz's dot graph notation which makes it supereasy to reusing existing diagrams and it is fully integrated withhttps://docs.gitlab.com/ee/user/markdown.html! It has a VSCode,Atom, GoogleChrome,Confluenceextensions and the typora.io markdown editor comes withfull Mermaid diagram support out of the box.

Memaid's strongest suite is it's simplicity and modern look and feel. Forfrontend developers this would be like any other JavaScript library. It'sstrongest suite is also it's disadvantage requiringPhantomJS (and thus 500 MB of compiled Chromium) inorder to render diagrams from the command line.

Example Diagram

Mermaid syntax guide.

Project Sequence Diagram

Sequence Diagram Code Online

NB! The above diagram is rendered live using the latest version of Mermaidinkluded in this blogpost - just take a look at the source code.

Closing Remarks

While some of these tools mentioned in this post is quit mature at this point weare not happy with the current state of integrating them with other tools in theIaC ecosystem. Our wish for 2020 is that some of these integrations will happen!

Simple Sequence Diagram

Happy diagramming! 😄

Sequence Diagram Java Code Example