옵시디언 심화: Mermaid

개요

Mermaid는 복잡한 다이어그램과 차트를 간단한 텍스트와 코드를 통해 생성할 수 있게 해주는 도구입니다. 옵시디언에서는 Mermaid를 기본으로 지원하여 마크다운 문서 내에 다이어그램을 삽입하고 시각화할 수 있습니다.

Tutorials | Mermaid

Flow Chart

플로우 차트는 정보의 흐름이나 프로세스를 시각적으로 표현할 수 있는 방법입니다.

그래프 방향

플로우 차트를 시작하기 위해서는 먼저 graph TD (Top Down) 또는 graph LR (Left Right) 같은 방향 지시어로 그래프의 방향을 정의해야 합니다.

• TD (Top to Down) 또는 TB (Top to Bottom): 위에서 아래로
• LR (Left to Right): 왼쪽에서 오른쪽으로
• RL (Right to Left): 오른쪽에서 왼쪽으로
• BT (Bottom to Top): 아래에서 위로

```mermaid
graph TD
    A --> B
```

```mermaid
graph LR
    A --> B
```

노드 생성

플로우 차트의 각 요소는 노드로 표현됩니다.

```mermaid
graph LR
    id
```

 

간단한 텍스트로 이루어진 노드는 다음과 같이 정의할 수 있습니다.

```mermaid
graph TD
A[시작]
B[과정]
C[끝]
```

연결선

노드들을 연결하는 선은 --- -->, -.->를 사용합니다.

graph LR
    A --- B

graph LR
    A --> B

graph LR
    A -.-> B

graph LR
    A -- 텍스트 --> B

graph LR
    A-->|텍스트|B

노드 모양

graph LR
    A("둥근사각")

graph LR
    B(["경기장"])

graph LR
    C[["서브루틴"]]

graph LR
    D[("원통")]

graph LR
    E(("써클"))

graph LR
    F>"비대칭모양"]

graph LR
    G{"마름모"}

graph LR
    H{{"육각형"}}

graph LR
    I[/"평행사변형A"/]

graph LR
    J[\"평행사변형B"\]

graph LR
    K[/"사다리꼴"\]

graph LR
    L[\"역사다리꼴"/]

graph LR
    M((("더블써클")))

예제

옵시디언에서 간단한 프로세스를 플로우 차트로 나타내보겠습니다.

```mermaid
graph TD
    A[시작] --> B[과정 1]
    B --> C[결정점]
    C -->|예| D[과정 2]
    C -->|아니오| E[과정 3]
    D --> F[끝]
    E --> F
```

PIE 차트

PIE 차트를 생성하는 기본 구조는 아래와 같습니다:

```mermaid
pie
    title 제목
    "Category 1": 62.5
    "Category 2": 37.5
```

 

더 복잡한 예시로는 다음과 같이 여러 카테고리와 다양한 비율을 포함할 수 있습니다:

```mermaid
pie
    title 과일
    "사과": 25
    "바나나": 15
    "체리": 30
    "딸기": 20
    "키위": 10
```

 

관련 글

옵시디언에서 Mermaid를 쉽게 사용하는 Mermaid Tools 플러그인

옵시디언 심화: 간트 차트(Gantt Chart)

---