Mac의 Obsidian에서 Mermaid 상태 다이어그램을 간소화하려면 유효한 모든 전환을 명시적으로 유지하고, 레이블을 짧게 줄이며, 읽는 방향을 확인하세요. 결과를 적용하기 전에 출발 상태, 도착 상태, 전환 텍스트를 비교하세요.

이 안내에서는 A부터 D까지 네 개의 합성 상태를 사용합니다. 목표는 직접 전환, 복귀 경로, 시작 및 종료 표시는 보존하면서 다이어그램 하나를 더 쉽게 읽도록 만드는 것입니다. 전환 표를 사용하면 렌더러가 화살표를 배치하는 방식과는 별개로 이러한 보존 여부를 구체적으로 확인할 수 있습니다.

다이어그램을 간소화할 때 무엇을 그대로 유지해야 하나요?

먼저 표현 방식의 변경과 모델의 변경을 구분하세요. 표시 레이블을 줄이고 읽는 방향을 바꾸면 가독성이 좋아질 수 있습니다. 다른 경로를 통해 같은 목적지에 도달할 수 있더라도 화살표를 삭제하면 직접 전환 집합이 달라집니다.

예를 들어 A에서 C로 바로 가는 전환과 B을 거치는 경로가 모두 있다고 가정해 보세요. 직접 전환을 삭제하면 독자는 B을 중간에 거쳐야 한다고 추론해야 합니다. 도달 가능성은 보존되지만 유효한 단일 단계 전환은 사라집니다. 이 작업에서는 같은 목적지에 결국 도달하는 것만으로는 충분하지 않습니다.

다음 전환 목록을 원래 명세로 사용하세요. 레이블은 합성 이벤트 이름이며, 이 예시 안에서 의미가 있으므로 원래 화살표에 그대로 연결되어 있어야 합니다.

출발 상태 도착 상태 전환 텍스트
시작 A 없음
A B step
A C alternate
B C next
B A reset
C B back
C A reset
C D finish
D 종료 없음

시작과 종료를 포함해 전환은 아홉 개입니다. 두 화살표의 레이블은 reset로 같지만, 서로 다른 상태에서 시작합니다. 둘 다 유지하세요. 마찬가지로 B과 C 사이의 화살표는 방향과 레이블이 서로 다르므로 별개의 전환입니다.

더 큰 다이어그램을 편집하기 전에는 각 전환을 출발 상태, 도착 상태, 텍스트의 조합으로 기록하세요. 원본 텍스트에 조건이나 동작이 있다면 그것도 보존하세요. 화살표 총수만 맞춰서는 목적지나 레이블이 바뀐 화살표를 찾아낼 수 없습니다.

설치된 Obsidian이 사용하는 렌더러 확인하기

Mac에서 사이드바의 톱니바퀴를 눌러 설정을 연 다음 일반을 선택하세요. 상단에 표시된 현재 애플리케이션 버전과 설치 프로그램 버전을 기록하세요. 관련 릴리스 노트를 찾을 때는 애플리케이션 버전을 사용하세요. 이 위치는 Obsidian 설정 도움말에 안내되어 있습니다.

렌더러의 경계가 중요합니다. 2026년 10월 22일자 Obsidian 1.15.0 Desktop 얼리 액세스 릴리스는 다이어그램 렌더링을 Pele로 전환하고 Mermaid 12.1.0 구문과 호환된다고 명시합니다. 릴리스 노트에는 이 버전에 Mermaid 라이브러리가 더 이상 포함되지 않는다는 내용도 있습니다. 이는 해당 릴리스에 관한 설명이며, 설치된 모든 Obsidian 버전에서 어떤 렌더러를 사용하는지를 알려 주지는 않습니다. Obsidian 1.15.0 Desktop 릴리스 노트를 참조하세요.

구문 호환성과 시각적 모양은 별도로 확인하세요. 다른 편집기에서 허용된 다이어그램은 유용한 비교 자료지만, 최종 결과는 설치된 애플리케이션에서 확인해야 합니다. 상위 프로젝트의 레이아웃 설정이나 최신 문서의 예제가 로컬 렌더러에서도 똑같이 작동한다고 가정하지 마세요.

아래 예제에서는 렌더러 설정, 테마 설정, 스타일을 의도적으로 사용하지 않습니다. 이미 작동하는 다이어그램이 있다면 기존 다이어그램 선언을 바탕으로 표현 세부 사항을 한 번에 하나씩 변경하세요. 여기서 설명하는 전환 목록 작성과 레이블 편집을 위해 업그레이드할 필요는 없습니다.

명시적 전환이 있는 간결한 버전 만들기

아래의 전체 예제는 목록의 아홉 행을 모두 구현합니다. 표시되는 상태 이름은 의도적으로 짧게 지정했습니다. A 상태가 시작점이고, B와 C에는 복귀 경로가 있으며, D에만 종료 표시로 가는 전환이 있습니다.

Mermaid는 상태 다이어그램 참조에서 상태 별칭, 레이블이 있는 전환, 시작 및 종료 표시, 방향 문을 설명합니다. Obsidian에서 권장하는 삽입 방법은 mermaid 언어 식별자가 있는 펜스 코드 블록이며, 고급 서식 구문에 설명되어 있습니다.

```mermaid
stateDiagram-v2
    direction LR

    state "Stage A" as A
    state "Stage B" as B
    state "Stage C" as C
    state "Stage D" as D

    [*] --> A

    A --> B : step
    A --> C : alternate

    B --> A : reset
    B --> C : next

    C --> A : reset
    C --> B : back
    C --> D : finish

    D --> [*]
```

여는 삼중 백틱 줄과 닫는 삼중 백틱 줄을 포함해 Markdown 예제 전체를 노트에 붙여 넣으세요. 여기 표시된 바깥쪽 네 개의 백틱 펜스는 이 글에서 예제를 보여 주기 위한 것일 뿐, 노트 내용에는 포함되지 않습니다.

정확한 텍스트를 확인하려면 소스 보기를 사용하세요. 렌더링된 결과를 보려면 읽기 보기로 전환하세요. macOS에서는 Cmd+E를 눌러 읽기 보기와 편집 보기를 전환할 수 있습니다. Obsidian은 보기 및 편집 모드에서 이 제어 방법을 설명합니다.

전환 문은 출발 상태별로 묶어 각 상태에서 나가는 선택지를 함께 검토할 수 있게 했습니다. 이 구성은 원본 텍스트를 관리하는 데 도움이 되지만, 렌더러가 각 상태를 어디에 배치할지 보장하는 것은 아닙니다.

평소 사용하는 노트 너비에서 예제를 확인하세요. 그런 다음 direction LR 줄만 삭제하고 결과를 비교하세요. 분기와 복귀 경로를 더 쉽게 따라갈 수 있는 표현을 선택하세요. 왼쪽에서 오른쪽으로 향하는 다이어그램은 가로 공간이 더 많이 필요할 수 있으므로 실제 노트 창에서 결과를 판단하세요.

의미가 유지되는 범위에서만 레이블을 줄이세요. 이 합성 예제에서는 Stage B에 추가 설명이 필요하지 않습니다. 본인의 다이어그램에서는 두 상태를 구분하는 데 필요한 문구를 남겨 두세요. 긴 설명이 필요하다면 인접한 문단에 작성하고 상태 식별자와 명확하게 연결하세요.

어떤 지름길이 모델을 바꿀 수 있나요?

반복되는 화살표를 보면 공통 중간 노드를 만들고 싶을 수 있습니다. 그렇게 하기 전에 그 노드가 무엇을 나타내며 원래 직접 전환이 여전히 존재하는지 확인하세요.

공유 리셋 노드는 직접 경로를 바꿉니다

목록에서 B과 C은 각각 reset에 A로 직접 전환됩니다. 이 화살표를 R이라는 새 상태를 거치는 경로로 바꾸면 중간 상태가 추가되고 원래의 직접 연결은 사라집니다. 독자는 여전히 A에 이르는 경로를 따라갈 수 있지만, 이제 다이어그램은 다른 단계를 나타냅니다.

이 글에서 의도한 결과를 얻으려면 두 리셋 화살표를 유지하세요. 두 화살표의 반복은 같은 이벤트에 대해 유효한 시작 조건이 두 가지임을 나타냅니다. 시각적 복잡성을 줄이는 것은 의미가 보존될 때만 유용합니다.

선택 또는 분기에는 모델상의 근거가 필요합니다

Mermaid는 경로를 분기할 때 <<choice>>를, 분기 및 합류 구조에는 <<fork>>와 <<join>>을 문서화하고 있습니다. 이는 상태 다이어그램 참조에 나오는 서로 다른 다이어그램 구성 요소입니다.

어수선한 여러 화살표를 공통 접점에 모으기 위한 이유만으로 이를 추가하지 마세요. 이 예제의 목적은 상태 간 직접 전환을 유지하는 것입니다. 중간 구성 요소를 추가하려면 그 경로가 원래 모델과 어떻게 대응하는지 별도로 설명해야 합니다. 화살표를 명시적으로 표시하면 대응 관계를 바로 확인할 수 있습니다.

복합 상태에는 문서화된 제약이 있습니다

Mermaid는 복합 상태를 지원하지만, 서로 다른 복합 상태에 속한 내부 상태 간의 전환은 명시적으로 허용하지 않습니다. 복합 상태를 참조하세요.

노드를 묶었을 때 이런 상황이 발생한다면 이 작업에서는 연결된 상태를 평면 구조로 유지하세요. 화살표를 바깥쪽 복합 상태로 옮기면 끝점이 바뀌므로 자동으로 동등한 대체가 되는 것은 아닙니다. 계층 구조가 모델의 실제 구조를 나타내고 진입 및 이탈 동작을 설명할 수 있을 때 사용하세요.

네 상태 예제에서는 중첩이 별로 도움이 되지 않습니다. 전환 구조는 그대로 두면서 레이블을 짧게 하고 표현을 명확히 하는 것이 유용한 간소화입니다.

전환과 렌더링 결과 확인하기

원래 다이어그램을 교체하기 전에 두 차례 검토하세요. 첫 번째는 모델을 확인하고, 두 번째는 선택한 표현이 유용한지 확인합니다.

  1. 목록의 각 행을 전환 문과 비교하세요. 두 끝점과 전체 레이블이 모두 일치하는지 확인하세요.
  2. 각 전환 문을 다시 목록과 비교하세요. 빠진 화살표뿐 아니라 추가된 화살표도 찾을 수 있습니다.
  3. 시작과 종료를 각각 확인하세요. 여기서는 시작에서 A으로만 이어지며, D에서만 종료로 이어집니다.
  4. 렌더링된 다이어그램에서 레이블을 읽을 수 있는지, 화살촉을 구분할 수 있는지 확인하세요.
  5. B와 C에서 돌아오는 경로를 따라가 보세요. 정방향 흐름만 검토하면 이 경로를 놓치기 쉽습니다.

이 예제에서는 세 가지 읽기 경로를 확인해 보세요. 시작에서 A, 이어서 C, 다음으로 D, 마지막으로 종료까지; 시작에서 A, 이어서 B, 그다음 리셋되어 A로; 시작에서 A, 이어서 C, 그다음 B로 돌아가는 경로입니다. 이 확인으로 대체 경로, 리셋, 역방향 연결을 점검할 수 있습니다. 이 검토는 행 비교를 보완하는 것이지 대체하는 것이 아닙니다.

결정론적 텍스트 비교를 통해 예제의 전환 문 아홉 개가 레이블을 포함해 목록과 일치하는 것을 확인했습니다. 준비 과정에서 설치된 Obsidian 애플리케이션으로 예제를 렌더링하지는 않았으므로, 최종 간격과 화살표 경로는 로컬 버전에서 확인해야 합니다.

노트에 코드가 그대로 표시된다면 먼저 읽기 보기에서 보고 있는지, 여는 펜스에 mermaid이 있는지 확인하세요. 편집 후 구문 분석 오류가 발생하면 전체 예제로 돌아가 한 번에 하나씩 변경을 다시 적용하세요. 레이아웃만 어색하다면 전환을 보존하면서 레이블 길이, 방향, 창 너비를 비교하세요.

목록 비교를 통과한 뒤 레이블과 경로를 가장 쉽게 읽을 수 있는 버전을 유지하세요. 간소화가 성공하면 독자는 같은 유효한 전환을 더 쉽게 따라갈 수 있고, 원본 텍스트도 계속 간단하게 확인하고 관리할 수 있습니다.

출처