mermaid 라이브러리로 다이어그램을 그리는 방법에 대한 간략한 소개

여러분, 안녕하세요!

저와 .GonçalvesDias는 MessageViewer의 최근 업데이트에서 IRIS 상호 운용성에서 메시지를 시각화하는 새로운 방법을 제안했습니다. 이러한 업데이트에서는 UML 시퀀스 다이어그램을 기반으로 사용자에게 시각화를 제공하려고 했습니다. previous 문서에서 자세한 정보를 얻을 수 있습니다.

이러한 다이어그램을 그리는 데 필요한 모든 어려운 기하학 계산을 수행하기 위해 우리는 놀라운mermaid JS 오픈 소스 라이브러리를 사용했습니다. 이 기사에서 여러분과 공유하고 싶은 것은 이 라이브러리를 사용하는 방법입니다. 시퀀스 다이어그램에만 초점을 맞추겠지만 이러한 라이브러리를 사용하면 많은 작업을 수행할 수 있습니다more.

Mermaid는 Markdown에서 영감을 받은 구문을 사용하여 다이어그램을 정의합니다. 매우 직관적이므로 지루한 텍스트를 많이 작성하는 대신 예제를 보여주는 것이 좋습니다.

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 엔진은 SVG를 사용하여 웹 페이지에서 직접 다음 다이어그램을 렌더링할 수 있습니다.



이러한 예는 mermaid 문서에서 검색되었으며 이online editor에서 시도할 수 있습니다. a lot of configurations에서 재생할 수 있습니다.

보시다시피 다이어그램 정의에서 액터/참가자 및 이들이 서로 보내는 이벤트/메시지를 지정하기만 하면 됩니다.



웹 페이지에 다이어그램을 표시하는 데 필요한 모든 것은 다이어그램 사양이 포함된 div 컨테이너와 mermaid 엔진을 초기화하고 다이어그램을 렌더링하는 JS 코드입니다.

<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'
});

이 예제는 이 fiddle 에서 찾을 수 있습니다.

이것은 제안된 작업의 프론트엔드 기반입니다. 백엔드의 경우 우리가 해야 할 일은 IRIS 상호 운용성 세션에서 메시지를 검색하고 적합한 JSON 개체로 형식을 지정한 후 다시 프런트엔드로 보내는 REST 끝점을 설정하는 것입니다. 이 기사의 초점은 프론트엔드 코드이므로 백엔드 구현에 대해서는 주의를 기울이지 않겠지만 dispatch 및 service 클래스에서 확인할 수 있습니다.

백엔드는 다음과 같이 JSON을 다시 보냅니다.

{
    "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"
        }
    ]
}

마지막으로 간단한 JS 함수를 사용하여 이 JSON을 인어 시퀀스 다이어그램 사양으로 다음과 같이 변환할 수 있습니다.

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

이것은 렌더링된 시퀀스 다이어그램입니다.



전체 JS 코드here를 확인할 수 있습니다.

그래서 그게 다입니다. 이 기사가 여러분의 놀라운 프로젝트에 도움이 될 수 있는 유용한 정보를 제공할 수 있기를 바랍니다.

또 봐요!