A brief introduction on how to draw diagrams with mermaid library
Tags: tutorial, javascript, fronted, beginners
Published: 2022-06-27 22:09:11

Hello everyone!

Me and @Henrique.GonçalvesDias proposed a new way to visualize messages in IRIS Interoperability in a recent update of [MessageViewer](https://openexchange.intersystems.com/package/IRIS-Interoperability-Message-Viewer?tab=details). In such an update, we tried to give users a visualization based on a UML sequence diagram. You could get more information on the [previous](https://community.intersystems.com/post/visual-trace-and-freedom-choice) article.

In order to get all the hard geometry calculations needed to draw such a diagram done, we used the amazing [mermaid](https://github.com/mermaid-js/mermaid) JS open source library. And what I’d like to share with you in this article, is how to use this library. I’ll focus just on the sequence diagram, but be aware that such a library lets you do much [more](https://mermaid-js.github.io/mermaid/#/).

Mermaid uses a Markdown-inspired syntax to define diagrams. It’s super intuitive, so guess it’s better to show you an example instead of writing a lot of boring text:

<pre style="line-height: 1.38; margin-top: 16px; margin-bottom: 16px;"><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#9650c8"><span style="font-weight:700"><span style="font-style:normal"><span style="text-decoration:none">sequenceDiagram
</span></span></span></span><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">Alice</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#008800"><span style="font-weight:700"><span style="font-style:normal"><span style="text-decoration:none">->></span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">John</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#dcdcdc"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">:</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> Hello John, how are you?</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#9650c8"><span style="font-weight:700"><span style="font-style:normal"><span style="text-decoration:none">loop</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">Healthcheck</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">    </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">John</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#008800"><span style="font-weight:700"><span style="font-style:normal"><span style="text-decoration:none">->></span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">John</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#dcdcdc"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">:</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> Fight against hypochondria</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#9650c8"><span style="font-weight:700"><span style="font-style:normal"><span style="text-decoration:none">end</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#569cd6"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">Note</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">right</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">of</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">John</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#dcdcdc"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">:</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> Rational thoughts!</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">John</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#008800"><span style="font-weight:700"><span style="font-style:normal"><span style="text-decoration:none">-->></span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">Alice</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#dcdcdc"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">:</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> Great!</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">John</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#008800"><span style="font-weight:700"><span style="font-style:normal"><span style="text-decoration:none">->></span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">Bob</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#dcdcdc"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">:</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> How about you?</span></span></span></span></span></span></pre>

This definition lets mermaid engine to render the following diagram, directly in a web page using SVG:

<p style="line-height:1.38; margin-top:16px; margin-bottom:16px">
  <span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:Arial"><span style="color:#303757"><span style="background-color:#ffffff"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"><span style="border:none"><span style="display:inline-block"><span style="overflow:hidden"><span style="width:624px"><span style="height:509px"><img src="https://lh6.googleusercontent.com/PKlIujZbuCLagIaToHYqA0KqnrTOXGbODx2dSn0gwnAtfbpSnhp4NVXNF55hETS5QSaSAsn50QSso0G8CVSrGFdCVsmzhONhSGqONQaFO4H9BgrnRP0Gn91HMIKY-QdYUdETQpv7=s1600" /></span></span></span></span></span></span></span></span></span></span></span></span>
</p>

Such a example was retrieved from mermaid documentation, and you can try it in this [online editor](https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0). There are [a lot of configurations](https://mermaid-js.github.io/mermaid/#/sequenceDiagram) that you can play on it.

As you can see, in the diagram definition you just need to specify the actors/participants and what events/messages they send each other.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2i6obmeicfi26tvi2ppt.png)

And 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. 

<pre style="line-height: 1.38; margin-top: 16px; margin-bottom: 16px;"><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#808080"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">&amp;lt;</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#569cd6"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">div</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#9cdcfe"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">class</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">=</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">"mermaid"</span></span></span></span><span style="color:#808080"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">>
</span></span></span></span><span style="color:#9650c8"><span style="font-weight:700"><span style="font-style:normal"><span style="text-decoration:none">sequenceDiagram</span></span></span></span>
<span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">Alice</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#008800"><span style="font-weight:700"><span style="font-style:normal"><span style="text-decoration:none">->></span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">John</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#dcdcdc"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">:</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> Hello John, how are you?</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#9650c8"><span style="font-weight:700"><span style="font-style:normal"><span style="text-decoration:none">loop</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">Healthcheck</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">    </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">John</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#008800"><span style="font-weight:700"><span style="font-style:normal"><span style="text-decoration:none">->></span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">John</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#dcdcdc"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">:</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> Fight against hypochondria</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#9650c8"><span style="font-weight:700"><span style="font-style:normal"><span style="text-decoration:none">end</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#569cd6"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">Note</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">right</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">of</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">John</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#dcdcdc"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">:</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> Rational thoughts!</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">John</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#008800"><span style="font-weight:700"><span style="font-style:normal"><span style="text-decoration:none">-->></span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">Alice</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#dcdcdc"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">:</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> Great!</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">John</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#008800"><span style="font-weight:700"><span style="font-style:normal"><span style="text-decoration:none">->></span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">Bob</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#dcdcdc"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">:</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> How about you?</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#808080"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">&amp;lt;/</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#569cd6"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">div</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#808080"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">></span></span></span></span></span></span></pre>

<pre style="line-height: 1.38; margin-top: 16px; margin-bottom: 16px;"><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#9cdcfe"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">mermaid</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">.</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#dcdcaa"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">initialize</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">({
</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">    </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#9cdcfe"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">startOnLoad:</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#569cd6"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">true</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">,</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">    </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#9cdcfe"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">theme:</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">'forest'</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">});</span></span></span></span></span></span></pre>

You can find this example in this [fiddle](https://jsfiddle.net/jrpereirajr/71Lm2nsx/).

This is the frontend base of the proposed work. For the backend, all we have to do is setting up a REST endpoint which retrieves messages from an IRIS interoperability session, format it in a suitable JSON object and send it back to the frontend. As the focus of this article is the frontend code, I won’t pay attention on backend implementation, but you can check it out in [dispatch](https://github.com/diashenrique/iris-message-viewer/blob/2bfab2c687f2fe53cd3ddda160ad76c139715486/src/cls/diashenrique/messageviewer/REST/Dispatch.cls#L11) and [service](https://github.com/diashenrique/iris-message-viewer/blob/master/src/cls/diashenrique/messageviewer/REST/Diagram.cls) classes.

The backend sends back a JSON like this:

<pre style="line-height: 1.38; margin-top: 16px; margin-bottom: 16px;"><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">{
    </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#9cdcfe"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">"participants"</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">:[</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">        </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">"diashenrique.messageviewer.Service.SendMessage"</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">,</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">        </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">"diashenrique.messageviewer.Operation.ConsumeMessageClass"</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">    ],</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">    </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#9cdcfe"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">"messages"</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">:[</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">        {</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">            </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#9cdcfe"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">"id"</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">:</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">"1182"</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">,</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">            </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#9cdcfe"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">"from"</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">:</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">"diashenrique.messageviewer.Service.SendMessage"</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">,</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">            </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#9cdcfe"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">"to"</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">:</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">"diashenrique.messageviewer.Operation.ConsumeMessageClass"</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">,</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">            </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#9cdcfe"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">"message"</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">:</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">"2021-10-05 03:16:56.059 SimpleMessage"</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">        },</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">        {</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">            </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#9cdcfe"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">"id"</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">:</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">"1183"</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">,</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">            </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#9cdcfe"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">"from"</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">:</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">"diashenrique.messageviewer.Operation.ConsumeMessageClass"</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">,</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">            </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#9cdcfe"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">"to"</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">:</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">"diashenrique.messageviewer.Service.SendMessage"</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">,</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">            </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#9cdcfe"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">"message"</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">:</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">"2021-10-05 03:16:56.06 NULL"</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">        }</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">    ]</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">}</span></span></span></span></span></span></pre>

Finally, with simple JS functions you can transform this JSON in a mermaid sequence diagram specification, like this:

<pre style="line-height: 1.38; margin-top: 16px; margin-bottom: 16px;"><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#9650c8"><span style="font-weight:700"><span style="font-style:normal"><span style="text-decoration:none">sequenceDiagram
</span></span></span></span><span style="color:#569cd6"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">autonumber</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#569cd6"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">participant</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">P0</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#569cd6"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">as</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">diashenrique</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">.</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">messageviewer</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">.</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">Service</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">.</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">SendMessage</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#569cd6"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">participant</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">P1</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#569cd6"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">as</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"> </span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">diashenrique</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">.</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">messageviewer</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">.</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">Operation</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">.</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">ConsumeMessageClass</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">P0</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#008800"><span style="font-weight:700"><span style="font-style:normal"><span style="text-decoration:none">->></span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">P1</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">: 2021-10-05 03:16</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#dcdcdc"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">:</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">56.059 SimpleMessage</span></span></span></span></span></span>
<span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">P1</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#008800"><span style="font-weight:700"><span style="font-style:normal"><span style="text-decoration:none">->></span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#74b0df"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">P0</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#d4d4d4"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">: 2021-10-05 03:16</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#dcdcdc"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">:</span></span></span></span></span></span><span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:'Courier New'"><span style="color:#ce9178"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">56.06 NULL</span></span></span></span></span></span></pre>

<p style="line-height:1.38; margin-top:16px; margin-bottom:16px">
  <span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:Arial"><span style="color:#303757"><span style="background-color:#ffffff"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none">And this is the rendered sequence diagram:</span></span></span></span></span></span></span>
</p>

<p style="line-height:1.38; margin-top:16px; margin-bottom:16px">
  <span style="font-size:10.5pt; font-variant:normal; white-space:pre-wrap"><span style="font-family:Arial"><span style="color:#303757"><span style="background-color:#ffffff"><span style="font-weight:400"><span style="font-style:normal"><span style="text-decoration:none"><span style="border:none"><span style="display:inline-block"><span style="overflow:hidden"><span style="width:572px"><span style="height:182px"><img src="https://lh5.googleusercontent.com/KZ-0j_UVdJPzYTcPO68kiQNvT4N6VeQbUaIEQLvA2mUYGRAB3q7fy5nsqeV0zNVmSmJkO6b8C6JsFb0DhEOpjJVdJsuuSxKj3uQpld2NUEGO4m51rn8oDnjJF_gfNPTpIBr05au_=s1600" /></span></span></span></span></span></span></span></span></span></span></span></span>
</p>

You can check out the complete JS code [here](https://github.com/diashenrique/iris-message-viewer/blob/master/src/csp/resources/js/diagram.js).

So, that is it. I hope this article could bring to you something useful that can help you in your amazing projects.

See you!