MarkNode는 미리보기에서 다이어그램을 직접 렌더링합니다. Mermaid 구문 — 순서도, 시퀀스 다이어그램 등을 일반 텍스트로 기술하는 방식 — 을 사용해 펜스 코드 블록 안에 다이어그램을 작성하면, MarkNode가 코드 자리에 이미지를 그려 줍니다. 전 과정이 오프라인으로 이루어집니다.
다이어그램 작성하기
언어 식별자로 mermaid를 지정한 펜스 코드 블록을 사용하세요:
```mermaid
flowchart TD
Start[Start] --> Decision{Need a diagram?}
Decision -->|Yes| Draw[Write it in Markdown]
Decision -->|No| Skip[Keep writing prose]
Draw --> Done[Done]
Skip --> Done
```미리보기에서는 코드 블록이 렌더링된 순서도로 대체됩니다. Markdown 원본은 그대로 유지됩니다 — MarkNode는 그 그림만 그릴 뿐이며, 다이어그램을 바꾸고 싶다면 mermaid 텍스트를 편집하면 그림이 함께 갱신됩니다.
완전한 스타일이 적용되는 다이어그램 유형
순서도, 시퀀스 다이어그램, 클래스 다이어그램, 상태 다이어그램은 MarkNode의 모든 처리를 지원받습니다. 단순히 끼워 넣은 일반 이미지가 아니라, 문서의 나머지 부분과 어울리도록 배치되고 조판됩니다.
예를 들어 시퀀스 다이어그램은 다음과 같습니다:
```mermaid
sequenceDiagram
participant Writer
participant MarkNode
Writer->>MarkNode: Write a mermaid code block
MarkNode-->>Writer: Render diagram in preview
```
클래스 다이어그램과 상태 다이어그램도 동일한 mermaid 펜스에 각자의 Mermaid 키워드(classDiagram, stateDiagram-v2)를 사용하며, 같은 수준의 완성도로 렌더링됩니다.
그 밖의 다이어그램 유형
파이 차트와 간트 차트를 비롯한 다른 여러 Mermaid 다이어그램 유형도 현재 MarkNode에서 렌더링되며, 코드가 아닌 테마에 맞춰 스타일이 적용된 실제 다이어그램으로 표시됩니다. 순서도, 시퀀스, 클래스, 상태 다이어그램이 받는 것과 같은 수준의 맞춤 레이아웃 완성도는 향후 업데이트에서 이들 다이어그램 유형에도 적용될 예정입니다.
테마에 맞추기
미리보기에서 다이어그램은 문서의 애플리케이션 테마를 따릅니다. 테마를 전환하면 화면에 표시된 다이어그램도 미리보기의 나머지 부분과 함께 스타일이 바뀝니다 — 별도로 설정할 것은 없습니다.
Quick Look 미리보기는 대신 Mac의 시스템 라이트/다크 모드를 따릅니다. 순서도, 시퀀스, 클래스, 상태 다이어그램은 어느 쪽에서든 잘 어울리며, 파이와 간트 다이어그램은 현재 Quick Look에서 단일 팔레트로 렌더링됩니다.
다이어그램이 표시되는 곳
다이어그램은 렌더링된 Markdown이 표시되는 모든 화면에서 렌더링됩니다:
- 도킹된 미리보기 창
- 도킹 해제된 미리보기 윈도우
- macOS Quick Look (Finder에서 Markdown 파일을 선택하고 Space 키를 누르세요 — Quick Look 미리보기 참고)
- DOCX 내보내기, 포함된 이미지 형태로
오류
다이어그램의 Mermaid 구문에 문제가 있으면 — 인식할 수 없는 다이어그램 유형이나 구문 오타 등 — MarkNode는 깨진 이미지나 빈 이미지 대신 원래의 펜스 코드 블록을 표시합니다. 문서의 나머지 부분은 정상적으로 렌더링되며, 해당 블록만 영향을 받습니다. 원본을 수정하면 미리보기가 다음에 갱신될 때 다이어그램이 나타납니다.
지원되는 구문
MarkNode는 Mermaid 프로젝트의 구문을 그대로 따릅니다. 전체 다이어그램 유형과 옵션은 공식 Mermaid 문서를 참고하세요 — 그곳에서 유효한 것이라면 MarkNode도 렌더링을 시도합니다.