중첩 플로우차트 서브그래프를 사용하여 제목이 있는 컨테이너를 표현하되, 리프 블록도 포함하세요. 빈 컨테이너가 제대로 렌더링되지 않으면 각 리프 안에 보이지 않는 스페이서를 추가하세요. 이렇게 하면 보이는 계층 구조가 유지되며, 설치된 Obsidian 렌더러에서 결과를 확인하세요.

이 가이드는 하나의 중립적인 다이어그램을 만듭니다: Collection이라는 제목의 외부 블록 안에 Group A와 Group B가 있고, 각 그룹 안에 제목이 있는 리프 컨테이너가 있습니다. 과제는 이 리프들이 일반적인 레이블이 있는 사각형으로 대체되지 않고, 제목이 있는 컨테이너처럼 보이게 유지하는 것입니다.

제목이 있는 리프 블록을 무엇으로 표현해야 할까?

다른 의미 있는 블록을 포함하든 아니든, 모든 보이는 컨테이너를 subgraph로 표현하세요. Mermaid는 플로우차트 예제에서 서브그래프, 명시적 서브그래프 ID, 중첩을 설명합니다. leafA["Block A"] 같은 일반 노드 선언은 레이블이 있는 노드를 생성할 뿐, 제목이 있는 컨테이너를 선언하지 않습니다. Mermaid의 플로우차트 — 기본 구문을 참조하세요.

이 예제에서는 보이는 모델과 레이아웃 지원을 구분합니다. Collection, 그룹들, 리프 블록이 의미 있는 요소입니다. 스페이서는 리프 컨테이너에 레이아웃용 콘텐츠를 주기 위한 구현 세부 사항입니다. 이 도우미를 추가한다고 해서 리프의 선언이 서브그래프에서 노드로 바뀌는 것은 아닙니다.

이 구분은 이 접근 방식의 경계를 정합니다: 보이는 리프는 제목이 있는 컨테이너로 남지만, 소스에는 일반 도우미 노드가 포함됩니다. 보이지 않는 도우미를 포함한 모든 노드 선언을 금지하는 더 엄격한 요구 사항이 있다면, 이 해결책은 그 요구 사항을 충족하지 못합니다.

Mac 설치에서 사용하는 렌더러 확인하기

Obsidian에서 사이드바의 설정을 열고 일반을 선택한 후 앱 버전을 확인하세요. Obsidian의 설정 문서에 따르면 일반에서 버전 정보를 볼 수 있습니다. 이 버전을 기준으로 관련 릴리스 노트를 확인하세요.

중요한 렌더러 경계가 있습니다. 2026년 10월 22일 공식 릴리스 노트에서는 Desktop 1.15.0를 초기 액세스로 표시하고, Mermaid 구문을 Obsidian의 Pele 라이브러리로 렌더링하며 Mermaid 12.1.0 구문과 호환된다고 설명합니다. 같은 릴리스에서 생성된 다이어그램 클래스가 Pele의 클래스로 변경됩니다. 이전 설치가 Pele을 사용한다고 가정하거나, 호환성이 Mermaid.js와 동일한 출력을 의미한다고 가정하지 마세요. Obsidian 1.15.0 Desktop (초기 액세스)를 참조하세요.

이 가이드에서 가져온 Mermaid 문서는 버전 12.2.0을 표시합니다. 이것은 Obsidian 릴리스 노트에서 언급된 호환성 레벨과 별개의 버전입니다. 문서, 온라인 에디터, 설치된 애플리케이션을 같은 예제를 각각에서 확인하기 전까지는 별개의 환경으로 다루세요.

첫 시도에서는 렌더러별 설정과 외부 스타일시트 선택자를 사용하지 마세요. 아래 예제는 서브그래프와 다이어그램 로컬 스타일링을 사용하여 설치 환경을 확인하기 위한 작은 시작점을 제공합니다.

Obsidian 노트에서 중첩 컨테이너 만들기

편집 보기에서 노트를 열고 아래 블록 전체(시작과 끝 펜스 포함)를 붙여넣으세요. Obsidian은 Mermaid 다이어그램을 언어 식별자 mermaid이 있는 펜스 코드 블록으로 문서화합니다. 문서화된 노트 형식에 추가 다이어그램 플러그인은 필요 없습니다. 고급 서식 구문을 참조하세요.

```mermaid
flowchart TB
    subgraph collection["Collection"]
        subgraph groupA["Group A"]
            subgraph blockA["Block A"]
                spacerA[" "]
            end
            subgraph blockB["Block B"]
                spacerB[" "]
            end
        end
        subgraph groupB["Group B"]
            subgraph blockC["Block C"]
                spacerC[" "]
            end
        end
    end

    classDef spacer fill:transparent,stroke:transparent,color:transparent;
    class spacerA,spacerB,spacerC spacer;
```

Cmd+E를 눌러 편집 보기와 읽기 보기 사이를 전환하세요. 읽기 보기에서 편집 커서가 소스를 노출하지 않고 완성된 다이어그램을 검사하세요. 이 컨트롤은 Obsidian의 보기 및 편집 모드에 문서화되어 있습니다.

의도된 결과는 보이는 제목이 있는 컨테이너 6개입니다: 컬렉션 1개, 그룹 2개, 리프 블록 3개. 각 리프에는 레이블이 공백 한 칸인 도우미가 들어 있습니다. spacer 클래스는 투명한 채우기, 테두리, 텍스트를 요청합니다. 이는 Mermaid의 문서화된 클래스 메커니즘과 레이아웃 해결책을 결합한 것입니다; Mermaid는 플로우차트 스타일링 참조에서 classDef와 클래스 할당을 문서화합니다.

이 예제는 문서화된 구문에 대해 검토되었으나, 이 기사를 위해 Mac Obsidian 세션에서 렌더링되지는 않았습니다. 따라서 수용 검사는 시각적이고 로컬입니다: 여섯 제목이 모두 나타나야 하고, 각 그룹에 할당된 리프가 포함되어야 하며, 스페이서 사각형이 보이지 않아야 합니다. 정확한 간격과 형제 위치는 수용 기준이 아닙니다.

계층 구조를 바꾸지 않고 레이블 변경하기

인용된 제목만 변경하는 것으로 시작하세요. collection, groupA, blockA 및 기타 ID를 서로 다르게 유지하세요. 이렇게 하면 편집된 버전을 시작 예제와 비교하기 쉽습니다.

리프를 추가하려면 완전한 리프 서브그래프 하나를 복사하고, 서브그래프와 스페이서 모두에 새로운 ID를 부여한 뒤, 최종 클래스 할당에 새 스페이서 ID를 추가하세요. 감싸는 그룹의 end 앞에 배치하세요. 예를 들어 Group B 안에 네 번째 리프를 넣으려면 blockC 옆에, groupB 안에 배치하세요.

닫는 문을 안쪽에서 바깥쪽으로 읽으세요: 리프를 닫고, 그 그룹을 닫고, 컬렉션을 닫으세요. 들여쓰기는 편집 중 구조를 보이게 하지만, 각 end의 배치가 소스가 정확히 표현해야 할 것입니다.

왜 빈 서브그래프 대신 스페이서를 사용하는가?

빈 컨테이너 동작은 렌더러와 버전에 따라 달라져 왔습니다. Mermaid 이슈 5402는 Mermaid 10.8.0에서 ELK를 사용할 때 빈 서브그래프가 실패한다고 보고하는 반면, 제공된 Dagre 예제는 작동합니다. 이것은 특정 설정에 대한 과거 보고서일 뿐, 모든 현재 렌더러가 빈 서브그래프를 거부한다는 증거는 아닙니다. Elk 렌더러가 빈 서브그래프에서 작동하지 않음을 참조하세요.

실질적인 추론은 빈 컨테이너 동작을 지정되지 않은 설치를 위한 다이어그램의 유일한 기초로 삼지 않는 것입니다. 스페이서 접근 방식은 각 리프에 명시적 콘텐츠를 주면서 의미 있는 제목을 서브그래프에 유지합니다.

소스가 얼마나 엄격해야 할지 결정할 때 이 결정 도구를 사용하세요:

요구 사항 시작 접근 방식 확인할 사항
보이는 리프는 제목이 있는 컨테이너로 유지되어야 함 투명 스페이서가 있는 중첩 서브그래프 제목, 포함 관계, 숨겨진 도우미
소스에 도우미 노드가 없어야 함 대상 렌더러에서 빈 리프 서브그래프 시도 모든 빈 리프가 허용 가능하게 렌더링되는지
리프 블록에 나중에 실제 항목이 들어갈 예정 리프 서브그래프 유지하고 스페이서만 교체 더 이상 필요 없는 도우미만 제거
블록에 의도적인 열 배치가 필요 Mermaid 블록 다이어그램 별도 평가 설치된 구문 지원과 제목 표현

Mermaid의 전용 블록 다이어그램 문서는 복합 블록, 열, 명시적 간격을 설명합니다. 이 기능들은 배치가 주된 작업일 때 평가할 가치가 있습니다. 하지만 이것만으로는 이 정확한 제목 컨테이너 표현이 보존될 것이라고 단정할 수 없습니다. 블록 다이어그램 문서를 참조하세요.

잘못된 결과 진단하기

한 번에 하나만 변경하세요. 시작 예제 전체를 별도 노트에 복사해 두어 렌더러 차이와 편집 실수를 구별하세요.

  1. 노트에 다이어그램 대신 코드가 표시됨. 시작 펜스가 mermaid를 사용하는지 확인한 뒤 읽기 보기로 전환하세요. 펜스를 Obsidian의 문서화된 다이어그램 형식과 비교하세요.
  2. 리프가 일반 레이블 사각형처럼 보임. 선언을 검사하세요. subgraph로 시작해야 하며, 스페이서가 그 안에 별도 줄로 있어야 합니다.
  3. 리프 안에 작은 사각형이 보임. 스페이서 ID가 최종 class 문과 일치하는지 확인하세요. 일시적으로 스타일링을 제거하여 어떤 도우미가 보이는지 식별한 뒤 복원하세요.
  4. 블록이 잘못된 그룹에 나타남. 레이아웃 설정을 조정하기 전에 닫는 end 문의 순서를 확인하세요.
  5. 온라인에서는 작동하지만 Obsidian에서 다름. 설치된 앱의 릴리스 노트와 온라인 렌더러의 버전을 비교하세요. 작동하는 로컬 예제를 참조로 유지하세요.

배치를 조정하기 전에 포함 관계 유지하기

제목과 포함 관계가 올바르면, 배치가 충분히 읽기 쉬운지 판단하세요. 리프 서브그래프를 노드로 대체하여 사각형을 작게 만드는 것만으로는 안 됩니다: 그 편집은 보존하려던 표현을 변경합니다.

마찬가지로, 포함 관계 이상의 관계가 필요할 때만 커넥터를 추가하세요. Mermaid는 방향 제한을 문서화합니다: 서브그래프 안의 노드를 바깥으로 연결하면 그 서브그래프가 부모의 방향을 상속받습니다. 그런 에지를 추가한 후 레이아웃을 다시 확인하세요. 서브그래프의 방향을 참조하세요.

평소 읽는 너비에서 노트를 검사하며 마무리하세요. 컬렉션, 그 그룹들, 그들의 제목 있는 리프가 명확하게 보이는 버전을 유지하세요. 유용한 결과는 리프 블록이 서브그래프로 남아 있고, 보이지 않는 레이아웃 도우미가 명시적으로 이해되며 나중에 쉽게 제거할 수 있는 읽기 쉬운 포함 계층 구조입니다.

출처