Mermaid

mermaid 다루기

마크다운을 이용해서 그래프나 차트를 그리는 언어.

• 그림이 그려지는 방향은 다음과 같은 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를 만듭니다.

EdgePermalink

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

Example Node and EdgePermalink

• 앞에서 배운 node, edge를 사용해서 다음과 같은 간단한 예제를 만들어 봤습니다.

    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;

SubgraphPermalink

• graph를 구분하여 만들 수도 있습니다.

flowchart LR
    subgraph subG1 
        a1 --> a2;
    end
    subgraph subG2
        b1 ==> b2;
    end
    a1 -.-> b1;