연결이 바뀌어도 Mermaid 노드를 고정된 행에 유지하려면, 렌더러가 지원하는 경우 열을 명시한 블록 다이어그램을 사용하세요. Mac의 Obsidian에서는 먼저 설치된 렌더러를 확인하세요. 플로차트의 하위 그래프는 이 레이아웃을 안정적으로 강제할 수 없습니다.

이 가이드는 개별 노드 간 연결을 유지하면서 여섯 개의 중립적인 노드를 가로 두 행으로 배치하는 한 가지 작업을 다룹니다. 상자를 정렬할지, 연결선의 꺾임을 직각으로 만들지, 아니면 둘 다 필요한지 각각 판단하세요. 한 요구 사항을 만족해도 다른 요구 사항은 충족하지 못할 수 있습니다.

교차 연결은 왜 플로차트의 행 배치를 흐트러뜨리나요?

Mermaid 문서에는 플로차트의 특정한 제한 사항이 설명되어 있습니다. 하위 그래프 안의 노드가 하위 그래프 바깥과 연결되면 해당 노드의 로컬 방향은 무시되고 상위 그래프의 방향을 따릅니다. 따라서 flowchart TB 안에 direction LR로 선언한 행도 외부 연결을 추가하면 배치가 바뀔 수 있습니다. 공식 문서의 하위 그래프 방향 제한을 참조하세요.

다음의 완전한 예시에는 이 조건이 포함되어 있습니다. 두 개의 내부 연결은 가로 행을 암시하지만, A --> D가 하위 그래프 경계를 넘습니다.

```mermaid
flowchart TB
  subgraph RowOne[Row One]
    direction LR
    A[Alpha] --> B[Beta]
  end
  subgraph RowTwo[Row Two]
    direction LR
    D[Delta] --> E[Epsilon]
  end
  A --> D
```

Mermaid는 하위 그래프 ID로 연결하는 기능도 지원합니다. 대신 RowOne과 RowTwo를 연결하면 내부 노드를 대상으로 지정하지 않아도 되지만, 관계의 의미가 바뀝니다. Alpha와 Delta가 아니라 그룹끼리 연결하는 것입니다. 그룹 간 관계가 실제로 맞는 경우에만 이 방법을 사용하세요. A ~~~ B 같은 보이지 않는 링크는 위치 지정 보조 수단으로 문서화되어 있지만, 행을 고정하는 방법으로 문서화되어 있지는 않습니다. 플로차트 구문

이 작업에서는 개별 연결 지점을 그대로 유지하세요. 필수 노드 연결을 그룹 연결로 바꾸면 그림은 깔끔해질 수 있지만, 전달해야 하는 정보가 손실됩니다.

Mac에서 실제로 사용하는 렌더러 확인하기

Obsidian의 Settings를 연 다음 General로 이동해 현재 앱 버전을 기록하세요. 최신 문서에 따르면 버전 정보와 Read the changelog 컨트롤이 이곳에 있습니다. 다른 빌드용으로 작성된 지침을 적용하기 전에 설치된 버전의 릴리스 노트를 확인하세요. 설정 — Obsidian 도움말

버전에 따라 중요한 차이가 있습니다. 2026년 10월 22일자 Obsidian 1.15.0 Desktop 얼리 액세스 릴리스에는 다이어그램 렌더링용 Pele이 도입되었고 Mermaid 12.1.0 구문과의 호환성이 명시되어 있습니다. 이 공지로는 그보다 이전 버전에서 어떤 렌더러를 사용하는지 알 수 없습니다. Obsidian 1.15.0 Desktop 릴리스 노트

Pele은 Mermaid와 다른 노드 위치, 간격, 에지 경로를 사용하는 자체 레이아웃 엔진을 문서화하고 있습니다. 호환성 목록에는 block과 block-beta가 모두 포함됩니다. 따라서 구문 호환성만으로 Obsidian 다이어그램이 Mermaid 상류 버전의 렌더링과 일치한다고 판단할 수는 없습니다. Pele 호환성

Mermaid 상류 버전도 변경되었습니다. 레이아웃 문서에 따르면 ELK는 버전 12.0.0부터 플로차트에 기본으로 포함되며 기본 레이아웃으로 사용됩니다. 그전에는 호스트가 별도의 ELK 패키지를 설치하고 등록해야 했습니다. 그러므로 layout: elk를 선택하라는 조언은 렌더러와 버전에 따라 조건부로 적용해야 합니다. Mermaid 레이아웃

유용하게 비교하려면 다이어그램 원문, Obsidian 앱 버전, 렌더링 환경을 함께 기록하세요. 한 번에 하나씩만 바꾸세요. 원문이 서로 다른 다이어그램을 다른 렌더러에서 비교하면 행이 이동한 원인을 분리해 알아낼 수 없습니다.

명시적인 행 배치를 위해 블록 다이어그램 사용하기

Mermaid 블록 다이어그램은 열을 통해 작성자가 배치를 제어할 수 있습니다. 블록은 선언된 열을 채운 다음 이어지는 행으로 넘어가며, space은 빈 셀을 확보합니다. 따라서 플로차트의 순위 지정과 별개로 상자를 배치할 때 지원되는 Mermaid 방식입니다. 블록 다이어그램 구문

임시 Obsidian 노트를 만들고 여는 백틱 세 개와 닫는 백틱 세 개를 포함해 아래 블록 전체를 붙여 넣으세요. Obsidian에서는 언어 식별자 mermaid가 있는 펜스 코드 블록으로 다이어그램을 작성합니다. 고급 서식 구문 — Obsidian 도움말

```mermaid
block
  columns 5
  A["Alpha"] space B["Beta"] space C["Gamma"]
  space:5
  D["Delta"] space E["Epsilon"] space F["Zeta"]

  A --> B
  B --> C
  D --> E
  E --> F
  A --> D
  B --> E
  C --> F
  A --> F
```

의도한 배치는 위쪽 행에 Alpha, Beta, Gamma가 가로로 놓이고 아래쪽에 Delta, Epsilon, Zeta가 놓이는 것입니다. 다섯 개의 열에는 가로 간격 두 칸이 포함되며, space:5는 두 점유 행 사이에 빈 행 하나를 확보합니다. 연결은 선언된 블록 ID를 참조합니다. 이러한 문법은 Mermaid의 열, 간격, 에지 구문 문서를 따릅니다. 블록 다이어그램 구문

설치된 렌더러에서 block를 거부하면 구문 호환성부터 확인하세요. 문서화된 구문을 확인한 다음 이전 표기인 block-beta을 시도하세요. Pele의 호환성 목록에는 둘 다 있지만, 그렇다고 모든 구버전 Obsidian에서 지원된다는 뜻은 아닙니다. 여기의 예시는 문서를 기준으로 검토했으며, 설치된 Obsidian 렌더러에서 실행하지는 않았습니다. Pele 호환성

결과를 두 단계로 평가하세요. 먼저 여섯 레이블과 의도한 행 배치를 확인합니다. 그런 다음 여덟 개의 관계를 모두 살펴보며, 특히 대각선 방향의 Alpha-to-Zeta 연결을 확인하세요. 상자 배치를 받아들이더라도 연결선이 모호하거나 겹치지 않는지 살펴야 합니다.

직각 연결선과 고정된 행 배치가 모두 필요한가요?

연결선 모양은 별도의 승인 기준으로 다루세요. Mermaid의 플로차트 설정은 curve을 에지 렌더링 설정으로 정의하고, 값으로 step, stepBefore, stepAfter를 나열합니다. 또한 같은 수준의 노드에는 nodeSpacing, 서로 다른 수준의 노드에는 rankSpacing를 별도로 정의합니다. 이러한 설정은 모양과 간격을 다룹니다. 문서에 설명된 용도만으로는 행 배치가 고정된다고 볼 수 없습니다. 플로차트 다이어그램 설정 스키마

블록 예시는 상자 배치를 다룹니다. 모든 교차 연결이 가로와 세로 선분만 사용한다고 보장하지는 않습니다. 플로차트의 곡선 설정이 블록 다이어그램 연결선에도 적용된다고 가정하지 마세요. 상류 Mermaid에서 허용되는 설정이 Pele에서도 동일하게 작동한다고 단정해서도 안 됩니다.

그림을 조정하는 데 시간을 들이기 전에 아래 판단 기준을 활용하세요.

필요한 결과 실용적인 선택 승인 기준
개별 교차 연결이 있는 고정된 두 행 지원되는 경우 블록 다이어그램 모든 노드가 의도한 행에 유지됨
배치를 유연하게 조정할 수 있는 읽기 쉬운 플로차트 플로차트 레이아웃 및 간격 조정 편집할 때마다 관계가 명확하게 유지됨
그룹 전체 간의 연결 의미상 정확한 경우 하위 그래프 끝점 끝점이 의도한 관계를 나타냄
Obsidian 안에서 직접 배치하는 상자 Canvas 카드 배치와 연결이 의도한 다이어그램과 일치함
고정된 행과 지정된 연결선 꺾임 두 요구 사항을 따로 평가 실제 렌더러에서 모든 꺾임과 교차를 확인함

설치된 Obsidian에서 블록 다이어그램을 렌더링할 수 없으면 어떻게 하나요?

일반적인 Mac 작업에서 카드를 직접 배치해도 괜찮다면 Obsidian Canvas가 문서화된 대안입니다. 명령 팔레트를 열고 Canvas: Create new canvas를 선택하세요. 캔버스를 두 번 클릭해 텍스트 카드를 만든 다음 여섯 개의 임의 레이블을 입력합니다. Canvas — Obsidian 도움말

위쪽 카드 세 장을 선택하고 Align을 누른 다음 Arrange in a row를 선택하세요. 아래쪽 세 장에도 반복합니다. 필요에 따라 간격을 조정하세요. 카드를 연결하려면 카드 가장자리에 채워진 원이 나타날 때까지 가장자리에 마우스를 올린 다음 원을 다른 카드의 가장자리로 끌어 놓습니다. 이러한 정렬 및 연결 컨트롤은 Canvas의 문서화된 기능입니다. Canvas — Obsidian 도움말

Canvas는 인라인 Mermaid 코드 블록이 아니라 별도의 .canvas 문서를 만듭니다. 카드를 직접 배치하는 결과물도 괜찮다면 Canvas를 선택하세요. Canvas의 배치 컨트롤로 행 작업을 처리할 수 있지만, 인용한 문서에서는 연결선의 임의 경유점 편집 기능을 확인할 수 없습니다. Canvas — Obsidian 도움말

연결을 더 추가하기 전에 결과 확인하기

지원되지 않는 구문과 레이아웃 동작을 구분하려면 간단한 비교 절차를 따르세요. 이 절차는 문서화된 제한 사항에서 도출한 진단 방법이며, 실제 Obsidian 설치에서 테스트했다는 주장은 아닙니다.

  1. 여덟 개의 연결선을 제외한 여섯 블록을 렌더링합니다. 행 배치를 확인합니다.
  2. 같은 행 안의 연결 네 개를 복원합니다. 레이블과 화살표 방향을 확인합니다.
  3. 같은 열의 연결 세 개를 복원합니다. 행 사이의 공간을 살펴봅니다.
  4. 마지막으로 A --> F를 복원합니다. 경로가 계속 읽기 쉬운지 확인합니다.
  5. 최종 원문을 실제로 읽을 환경에서 다시 엽니다. 그 렌더링 결과를 기준으로 판단합니다.

첫 단계에서 구문 분석에 실패하면 간격을 바꾸기 전에 다이어그램 지원 여부를 확인하세요. 배치는 괜찮지만 연결선이 불분명하면 해당 경로를 조정하거나 표현 방식을 다시 검토하세요. 대안을 비교하는 동안 필요한 관계는 모두 표시해 두세요. 문제를 일으키는 연결을 삭제하면 다이어그램이 처리해야 하는 바로 그 조건이 사라집니다.

행을 안정적으로 유지하려면 블록을 명시적으로 배치하고 설치된 렌더러에서 검증하세요. 노드 간 관계를 그대로 유지하고 연결선의 기하 구조는 별도로 살펴보세요. 카드를 직접 배치하는 편이 작업을 완료하기에 더 실용적이라면 Canvas를 사용하세요.

출처