mermaid 다루기
마크다운을 이용해서 그래프나 차트를 그리는 언어.
- 그림이 그려지는 방향은 다음과 같은 4가지 방식이 있습니다.
TD: Top to Down(orTB)LR: Left to RightBT: Bottom to TopRL: 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;
`