Layouts

Layout engines

Direction

Dagre

Reference

Pros

Cons

Gallery

ELK

Reference

Pros

Cons

Gallery

TALA

Reference

Pros

Cons

Gallery

Themes

They apply to special shapes like tables too

Setting theme on the CLI

Dark theme

Special themes

Styles

Style keywords

Opacity

Stroke

Fill

Fill Pattern

Stroke Width

Stroke Dash

Border Radius

Shadow

3D

Multiple

Double Border

Font

Font Size

Font Color

Animated

Bold, italic, underline

Root

Dimensions

Sketch (Hand-drawn)

Interactive

Tooltips

Links

D2는 다양한 레이아웃 엔진을 사용할 수 있습니다. 레이아웃 엔진의 선택은 전체 다이어그램에 큰 영향을 미칩니다. 각 레이아웃은 특정 키워드에 대한 지원도 다르게 가지고 있습니다. 우리는 일관성을 유지하기 위해 최선을 다하지만, 최종적으로는 우리가 직접 만든 레이아웃 엔진에 가장 많은 제어권이 있으며, 다른 레이아웃 엔진이 지원하는 것으로 제한됩니다.

• dagre (기본값): 계층적 레이아웃을 생성하는 빠른 방향성 그래프 레이아웃 엔진입니다. Graphviz의 DOT 알고리즘을 기반으로합니다.
• ELK: 방향 그래프 레이아웃 엔진입니다. dagre보다 더 성숙하며 (파트 타임 학술 연구 팀으로 유지 관리되고 있음) 최근 버전이 출시되었습니다.
• TALA: 소프트웨어 아키텍처 다이어그램에 특화된 새로운 레이아웃 엔진입니다.

원하는 레이아웃 엔진을 선택하고 다이어그램에 가장 적합한 것을 사용할 수 있습니다. 각각의 엔진은 그들만의 장단점이 있으며, 자세한 내용은 개별 페이지를 방문하여 확인할 수 있습니다.

사용 가능한 레이아웃을 보려면, d2 layout을 실행해보세요. 각 레이아웃 엔진은 특정 구성 가능한 플래그를 가질 수도 있습니다. 이는 d2 layout [엔진]을 실행하여 찾을 수 있습니다. 예를 들어, d2 layout dagre입니다.

사용할 레이아웃을 지정하려면, 플래그 --layout=dagre를 설정하거나 환경 변수 $D2_LAYOUT=dagre로 설정할 수 있습니다.

다음 중 하나를 선택하여 다이어그램이 향하는 방향을 명시적으로 제어하려면 direction을 설정하십시오.

direction: right
x -> y -> z: hello

Dagre is D2's default layout engine.

https://github.com/dagrejs/dagre

• 매우 빠릅니다.
• 전투 경험을 겪었습니다 (MermaidJS가 Dagre를 사용하여 플로우차트를 만든 덕분입니다).
• 일반적으로 좋은 결과를 제공합니다.
• 알고리즘의 이론은 Graphviz를 구동하는 논문입니다.
• 계층형 레이아웃을 잘 렌더링합니다.

• 유지보수되지 않음. 2018년에 개발이 중단되었습니다.
• 때때로 이상한 엣지 라우팅 결정을 내립니다. (https://github.com/dagrejs/dagre/issues/256).
• 레이아웃 알고리즘은 엄격하게 계층적이며, 기본 다이어그램이 계층적이지 않더라도 그렇습니다.
• 한 컨테이너 자식이 다른 컨테이너 (또는 다른 컨테이너 자식)에 대한 지원이 dagre에서는 기본적으로 지원되지 않습니다. D2는 shim을 추가하여 작동시켰지만, shim으로 인해 핵심 알고리즘 고려 사항이 누락될 수 있습니다.
• 다중 세그먼트 엣지 경로는 직각이 아닌 곡선입니다. 아름답지 않은 꼬꼬무룩한 선이 될 수 있습니다.

!Untitled 25.png

!Untitled 1 5.png

ELK는 성숙한 계층형 레이아웃으로, Kiel의 Christian Albrechts 대학교에서 학술 연구 그룹에 의해 활발하게 유지보수되고 있습니다.

https://www.eclipse.org/elk/reference.html

• 깔끔하고 직교한 경로.
• 매우 사용자 정의 가능.
• 빠릅니다.
• 교차점 최소화에 능합니다.
• 컨테이너 간 라우팅을 자연스럽게 지원하여 dagre보다 더 잘 처리합니다.
• 정기적인 업데이트로 지속적으로 개선 중입니다.

• dagre와 마찬가지로 엄격한 계층 구조입니다.
• 일부 경로에는 불필요한 굽은 부분이 있습니다.
• 대칭성을 고려한 최소한의 디자인입니다.

!Untitled 2 5.png

!Untitled 3 5.png

테라스트럭트에서 개발한 전용 레이아웃 엔진으로, 소프트웨어 아키텍처 다이어그램을 위해 특별히 설계되었습니다.

TALA는 100% 무료 및 오픈 소스인 D2와 전용, 폐쇄 소스인 TALA 간의 깨끗한 구분을 유지하기 위해 별도로 설치해야 합니다. 다음에서 다운로드할 수 있습니다: https://github.com/terrastruct/tala.

https://terrastruct.com/tala/

• 일반적으로 직교 레이아웃 엔진으로서 TALA는 계층 구조, 트리 또는 방사형과 같은 하나의 유형에 제한되지 않습니다. 기본적으로 비계층적 레이아웃의 경우, TALA는 인간이 화이트 보드에 그릴 때처럼 다이어그램을 생성할 수 있습니다.
• 대칭을 고려하고 선호합니다.
• 컨테이너에 대한 일등급 고려 사항이 있습니다.
• direction은 컨테이너마다 설정할 수 있습니다.
• near는 다른 모양에 가까이 지정할 수 있습니다.
• sql_table 연결은 정확한 행을 가리킵니다.
• 장애물을 피하기 위해 동적 레이블 위치 지정이 가능합니다.

• 무료가 아닙니다.
• 기본 알고리즘의 차이 (많은 휴리스틱 검색 반복이 최종 레이아웃에 수렴되고 계층 구조와 같은 제약조건의 부재)로 인해 다른 레이아웃 엔진보다 훨씬 느립니다.
• 다른 레이아웃 엔진과 비교하여 비교적 새로운 엔진입니다. 대안 레이아웃 엔진의 10년에 비해 운영 기간은 약 1년 정도입니다.
• 다른 레이아웃 엔진보다 더 무작위적입니다. 레이블의 작은 변경이 완전히 다른 레이아웃으로 이어질 수 있습니다.

!Untitled 4 3.png

!Untitled 5 3.png

D2에는 다양한 테마가 있어서 다이어그램을 전문적이고 블로그나 위키에 삽입하기 적합하게 만들어 줍니다.

사용한 테마를 지정하려면, 플래그 -t, --theme을 설정할 수 있습니다.

d2 -t 101 input.d2

환경 변수를 사용할 수도 있습니다.

D2_THEME=101 d2 input.d2

사용 가능한 테마를 보려면 다음을 실행하십시오.

d2 themes

다크 테마는 기본값으로 설정되지 않으므로 사용자의 시스템 환경 설정이 라이트 모드인지 다크 모드인지에 관계없이 다이어그램이 동일하게 보입니다.

사용자 시스템 환경설정이 어두운 테마인 경우 다이어그램이 적응하고 어두운 테마로 전환되도록 하려면 다음 플래그를 지정할 수 있습니다.

d2 --dark-theme 200 input.d2

일반적인 테마와 마찬가지로, 이것은 환경 변수로 설정할 수도 있습니다.

D2_DARK_THEME=200 d2 input.d2

어두운 테마의 예시입니다. (이미지이므로 시스템 환경 설정에 따라 변경되지 않습니다).

특정 특별한 테마는 색상 이상의 역할을 합니다.

예를 들어 Terminal 테마를 적용하면 다음 속성이 기본값으로 설정됩니다:

• 모든 라벨에 대문자가 적용됩니다.
• 테두리 반경이 없습니다.
• 고정폭 글꼴이 사용됩니다.
• 모든 컨테이너의 fill-pattern이 dots로 설정됩니다.
• 가장 바깥쪽 컨테이너는 double-border가 true로 설정됩니다.

!Untitled 6 3.png

아래 다이어그램에 대한 소스 코드 (ELK로 렌더링 됨)는 다음과 같습니다. 특별한 테마가 다른 기본값을 사용하기 때문에 라벨의 케이싱과 같은 다이어그램에서 명확한 속성이 소스에는 나타나지 않는 것을 주목하세요.

network: {
  cell tower: {
    satellites: {
      shape: stored_data
      style.multiple: true
    }

    transmitter

    satellites -> transmitter: send
    satellites -> transmitter: send
    satellites -> transmitter: send
  }

  online portal: {
    ui: {shape: hexagon}
  }

  data processor: {
    storage: {
      shape: cylinder
      style.multiple: true
    }
  }

  cell tower.transmitter -> data processor.storage: phone logs
}

user: {
  shape: person
  width: 130
}

user -> network.cell tower: make call
user -> network.online portal.ui: access {
  style.stroke-dash: 3
}

api server -> network.online portal.ui: display
api server -> logs: persist
logs: {shape: page; style.multiple: true}

network.data processor -> api server

만약 모양의 스타일을 커스터마이즈하려면, 다음 예약어들은 style 필드에 설정될 수 있습니다.

아래는 모든 유효한 스타일 목록입니다. 이 목록은 기준 다이어그램에 각각 적용됩니다.

• opacity
• stroke
• fill (shape only)
• fill-pattern (shape only)
• stroke-width
• stroke-dash
• border-radius
• shadow (shape only)
• 3D (rectangle/square only)
• multiple (shape only)
• double-border (rectangles and ovals)
• font
• font-size
• font-color
• animated (connection only)
• bold, italic, underline
• root

0과 1 사이의 부동 소수점 값

x -> y: hi {
  style: {
    opacity: 0.4
  }
}
x.style.opacity: 0
y.style.opacity: 0.7

색 이름 또는 16진수 코드

x -> y: hi {
  style: {
    stroke: deepskyblue
  }
}
# We need quotes for hex otherwise it gets interpreted as comment
x.style.stroke: "\#f4a261"

sql_table과 class에 대해서는, stroke는 body에 fill로 적용됩니다. (header의 fill을 제어하기 위해 fill이 이미 사용되기 때문입니다.)

CSS 색상 이름 또는 16진수 코드입니다.

x -> y: hi
x.style.fill: "\#f4a261"
y.style.fill: honeydew

sql_table과 class에 대해 fill은 헤더에 적용됩니다.

Want transparent?

x: {
  y
  y.style.fill: transparent
}
x.style.fill: PapayaWhip

Available patterns:

• dots
• lines
• grain

style.fill-pattern: dots
x -> y: hi
x.style.fill-pattern: lines
y.style.fill-pattern: grain

Integer between 1 and 15.

x -> y: hi {
  style: {
    stroke-width: 8
  }
}
x.style.stroke-width: 1

Integer between 0 and 10.

x -> y: hi {
  style: {
    stroke-dash: 3
  }
}
x.style.stroke-dash: 5

Integer between 0 and 20.

x -> y: hi
x.style.border-radius: 3
y.style.border-radius: 8

true or false.

x -> y: hi
x.style.shadow: true

true or false.

x -> y: hi
x.style.3d: true

true or false.

x -> y: hi
x.style.multiple: true

true or false.

x -> y: hi
x.style.double-border: true
y.shape: circle
y.style.double-border: true

현재 유일한 옵션은 mono를 지정하는 것입니다. 추가 옵션은 곧 제공됩니다.

x -> y: hi {
  style: {
    font: mono
  }
}
x.style.font: mono
y.style.font: mono

Integer between 8 and 100.

x -> y: hi {
  style: {
    font-size: 28
  }
}
x.style.font-size: 8
y.style.font-size: 55

CSS color name or hex code.

x -> y: hi {
  style: {
    font-color: red
  }
}
x.style.font-color: "\#f4a261"

sql_table과class에 대해서는 헤더 텍스트에만 font-color가 적용됩니다 (테마는 본문의 다른 색상을 제어합니다).

true or false.

x -> y: hi {
  style.animated: true
}

true or false.

x -> y: hi {
  style: {
    bold: true
  }
}
x.style.underline: true
y.style.italic: true
# By default, shape labels are bold. Bold has precedence over italic, so unbold to ee
# italic style
y.style.bold: false

일부 스타일은 루트 레벨에서 적용됩니다. 예를 들어, 다이어그램 배경색을 설정하려면 style.fill을 사용하십시오.

현재 지원되는 키워드 집합은 다음과 같습니다:

• fill: 다이어그램 배경색
• stroke: 다이어그램 주위의 프레임
• stroke-width
• stroke-dash
• double-border: 두 개의 프레임으로 인기있는 프레임 방법 중 하나입니다.

x -> y: hi
style: {
  fill: LightBlue
  stroke: FireBrick
  stroke-width: 2
}

대부분의 도형에서 너비와 높이를 지정할 수 있습니다.

direction: right

small jerry: "" {
  shape: image
  icon: https://static.wikia.nocookie.net/tomandjerry/images/4/46/JerryJumbo3-1-.jpg
  width: 200
  height: 200
}

med jerry: "" {
  shape: image
  icon: https://static.wikia.nocookie.net/tomandjerry/images/4/46/JerryJumbo3-1-.jpg
  width: 300
  height: 300
}

big jerry: "" {
  shape: image
  icon: https://static.wikia.nocookie.net/tomandjerry/images/4/46/JerryJumbo3-1-.jpg
  width: 500
  height: 400
}

big jerry -> med jerry -> small jerry

D2 can render diagrams to give the aesthetic of a hand-drawn sketch.

• In Terrastruct, you can enable this with hand-drawn mode.
• If you're using the CLI, this is enabled by the -sketch flag.
• https://play.d2lang.com supports this as well.

툴팁은 마우스 호버 시 나타나는 텍스트입니다. 두 가지 목적이 있습니다:

1. 보조 컨텍스트 추가
   • 객체에 설명을 추가하고 싶습니다. 모든 사람이 필요한 것은 아니지만 추가 정보가 필요한 사람들은 액세스할 수 있습니다.
2. 깔끔함
   • 다이어그램이 지저분해지고 있습니다. 더 많은 텍스트를 추가하는 대신, 일부를 툴팁에 넣을 수 있습니다.

x: { tooltip: Total abstinence is easier than perfect moderation }
y: { tooltip: Gee, I feel kind of LIGHT in the head now,\nknowing I can't make my satellite dish PAYMENTS! }
x -> y

이것을 시도해보세요. x와 y 위에 마우스를 올리면 툴팁이 있는 아이콘이 나타납니다.

정적 형식(PNG와 같은)으로 내보낼 때 D2는

1. 모든 아이콘이 번호로 바뀝니다.
2. 각 줄이 번호에 해당하는 부록이 추가됩니다.

Links are like tooltips, except you click to go to an external link.

x: I'm a Mac {
  link: https://apple.com
}
y: And I'm a PC {
  link: https://microsoft.com
}
x -> y: gazoontite