Mermaid.js를 사용한 멋진 다이어그램

오늘 저는 최근에 발견한 멋진 라이브러리를 공유하고 싶습니다. 올바른 도구를 사용하지 않는 경우 복잡한 소프트웨어에 대한 다이어그램을 만드는 것은 시간이 많이 걸리고 까다로울 수 있습니다. 가장 최근의 구조를 보여주기 위해 다이어그램을 유지하는 것은 어려울 수 있습니다. 가장 일반적인 이동 중 하나는 diagram.net입니다.


이 웹 애플리케이션을 통해 사용자는 페이지에 요소를 끌어다 놓고 이름을 변경하여 다양한 그래프를 만들 수 있습니다. 내 경험상 이 응용 프로그램은 만드는 데 오랜 시간이 걸리는 정말 아름다운 그래프를 만들 수 있습니다.



내 검색은 거기에서 수행되지 않았습니다. 여러 번 요소를 찾고 크기를 조정하고 이름을 바꾸는 것보다 다이어그램 생성, 버전 제어 및 더 쉬운 인터페이스에 속도를 도입하는 것을 목표로 합니다. 이것은 내가 찾은 곳입니다 Mermaid



이 라이브러리는 Javascript로 작성되었으며 구문과 같은 마크다운을 사용하여 다이어그램을 생성할 수 있습니다. Mermaid는 다음 다이어그램을 만들 수 있습니다.

순서도

시퀀스 다이어그램

클래스 다이어그램

상태 다이어그램

엔티티 관계 다이어그램

사용자 여정

간트

파이 차트

요구 사항 다이어그램

Mermaid.js 사용의 이점 중 일부는 다음과 같습니다.

그래프를 코드로 생성

그래프 스타일 지정 시간 절약

그래프 제어 버전

diagram.net과 같은 다른 라이브러리와 쉽게 통합

시작하려면 VSCode에 "Markdown Preview Mermaid 지원"확장을 설치할 수 있습니다.



그런 다음 원하는 코드베이스에 다이어그램 디렉터리를 만듭니다(선택 사항). 마지막으로 “app_diagram.md”와 같은 마크다운 파일을 생성합니다. 편집기의 너무 오른쪽 모서리에 있는 작은(측면에 미리 보기 열기) 아이콘을 선택하거나(mac의 경우 shift + command + v)를 선택합니다. 이제 파일을 편집할 준비가 되었습니다. 몇 가지 쉬운 예부터 시작하겠습니다.

다음은 mermaid를 사용하는 순서도를 보여줍니다.

    graph TD;
            A-->B;
            A-->C;
            B-->D;
            C-->D;

인어 코드는 "인어"태그가 있는 코드 스니펫으로 입력해야 합니다. 각 문자는 가장자리를 통해 연결된 노드를 나타냅니다.

the mermaid website에 다이어그램 생성에 대한 많은 샘플이 있습니다. 순서도를 만드는 동안 저에게 효과가 있었던 설정을 보여드리겠습니다.

<!-- ```mermaid
flowchart Guide
    direction TB
    f[flow]
    s[[Step]]
    i([input])
    d[(Database)]
    Parameters>Parameters]
``` -->
<!-- Resource: https://mermaid-js.github.io/mermaid/#/ -->
<!-- Look at the graph here: https://mermaid.live -->
<!-- Connect to diagrams.net: https://www.diagrams.net/blog/mermaid-diagrams -->

```mermaid
flowchart LR
    subgraph Guide
        direction TB

        f[flow]
        s[[Step]]
        d[(Database)]
        Parameters>Parameters]
    end

    %% add in-line style
    Guide:::someclass
    classDef someclass fill:#f96;


    %%list of parameters
    p1>bank_name]
    p2>seller_info]


    %%list of steps
    s1[[1-withdraw_money]]
    s2[[2-purchase_bike]]


    %%list of flows
    f1[go_to_bank]
    f2[withdraw_from_atm]
    f3[contact_seller]
    f4[trade_bike]


    %%list of databases
    d1[(reads: customer_identification)]
    d2[(reads/writes: customer_balance)]
    d3[(writes: e_document_sign)]


    %% Create the step flows
    s1-.->s2;


    %% s1 flow
    p1-->|inputs|s1
    s1-->|calls|f1
    f1-->|calls|f2
    f2-->d1
    f2-->d2


    %% s2 flow
    p2-->|inputs|s2
    s2-->f3
    f3-->f4
    f4-->d3
\```

mermaid.live 과 같이 그래프를 PNG 또는 SVG로 내보낼 수 있는 다른 리소스도 있습니다. 또한 mermaid에서 diagram.net으로 그래프를 전송하는 방법에 대해 체크아웃this blog할 수 있습니다(참고로 digram.net은 모든 mermaid 기능을 지원하지 않습니다).

이 튜토리얼을 즐기셨기를 바랍니다. 의견을 자유롭게 표현하십시오.

문안 인사,

에르판