Flowchart

Mermaid로 플로우차트를 그려보자

Nodes and Edges

노드와 노드 사이의 간선은 -->로 표현할 수 있다.

Code

---
title: Nodes and Edges
---
flowchart LR
    Start --> Stop

Node Shapes

노드의 모양(shape)을 간단한 문법으로 바꿀 수 있다.

Code

---
title: Node Shapes
---
flowchart LR
    id1[Default]
    id2(Round)
    id3([Stadium])
    id4[[Subroutine]]
    id5[(Cylindrical)]
    id6((Circle))

별의 별 모양이 다 있다. (영단어 공부를 하는 기분이다.)

Code

---
title: Node Shapes
---
flowchart BT
    id7>Asymmetric]
    id8{Rhombus}
    id9[/Parallelogram/]
    id10[\Parallelogram alt\]
    id11[/Trapezoid\]
    id12[\Trapezoid/]
    id13(((Double Circle)))

Links

Code

---
title: Links between Nodes
---
flowchart LR
    A1 --> B1 %% arrow head
    A2 --- B2 %% open link
    A3-- Text on link ---B3
    A3---|Text on link|B3  %% Same as above
    A4-->|Link with arrow head and text|B4
    A4-- Link with arrow head and text -->B4 %% Same as above
    A5-.->B5; %% Dotted Link
    A5-. Dotted link with text .-> B5
    A6 ==> B6 %% Thick link
    A6 == Think link with text ==> B6

Code

---
title: Links between Nodes
---
flowchart LR
    A7 -- text --> B7 -- text2 --> C7 %% chaining
    A8 --> B8 & C8--> D8 %% Multiple node links in the same line

Code

---
title: Links between Nodes
---
flowchart TB
    A9 & B9--> C9 & D9 %% dependencies
    A10 --> C10 %% same as above, but takes 5 lines
    A10 --> D10
    B10 --> C10
    B10 --> D10

Code

---
title: Links between Nodes
---
flowchart LR
    %% New arrow types
    A11 --o B11
    B11 --x C11

    %% Multi directional arrows
    A12 o--o B12
    B12 <--> C12
    C12 x--x D12

노드와 간선의 종류는 대충 알아본 것 같고... 이제 실제로 사용을 해보자.

Examples

Code

flowchart TD
    A[Start] --> B{Is it?}
    B -- Yes --> C[OK]
    C --> D[Rethink]
    D --> B
    B -- No ----> E[End]

-를 몇 개 넣느냐에 따라 최소 길이를 지정할 수 있다.

- 차이에 따라 이렇게 다를 수 있다(- 개수만 다르다):

Code

flowchart TD
    A[Start] --> B{Is it?}
    B --- Yes ----> C[OK]
    C ---> D[Rethink]
    D --> B
    B -- No --> E[End]

Code

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

위처럼 서브그래프를 넣을 수도 있다.

• 패키지 의존성을 표현할 때 쓸모가 있을 것 같다.

Code

flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

위와 같이 이렇게 스타일링도 가능하다.

Code

flowchart LR
    A:::someclass --> B
    classDef someclass fill:#f96

이렇게 CSS처럼 클래스를 주는 것도 가능하다. 🙃

My Thoughts

• 확실히 자유도가 높은 건 알겠다.

• 나는 이 중에서 각종 노드, 엣지 타입이나 스타일링은 그렇게 잘 안할 것 같긴 하다. 그냥 디폴트로 쓸 것 하다. 😅

REF

Flowcharts - Basic Syntax | Mermaid