UML sequence diagrams are the first highly detailed behavioural diagrams that you will create when using UML for software development. They aren’t so often used in business process modelling, especially because they refer to the actual data and operation names that will be used when programming. In order to generate a diagram, choose a class that will be your starting point. As you can see in my example above, I wanted to see the code sequence that starts with the BookController class. 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. To generate a sequence diagram just right-click on the method of the code and in the context menu there is an option 'Generate Sequence diagram' as you see in the image. Generate Sequence Diagram Window Once clicked on the menu the above dialog is displayed that asks the use to provide input for generating a sequence diagram. Sequence Diagrams in Ballerina. In Ballerina, there is a bidirectional mapping between the textual representation of code in Ballerina syntax and the visual representation as a sequence diagram. In Ballerina services, the entry point is the service resource function. The actor who invokes the service resource is shown as the “caller”.
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.
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.
Tool | Diagram Language | License | Local | Online |
---|---|---|---|---|
Graphviz | DOT | Eclipse Public License 1.0 | ✅ | ✅ |
PlantUML | Text | GPL-3.0 | ✅ | ✅ |
Mermaid | Text | MIT License | ✅ | ✅ |
Ditaa | ASCII | LGPL-3.0 | ✅ | ❌ |
WSD | Text | ❌ | ❌ | ✅ |
code2flow | Text | ❌ | ❌ | ✅ |
Structurizr | Java, .NET | ❌ | ❌ | ✅ |
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.
Mirror image digital clock. 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. Trendy digital clock.
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.
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
Sequence Diagram As Code
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.
![Sequence diagram as codes Sequence diagram as codes](/uploads/1/3/7/6/137622760/861221124.jpeg)
Mermaid is not a particular UML tool but rather a more general purpose diagramtool and supports the following diagrams:
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.
graph TDA[Christmas] -->|Get money| B(Go shopping)B --> C{Let me think}C -->|One| D[Laptop]C -->|Two| E[iPhone]C -->|Three| F[fa:fa-car Car]
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! ?
Discuss on Hacker NewsSequence Diagram Loop
Notation Description | Visual Representation |
---|---|
Actor
Note that:
| |
Lifeline
| |
Activations
| |
Call Message
| |
Return Message
| |
Self Message
| |
Recursive Message
| |
Create Message
| |
Destroy Message
| |
Duration Message
| |
Note A note (comment) gives the ability to attach various remarks to elements. A comment carries no semantic force, but may contain information that is useful to a modeler. |