¡Hola a todos! En una reciente actualización de [MessageViewer](https://openexchange.intersystems.com/package/IRIS-Interoperability-Message-Viewer?tab=details) @Henrique.GonçalvesDias y yo propusimos una nueva manera de visualizar mensajes en IRIS Interoperability. En esa actualización, intentamos dar a los usuarios una visualización basada en un diagrama de secuencia UML. Tenéis más information en el [artículo anterior](https://community.intersystems.com/post/visual-trace-and-freedom-choice). Para conseguir los complicados cálculos geométricos necesarios para realizar ese diagrama, usamos [mermaid](https://github.com/mermaid-js/mermaid), una extraordinaria librería JavaScript _open source_. Y lo que me gustaría compartir con vosotros en este artículo es cómo utilizar esa librería. Me centraré solo en el diagrama de secuencia, pero estad seguros de que la librería permite hacer [mucho más](https://mermaid-js.github.io/mermaid/#/). Mermaid utiliza una sintaxis inspirada en Markdown para definir los diagramas. Es super intuitivo, por eso es mejor mostraros un ejemplo en lugar de escribir un montón de texto aburrido:
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?
Esta definición permite al motor de mermaid representar el siguiente diagrama, directamente en una página web usando SVG:

Ese ejemplo fue extraído de la documentación de mermaid, y podéis probarlo en este [editor online](https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0). Hay [muchas configuraciones](https://mermaid-js.github.io/mermaid/#/sequenceDiagram) que podéis aprovechar. Como podéis ver, en la definición del diagrama solo necesitáis especificar los actores/participantes y qué eventos/mensajes se envían unos a otros.

Y todo lo que necesitáis para tener el diagrama en vuestra página web es un contenedor div con la especificación del diagrama y un código JavaScript que inicia el motor de mermaid y representa el diagrama. 
<div class="mermaid">
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?
</div>
mermaid.initialize({
    startOnLoad: true,
    theme: 'forest'
});
Podéis encontrar el ejemplo en este [enlace](https://jsfiddle.net/jrpereirajr/71Lm2nsx/). Este es el _frontend_ base del trabajo propuesto. Para el _backend_, todo lo que tenemos que hacer es configurar un _endpoint_ REST que recupera mensajes desde una sesión de interoperabilidad de IRIS, los formatea en un objeto JSON adecuado y lo devuelve al _frontend_. Como el objetivo de este artículo es el código  _frontend_, no prestaré atención a la implementación en el _backend_, pero podéis comprobarla en las clases [dispatch](https://github.com/diashenrique/iris-message-viewer/blob/2bfab2c687f2fe53cd3ddda160ad76c139715486/src/cls/diashenrique/messageviewer/REST/Dispatch.cls#L11) y [service](https://github.com/diashenrique/iris-message-viewer/blob/master/src/cls/diashenrique/messageviewer/REST/Diagram.cls). El _backend_ devuelve un JSON como este:
{
    "participants":[
        "diashenrique.messageviewer.Service.SendMessage",
        "diashenrique.messageviewer.Operation.ConsumeMessageClass"
    ],
    "messages":[
        {
            "id":"1182",
            "from":"diashenrique.messageviewer.Service.SendMessage",
            "to":"diashenrique.messageviewer.Operation.ConsumeMessageClass",
            "message":"2021-10-05 03:16:56.059 SimpleMessage"
        },
        {
            "id":"1183",
            "from":"diashenrique.messageviewer.Operation.ConsumeMessageClass",
            "to":"diashenrique.messageviewer.Service.SendMessage",
            "message":"2021-10-05 03:16:56.06 NULL"
        }
    ]
}
Finalmente, con unas funciones JavaScript sencillas se puede transformar este JSON en una especificación de diagrama de secuencia de mermaid como este:
sequenceDiagram
autonumber
participant P0 as diashenrique.messageviewer.Service.SendMessage
participant P1 as diashenrique.messageviewer.Operation.ConsumeMessageClass
P0->>P1: 2021-10-05 03:16:56.059 SimpleMessage
P1->>P0: 2021-10-05 03:16:56.06 NULL

Y este es el diagrama de secuencia representado:

Podéis comprobar el código JavaScript completo [aquí](https://github.com/diashenrique/iris-message-viewer/blob/master/src/csp/resources/js/diagram.js). ¡Y eso es todo! Espero que este artículo os pueda resultar útil en vuestros increíbles proyectos. ¡Gracias!