Mermaid - Flow Chart를 그려보자.

1 분 소요

Mermaid - 다양한 diagram을 그려보자

  • 저는 블로그에서 mermaid-js을 CDN을 사용해 include하고, post에서 다음의 방식을 통해 Diagram이 그려지도록 설정한 상황입니다.
  • 본 포스팅에서는 Flow Chart를 그리는 방법을 정리합니다.
<div class="mermaid"> 
    graph LR;
        A --> B;
        A --> C;
        B --> D;
        C --> D;
</div>
graph LR; A --> B; A --> C; B --> D; C --> D;

Mermaid - Flow Chart

Flow Chart Orientation

  • 그림이 그려지는 방향은 다음과 같은 4가지 방식이 있습니다.
    • TD: Top to Down(or TB)
    • LR: Left to Right
    • BT: Bottom to Top
    • RL: Right to Left

Node and Shape

  • nodeID[text]: nodeID를 ID로 가지고 text를 표시해주는 직사각형 node를 만듭니다.
  • nodeID(text): 코너가 둥그런 직사각형 node를 만듭니다.
  • nodeID[(text)]: 원통형 node를 만듭니다. Database로 표시해주기에 좋겠죠.
  • nodeID((text)): 원 모양의 node를 만듭니다.
  • nodeID{text}: 마름모 모양의 node를 만듭니다.

Edge

  • nodeID1 --> nodeID2: nodeID1nodeID2를 화살표로 연결합니다.
  • nodeID1 --- nodeID2: nodeID1nodeID2를 직선으로 연결합니다.
  • nodeID1 ---|Text| nodeID2: nodeID1nodeID2직선으로 텍스트와 함께 연결합니다.
  • nodeID1 -->|Text| nodeID2: nodeID1nodeID2화살표로 텍스트와 함께 연결합니다.
  • nodeID1 -.-> nodeID2: nodeID1nodeID2점선 화살표로 텍스트와 함께 연결합니다.
  • nodeID1 ==> nodeID2: nodeID1nodeID2두꺼운 화살표로 텍스트와 함께 연결합니다.
  • 그리고 화살표 모양을 길게 하면 실제로 길어집니다. 가령 ==>보다 =====>로 하면 훨씬 길게 그려지죠.

Example Node and Edge

  • 앞에서 배운 node, edge를 사용해서 다음과 같은 간단한 예제를 만들어 봤습니다.
<div class="mermaid"> 
    graph LR
        nID1;
        nID2[text of nID1];
        nID3[(Database)];
        nID4((Circle));
        nID5{rhombus};
        nID6(rounded shape);
        nID1 --> nID2;
        nID3 --- nID4;
        nid4 ==> nID3;
        nID3 -->|Text| nID5;
        nID5 -.-> nID6;
</div>
graph LR nID1; nID2[text of nID1]; nID3[(Database)]; nID4((Circle)); nID5{rhombus}; nID6(rounded shape); nID1 --> nID2; nID3 --- nID4; nid4 ==> nID3; nID3 -->|Text| nID5; nID5 -.-> nID6;

Subgraph

  • graph를 구분하여 만들 수도 있습니다.
<div class="mermaid"> 
flowchart LR
    subgraph subG1 
        a1 --> a2;
    end
    subgraph subG2
        b1 ==> b2;
    end
    a1 -.-> b1;
</div>
flowchart LR subgraph subG1 a1 --> a2; end subgraph subG2 b1 ==> b2; end a1 -.-> b1;

Wrap-up

  • 그 외에도 다양한 styling이 있지만 귀찮으니 더 정리하지 않도록 합니다 호호호.

Reference

댓글남기기