- #MERMAID SEQUENCE DIAGRAM HOW TO#
- #MERMAID SEQUENCE DIAGRAM UPDATE#
- #MERMAID SEQUENCE DIAGRAM SOFTWARE#
- #MERMAID SEQUENCE DIAGRAM CODE#
With PlantUML, you need to also check in the images to source control and these could easily become out of date. Having markdown auto render the images in source control systems like Azure DevOps or GitHub is HUGE! This guarantees the diagrams will always be up to date with their definitions. The big elephant in the room is the rendering. In terms of customisation, PlantUML has been around far longer and supports advanced diagram customisation. PlantUML works as you would expect and has support for more advanced setup like sprites. This shows as you have little control over the way the diagram is rendered, and some parts are unreadable (i.e., arrows over nodes). Winner: Mermaidįor C4 Models, Mermaid support is still experimental. Not sure why PlantUML needs to have a line in the middle of each node. Winner: Mermaidįor State diagrams, syntax is also similar, but Mermaid renders the images slightly better. Winner: Drawįor ER diagrams, again syntax is similar, but Mermaid renders the images slightly better. Winner: Mermaid.įor Sequence diagrams, both syntax is similar, and the rendered image is also similar. In terms of setup, Mermaid is the simplest as you don't need to set up any external applications or servers. Overall, both tools do an excellent job, although in some cases one will shine over the other.
There are a few out there, but this is the best one:
#MERMAID SEQUENCE DIAGRAM CODE#
Note: This article assumes VS Code is your editor of choiceįirst up, you'll need the PlantUML extension. So, which one is best? Let's take a look! Setup Mermaid is a JavaScript based engine and is the new kid on the block.
PlantUML is a Java based engine has been around for a long time and is battle tested. Two popular choices for this are PlantUML and Mermaid. The added advantage is you can source control your diagrams and audit changes overtime. In this way you describe the diagram with code and the tooling takes care of the visual rendering. These generic tools do allow a lot of flexibility but end up costing you more time than you intended to align all boxes and arrows and to get the colour schemes just right.Īn approach gaining in popularity is to use tooling that allows 'diagrams-as-code'.
#MERMAID SEQUENCE DIAGRAM SOFTWARE#
There are many generic diagramming tools that can be used to design software such as (formerly draw.io), Miro, or Lucid Charts. A software implementation on the other hand, is not. I hope this article could bring to you something useful that can help you in your amazing projects.Before jumping into any complex software development, it's often a good idea to spend some time designing the system or feature you will be working on. You can check out the complete JS code here. ConsumeMessageClass P0 -> P1 : 03:16 : 56.059 SimpleMessage P1 -> P0 : 03:16 : 56.06 NULLĪnd this is the rendered sequence diagram: SendMessage participant P1 as diashenrique. initialize (įinally, with simple JS functions you can transform this JSON in a mermaid sequence diagram specification, like this: sequenceDiagramĪutonumber participant P0 as diashenrique. SequenceDiagram Alice -> John : Hello John, how are you? loop Healthcheck John -> John : Fight against hypochondria end Note right of John : Rational thoughts! John -> Alice : Great! John -> Bob : How about you? mermaid. There are a lot of configurations that you can play on it.Īs you can see, in the diagram definition you just need to specify the actors/participants and what events/messages they send each other.Īnd all that you need to have the diagram in your web page, are a div container with the diagram specification and, a JS code which initializes the mermaid engine and renders the diagram. Such a example was retrieved from mermaid documentation, and you can try it in this online editor. This definition lets mermaid engine to render the following diagram, directly in a web page using SVG: It’s super intuitive, so guess it’s better to show you an example instead of writing a lot of boring text: sequenceDiagramĪlice -> John : Hello John, how are you? loop Healthcheck John -> John : Fight against hypochondria end Note right of John : Rational thoughts! John -> Alice : Great! John -> Bob : How about you? Mermaid uses a Markdown-inspired syntax to define diagrams. I’ll focus just on the sequence diagram, but be aware that such a library lets you do much more.
#MERMAID SEQUENCE DIAGRAM HOW TO#
And what I’d like to share with you in this article, is how to use this library. In order to get all the hard geometry calculations needed to draw such a diagram done, we used the amazing mermaid JS open source library. You could get more information on the previous article. In such an update, we tried to give users a visualization based on a UML sequence diagram.
#MERMAID SEQUENCE DIAGRAM UPDATE#
Me and Dias proposed a new way to visualize messages in IRIS Interoperability in a recent update of MessageViewer.
0 kommentar(er)
