[Obsidian] Mermaid 그래프 플로우 차트 그리기

📖 Obsidian Mermaid 매뉴얼

1. 기본 구조

```mermaid
graph 방향
  노드1 --> 노드2
```

• graph 뒤에 방향 지정:
  • TD = Top → Down (위에서 아래로)
  • BT = Bottom → Top (아래에서 위로)
  • LR = Left → Right (왼→오)
  • RL = Right → Left (오→왼)

예시:

```mermaid
graph TD
  A[시작] --> B[다음]
  B --> C[끝]
```

---

2. 노드 문법

• A = 노드 ID (고유 식별자, 영어/숫자 권장)
• 라벨링:
  • A[사각형]
  • A(둥근 사각형)
  • A((원형))
  • A{{다이아몬드}} (조건/결정)
  • A[/평행사변형/] (데이터 입력/출력 느낌)

---

3. 연결선 문법

• 기본 화살표: A --> B
• 양방향: A <--> B
• 점선: A -.-> B
• 굵은선: A ==> B
• 텍스트 라벨 붙이기: A -- "조건문" --> B

예시:

```mermaid
graph LR
  A[로그인 화면] -- 성공 --> B[메인 페이지]
  A -- 실패 --> C[에러 메시지]
```

---

4. 스타일 지정

• 특정 노드 스타일링:
• style 노드ID fill:#색상,stroke:#테두리색,stroke-width:두께
• 예시:

  ```mermaid  
  graph TD  
    A\[중요\] --> B\[보통\]  
    style A fill:#f96,stroke:#333,stroke-width:3px  
  ```  

• 클래스 지정:

  ```
  classDef 강조 fill:#ffcccc,stroke:#ff0000,stroke-width:2px;
  class A 강조
  ```

  ```mermaid  
  graph TD  
    A\[중요\] --> B\[보통\]  
    style A fill:#f96,stroke:#333,stroke-width:3px  
  ```  

---

5. 하위 구조 (서브그래프)

```mermaid
graph TD
  subgraph 클러스터이름
    A --> B
    B --> C
  end
  C --> D
```

---

6. 고급 예시

```mermaid
graph LR
  subgraph Frontend
    A[사용자 입력] --> B(검증)
  end
  subgraph Backend
    B --> C{DB 확인}
    C -- 존재 --> D[로그인 성공]
    C -- 없음 --> E[에러 반환]
  end
  D --> F((완료))
  E --> F
  style F fill:#b3e6ff,stroke:#006699,stroke-width:2px
```

---

👉 정리하면:

1. graph + 방향 지정
2. 노드ID + 모양 지정
3. --> 등으로 연결
4. 필요하면 style, class, subgraph로 꾸미기

---

1. 단순 개념도 (소설 주제 구조)

키워드 관계, 주제 연결 같은 거 표현하기

```mermaid
graph LR
  A[죽음] --> B[기억]
  A --> C[애도]
  B --> D[언어]
  C --> D
  D --> E[몸]

  style A fill:#ffe6e6,stroke:#cc0000,stroke-width:2px
  style E fill:#e6f0ff,stroke:#0047b3,stroke-width:2px
```

• 핵심 키워드(죽음, 몸)는 색상 강조
• 방향은 LR로 가로 배열
• 딱딱한 흐름보단 주제 네트워크 느낌

---

2. 복잡한 데이터 플로우 (과정·서사 흐름)

절차, 시스템, 플롯 전개 등 표현하기

```mermaid
graph TD
  subgraph 현재
    A[인물 등장] --> B(관계 형성)
  end

  subgraph 갈등
    B --> C{사건 발생}
    C -- 선택1 --> D[상실 경험]
    C -- 선택2 --> E[회피]
  end

  subgraph 이후
    D --> F[기억 재구성]
    E --> F
    F --> G((결말))
  end

  style C fill:#fff2cc,stroke:#e69500,stroke-width:2px
  style G fill:#d5e8d4,stroke:#4d7c4d,stroke-width:2px
```

• subgraph로 단계/장 구조 묶기
• 조건({})으로 분기 표현
• 마지막 결말은 원형((( )))으로 종착점 표시