TL;DR

  • 이 다이어그램 언어는 노드와 연결선의 배치·모양·텍스트·포함 관계를 선언형 구문으로 지정하고 테마와 기본 스타일을 적용하는 방식임.
  • 노드는 이름과 텍스트, 키-값 속성으로 선언하고 연결선은 방향·라벨·속성을 지정함.
  • 점으로 구분한 이름으로 부모와 자식 노드를 구성하며, 여러 배치 기준과 최소 간격을 설정함.
  • 스타일, 선 모양, 컨테이너 내부 정렬, 도형·아이콘·배지·겹침 요소를 설정할 수 있음.
  • 텍스트 서식과 연결선 경로·통과 위치, 주석 구문을 제공함.

치트시트

문장

  • node name ["text"] [placements] [key: value …] 형식으로 노드를 선언함.
  • edge a -> b ["text"] [key: value …] 형식으로 연결선을 선언함. a <- b는 대상 노드를 먼저 쓰는 방식이며, a <-> b는 양방향 연결임.
  • style name key: value … 형식으로 스타일을 선언함.
  • diagram theme: nord background: #1e2229 text: (color: #e0e0e0) 형식으로 다이어그램 테마와 배경·텍스트 색을 지정함.
  • default node|leaf|container|edge key: value … 형식으로 해당 종류의 모든 요소에 적용되는 기본 스타일을 지정함. 더 구체적인 설정이 우선함.

라벨

  • node parser처럼 텍스트를 생략하면 노드 이름이 텍스트로 사용됨.
  • node parser ""는 텍스트를 의도적으로 비워 둠.
  • "two / lines"처럼 슬래시 양쪽에 공백을 두면 줄바꿈으로 처리됨.

포함 관계

  • node server.docker "Docker"처럼 점으로 구분한 이름은 자식 노드를 나타냄.
  • 부모 노드를 먼저 선언해야 하며, 자식 노드에 별도 텍스트가 없으면 이름의 마지막 부분인 docker가 텍스트로 표시됨.

배치

  • above X, below X, left of X, right of X로 X를 기준으로 위·아래·왼쪽·오른쪽에 배치함.
  • above-left of X부터 below-right of X까지 대각선 위치를 지정함.
  • level with X는 중심선을 맞추며, top|bottom|left|right level with X는 해당 가장자리를 맞춤.
  • right of A and B는 A와 B를 함께 둘러싸는 상자를 기준으로 배치함.
  • on X at top-right는 X의 상자에 겹치도록 표시함. 위치는 top-left, top-center, top-right, left-center, center, right-center, bottom-left, bottom-center, bottom-right의 아홉 가지임.
  • 노드 하나에 필요한 만큼 배치 조건을 지정할 수 있으며, 단일 배치 조건은 두 축을 모두 정함.

간격

  • right of X (gap: wide)처럼 배치 조건에 간격을 지정하거나, 노드에 gap: tight를 설정해 기본 간격으로 사용할 수 있음.
  • 간격 값은 none, tight, normal, wide이며, 모두 최소 간격으로 적용됨.

모양

  • style: name으로 스타일을 지정함.
  • fill: #191728로 채우기 색을, border: none으로 테두리 여부를 지정함.
  • line: #d2904e는 연결선 색을 지정함.
  • overlap: allow로 겹침을 허용함.
  • url: "https://example.com"으로 URL을 지정함.

선

  • line: (path: square, corners: rounded)는 연결선의 모든 선 속성을 지정함.
  • path 값은 curved, square, straight임.
  • corners 값은 sharp, rounded임.
  • crossing 값은 none, arc, gap, square임.
  • pattern 값은 solid, dashed, dotted, dash-dot임.
  • thickness 값은 thin, normal, thick 또는 숫자임.
  • default edge line: (path: square)는 모든 연결선의 기본 선 모양을 설정함.

내용

  • contents: (widths: match, align: center)로 제목이 자식 요소보다 넓을 때 컨테이너 안에서 자식 요소를 배치하는 방식을 지정함.
  • widths 값은 natural, match, fill임.
  • align 값은 left, center, right임.

본문

  • shape: rectangle|document|circle|none으로 노드 윤곽을 지정함. none은 상자 없이 텍스트만 표시하는 형태로 주석에 사용됨.
  • icon: name은 상자 없이 해당 그림을 노드로 표시함.
  • badge: name은 텍스트 옆에 그림을 표시하면서 노드 상자를 유지함.
  • deck: "text" ["text" …]는 각 텍스트에 해당하는 복사본을 상자 뒤에 겹쳐 표시함.
  • 그림 이름은 disk, desktop, laptop, package, cubes, cube, database임.

텍스트

  • 텍스트 자체에 관한 설정은 텍스트 뒤 대괄호 안에 지정함. 예를 들어 "Docker" (at: bottom-center, align: center)는 위치와 정렬을 설정함.
  • (color: theme-muted)로 색을 지정하고, (size: small|normal|large)로 크기를 지정함.
  • (wrap: 24)는 텍스트를 문자 수 기준으로 접으며, 24는 문자 수임.
  • at에는 배치 항목의 아홉 위치를 지정할 수 있음. 자체 텍스트가 없는 스타일에서는 설정 키 뒤에 괄호를 붙여 text: (color: theme-muted)처럼 지정함.
  • 모든 텍스트에서 " / "는 줄바꿈이며, \/는 문자 그대로의 슬래시임.
  • "name / [dim]quieter[/dim]"는 quieter를 dim 스타일의 텍스트 색으로 표시하며, \[는 문자 그대로의 여는 대괄호임.

연결선

  • from: right to: left로 시작점과 끝점의 위치를 지정해 선의 곡선을 정함.
  • between a and b는 두 노드 사이의 빈 공간을 통과하도록 연결선을 배치하며, 노드가 대각선으로 놓인 경우 vertically 또는 horizontally를 지정함.
  • below c 또는 above, left of, right of는 연결선이 특정 노드의 어느 쪽을 지나갈지 지정함.

주석

  • //는 문장 뒤를 포함해 해당 줄의 끝까지 주석으로 처리함.