D2 2. Special Object - swkim0128/PARA GitHub Wiki


type: D2 archive: false

Text & Code

Standalone text is Markdown

Most languages are supported

Latex

How do I position text?

Near another shape

Near a constant

Code

Advanced: Non-Markdown text

Advanced: Block strings

Advanced: Latex plugins

Icons & Images

Add shape: image for standalone icon shapes

SQL Tables

Basics

Foreign Keys

Example

Classes

Basics

Visibilities

Sequence Diagrams

Rules

Scoping

Ordering

Features

Sequence diagrams are D2 objects

Spans

Groups

Notes

Self-messages

Customization

Glossary

Text & Code


Standalone text is Markdown

explanation: |md
  # I can do headers
  - lists
  - lists

  And other normal markdown stuff
|

Most languages are supported

λŒ€λΆ€λΆ„μ˜ 경우 D2λŠ” 쀑ꡭ어, 일본어, ν•œκ΅­μ–΄μ™€ 같은 비라틴 문자λ₯Ό ν¬ν•¨ν•˜μ—¬ μ‚¬μš©ν•˜κ³  싢은 μ–΄λ–€ μ–Έμ–΄λ“ μ§€ μ§€μ›ν•©λ‹ˆλ‹€. 심지어 이λͺ¨μ§€λ„ κ°€λŠ₯ν•©λ‹ˆλ‹€!

Latex

Latex μ–Έμ–΄ 블둝을 μ§€μ •ν•˜λŠ” 데 latex λ˜λŠ” texλ₯Ό μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

plankton -> formula: will steal
formula: {
  equation: |latex
    \\lim_{h \\rightarrow 0 } \\frac{f(x+h)-f(x)}{h}
  |
}

Latex 블둝에 λŒ€ν•΄ μ£Όμ˜ν•΄μ•Ό ν•  λͺ‡ κ°€μ§€ 사항이 μžˆμŠ΅λ‹ˆλ‹€:

  • μœ„μ˜ μ˜ˆμ—μ„œ λ³Ό 수 μžˆλ“―μ΄, μ΄μŠ€μΌ€μ΄ν”„ 문자둜 μ‚¬μš©λ˜λŠ” \λ₯Ό μ΄μŠ€μΌ€μ΄ν”„ν•΄μ•Ό ν•©λ‹ˆλ‹€. \\λ₯Ό μ‚¬μš©ν•œ 것을 μ°Έκ³ ν•˜μ„Έμš”.
  • 라텍 블둝은 font-size μŠ€νƒ€μΌμ„ μ μš©ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. λŒ€μ‹  라텍 슀크립트 λ‚΄μ—μ„œ λͺ…λ Ήμ–΄λ₯Ό μ‚¬μš©ν•˜μ—¬ μŠ€νƒ€μΌμ„ μ μš©ν•΄μ•Ό ν•©λ‹ˆλ‹€:
    • \tiny{ }
    • \small{ }
    • \normal{ }
    • \large{ }
    • \huge{ }
  • 기술적으둜, 이것은 MathJaxλ₯Ό μ‚¬μš©ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. 이것은 μ™„μ „ν•œ λΌν…μŠ€κ°€ μ•„λ‹™λ‹ˆλ‹€ (μ™„μ „ν•œ λΌν…μŠ€λŠ” λ¬Έμ„œ λ ˆμ΄μ•„μ›ƒ 엔진이 ν¬ν•¨λ©λ‹ˆλ‹€). D2의 λΌν…μŠ€ 블둝은 μˆ˜ν•™μ μΈ ν‘œκΈ°λ²•μ„ ν‘œμ‹œν•˜κΈ° μœ„ν•œ 것이며, κΈ°μ‘΄ λΌν…μŠ€ λ¬Έμ„œμ˜ ν˜•μ‹μ„ μ§€μ›ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. μ§€μ›λ˜λŠ” λͺ¨λ“  λͺ…λ Ήμ–΄ λͺ©λ‘μ€ μ—¬κΈ°λ₯Ό μ°Έμ‘°ν•˜μ‹­μ‹œμ˜€.

How do I position text?

일반적으둜, κΈ΄ ν˜•νƒœμ˜ ν…μŠ€νŠΈλŠ” λ‹€μ΄μ–΄κ·Έλž¨μ˜ νŠΉμ • μ˜μ—­μ— μžμ„Έν•œ λ‚΄μš©μ„ μΆ”κ°€ν•©λ‹ˆλ‹€. near ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜μ—¬ μ–΄λŠ μœ„μΉ˜μ— μΆ”κ°€ν• μ§€ μ§€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

You can set near to either

  1. the ID of another shape
  2. a constant value

Near another shape

aws: {
  load_balancer -> api
  api -> db
}
gcloud: {
  auth -> db
}

gcloud -> aws

explanation: |md
  # Why do we use AWS?
  - It has more uptime than GCloud
  - We have free credits
| {
  near: aws
}

ν…μŠ€νŠΈκ°€ aws λ…Έλ“œ κ·Όμ²˜μ— μœ„μΉ˜ν•˜κ³  gcloud λ…Έλ“œ κ·Όμ²˜μ— μœ„μΉ˜ν•˜μ§€ μ•ŠλŠ” 것을 μ£Όλͺ©ν•΄λ³΄μ„Έμš”.

Near a constant

Important

POSSIBLE CONSTANT VALUEStop-left, top-center, top-right,center-left, center-right,bottom-left, bottom-center, bottom-right

title: |md
  # A winning strategy
| { near: top-center }

poll the people -> results
results -> unfavorable -> poll the people
results -> favorable -> will of the people

Code

μ½”λ“œ λΈ”λ‘μ˜ ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄λ₯Ό mdμ—μ„œ λ‹€λ₯Έ μ–Έμ–΄λ‘œ λ³€κ²½

aws: {
  load_balancer -> api
  api -> db
}
gcloud: {
  auth -> db
}

gcloud -> aws

explanation: |go
  awsSession := From(c.Request.Context())
  client := s3.New(awsSession)

  ctx, cancelFn := context.WithTimeout(c.Request.Context(), AWS_TIMEOUT)
  defer cancelFn()
| {
  near: aws
}

Advanced: Non-Markdown text

일뢀 κ²½μš°μ—λŠ” λ§ˆν¬λ‹€μš΄ ν…μŠ€νŠΈκ°€ ν•„μš”ν•˜μ§€ μ•Šμ„ 수 μžˆμŠ΅λ‹ˆλ‹€. μ•„λ§ˆλ„ λ§ˆν¬λ‹€μš΄μ΄ λ§ˆμŒμ— λ“€μ§€ μ•Šκ±°λ‚˜ D2μ—μ„œ μ‚¬μš©ν•˜λŠ” GitHub μŠ€νƒ€μΌλ§μ„ μ›ν•˜μ§€ μ•Šμ„ μˆ˜λ„ 있고, λ„ν˜•μ„ λΉ λ₯΄κ²Œ ν…μŠ€νŠΈλ‘œ λ³€κ²½ν•˜λ €κ³  ν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€. κ·Έλ•ŒλŠ” shape: text둜 μ„€μ •ν•˜λ©΄ λ©λ‹ˆλ‹€.

title: A winning strategy {
  shape: text
  near: top-center
  style: {
    font-size: 55
    italic: true
  }
}

poll the people -> results
results -> unfavorable -> poll the people
results -> favorable -> will of the people

Advanced: Block strings

λ§Œμ•½ TypeScriptλ₯Ό μž‘μ„±ν•˜λŠ” 경우 νŒŒμ΄ν”„ 기호 |κ°€ 일반적으둜 μ‚¬μš©λ©λ‹ˆλ‹€. κ·Έλ ‡λ‹€λ©΄ 또 λ‹€λ₯Έ νŒŒμ΄ν”„ ||λ₯Ό μΆ”κ°€ν•˜λ©΄ λ©λ‹ˆλ‹€.

my_code: ||ts
  declare function getSmallPet(): Fish | Bird;
||

μ‹€μ œλ‘œ Typescript도 || μ„ μ‚¬μš©ν•˜κΈ° λ•Œλ¬Έμ—, κ·Έλ ‡κ²Œ ν•˜λ©΄ μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. 계속 μ§„ν–‰ν•©μ‹œλ‹€.

my_code: |||ts
  declare function getSmallPet(): Fish | Bird;
  const works = (a > 1) || (b < 2)
|||

μ•„λ§ˆλ„ 삼쀑 νŒŒμ΄ν”„κ°€ μ‚¬μš©λ˜λŠ” μ–Έμ–΄λ‚˜ μ‹œλ‚˜λ¦¬μ˜€κ°€ μžˆμ„ κ²ƒμž…λ‹ˆλ‹€. D2λŠ” μ‹€μ œλ‘œ 첫 번째 νŒŒμ΄ν”„ 뒀에 μ•ŒνŒŒλ²³, 숫자, 곡백 λ˜λŠ” _κ°€ μ•„λ‹Œ 특수 기호λ₯Ό μ‚¬μš©ν•  수 있게 ν•΄μ€λ‹ˆλ‹€:

# Much cleaner!
my_code: |`ts
  declare function getSmallPet(): Fish | Bird;
  const works = (a > 1) || (b < 2)
`|

Advanced: Latex plugins

D2μ—λŠ” λ‹€μŒκ³Ό 같은 λΌν…μŠ€ ν”ŒλŸ¬κ·ΈμΈμ΄ ν¬ν•¨λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€:

amscd plugin: {
  ex: |tex
\\begin{CD} B @>{\\text{very long label}}>> C S^{{\\mathcal{W}}_\\Lambda}\\otimes T @>j>> T\\\\ @VVV V \\end{CD}
|
}

braket plugin: {
  ex: |tex
\\bra{a}\\ket{b}
|
}

cancel plugin: {
  ex: |tex
\\cancel{Culture + 5}
|
}

color plugin: {
  ex: |tex
\\textcolor{red}{y} = \\textcolor{green}{\\sin} x
|
}

gensymb plugin: {
  ex: |tex
\\lambda = 10.6\\,\\micro\\mathrm{m}
|
}

mhchem plugin: {
  ex: |tex
\ce{SO4^2- + Ba^2+ -> BaSO4 v}
|
}

physics plugin: {
  ex: |tex
\\var{F[g(x)]}
\\dd(\\cos\\theta)
|
}

multilines: {
  ex: |tex
\\displaylines{x = a + b \\\\ y = b + c}
\\sum_{k=1}^{n} h_{k} \\int_{0}^{1} \\bigl(\\partial_{k} f(x_{k-1}+t h_{k} e_{k}) -\\partial_{k} f(a)\\bigr) \\,dt
|
}

Icons & Images


Icons and images are an essential part of production-ready diagrams.

You can use any URL as value.

μ•„μ΄μ½˜κ³Ό μ΄λ―Έμ§€λŠ” μ œν’ˆ μƒμ‚°μš© λ‹€μ΄μ–΄κ·Έλž¨μ˜ ν•„μˆ˜μ μΈ λΆ€λΆ„μž…λ‹ˆλ‹€.

κ°’μœΌλ‘œλŠ” μ–΄λ–€ URL이든 μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

my network: {
  icon: https://icons.terrastruct.com/infra/019-network.svg
}

μ•„μ΄μ½˜ λ°°μΉ˜λŠ” μžλ™μž…λ‹ˆλ‹€. λ ˆμ΄μ•„μ›ƒ 엔진에 따라 κ³ λ € 사항이 λ‹€λ₯΄μ§€λ§Œ, 라벨과 ν•¨κ»˜ μ‘΄μž¬ν•˜λŠ”μ§€, μ»¨ν…Œμ΄λ„ˆμΈμ§€ μ—¬λΆ€ 등이 μ•„μ΄μ½˜μ˜ 가리지 μ•Šλ„λ‘ λ°°μΉ˜ν•˜λŠ”λ° 영ν–₯을 λ―ΈμΉ©λ‹ˆλ‹€. λ‹€μŒ λ‹€μ΄μ–΄κ·Έλž¨μ—μ„œλŠ” μ»¨ν…Œμ΄λ„ˆ μ•„μ΄μ½˜μ΄ μ™Όμͺ½ 상단에 μœ„μΉ˜ν•˜κ³  μ»¨ν…Œμ΄λ„ˆκ°€ μ•„λ‹Œ μ•„μ΄μ½˜μ΄ 쀑앙에 μœ„μΉ˜ν•˜λŠ” 것을 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€.

vpc: VPC 1 10.1.0.0./16 {
  icon: https://icons.terrastruct.com/aws%2F_Group%20Icons%2FVirtual-private-cloud-VPC_light-bg.svg
  style: {
    stroke: green
    font-color: green
    fill: white
  }
  az: Availability Zone A {
    style: {
      stroke: blue
      font-color: blue
      stroke-dash: 3
      fill: white
    }
    firewall: Firewall Subnet A {
      icon: https://icons.terrastruct.com/aws%2FNetworking%20&%20Content%20Delivery%2FAmazon-Route-53_Hosted-Zone_light-bg.svg
      style: {
        stroke: purple
        font-color: purple
        fill: "\#e1d5e7"
      }
      ec2: EC2 Instance {
        icon: https://icons.terrastruct.com/aws%2FCompute%2F_Instance%2FAmazon-EC2_C4-Instance_light-bg.svg
      }
    }
  }
}

Add shape: image for standalone icon shapes

server: {
  shape: image
  icon: https://icons.terrastruct.com/tech/022-server.svg
}

github: {
  shape: image
  icon: https://icons.terrastruct.com/dev/github.svg
}

server -> github

SQL Tables


Basics

D2μ—μ„œλŠ” sql_table λͺ¨μ–‘을 μ‚¬μš©ν•˜μ—¬ μ—”ν‹°ν‹°-관계 λ‹€μ΄μ–΄κ·Έλž¨(ERD)을 μ‰½κ²Œ 그릴 수 μžˆμŠ΅λ‹ˆλ‹€. λ‹€μŒμ€ μ΅œμ†Œν•œμ˜ μ˜ˆμ œμž…λ‹ˆλ‹€:

my_table: {
  shape: sql_table
  # This is defined using the shorthand syntax for labels discussed in the containers section.
  # But here it's for the type of a constraint.
  # The id field becomes a map that looks like {type: int; constraint: primary_key}
  id: int {constraint: primary_key}
  last_updated: timestamp with time zone
}

SQL ν…Œμ΄λΈ” λͺ¨μ–‘μ˜ 각 ν‚€λŠ” 행을 μ •μ˜ν•©λ‹ˆλ‹€. 각 ν–‰μ˜ κΈ°λ³Έ κ°’(콜둠 λ’€μ—μžˆλŠ” 것)은 ν•΄λ‹Ή ν–‰μ˜ μœ ν˜•μ„ μ •μ˜ν•©λ‹ˆλ‹€.

각 ν–‰μ˜ μ œμ•½ 쑰건 값은 ν•΄λ‹Ή SQL μ œμ•½ 쑰건을 μ •μ˜ν•©λ‹ˆλ‹€. D2λŠ” μΈμ‹ν•˜μ—¬ 쀄일 수 μžˆμŠ΅λ‹ˆλ‹€:

constraint short
primary_key PK
foreign_key FK
unique UNQ

ν•˜μ§€λ§Œ μ›ν•˜λŠ” μ œμ•½ 쑰건을 μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μΈμ‹λ˜μ§€ μ•ŠμœΌλ©΄ λ‹¨μΆ•λ˜μ§€ μ•Šμ„ λΏμž…λ‹ˆλ‹€.

Foreign Keys

두 ν…Œμ΄λΈ” κ°„ μ™Έλž˜ ν‚€ 연결을 μ •μ˜ν•˜λŠ” λ°©λ²•μ˜ μ˜ˆμ‹œμž…λ‹ˆλ‹€:

objects: {
  shape: sql_table
  id: int {constraint: primary_key}
  disk: int {constraint: foreign_key}

  json: jsonb  {constraint: unique}
  last_updated: timestamp with time zone
}

disks: {
  shape: sql_table
  id: int {constraint: primary_key}
}

objects.disk -> disks.id

μ£Ό ν‚€ λ˜λŠ” μ™Έλž˜ ν‚€ μœ„μ— μ»€μ„œλ₯Ό 올리면 ν•΄λ‹Ή ν‚€κ°€ κ°•μ‘° ν‘œμ‹œλ˜λŠ” 것을 μ•Œ 수 μžˆμŠ΅λ‹ˆλ‹€.

Example

λ‹€λ₯Έ λͺ¨λ“  λ„ν˜•λ“€κ³Ό λ§ˆμ°¬κ°€μ§€λ‘œ, sql_tables을 μ»¨ν…Œμ΄λ„ˆμ— μ€‘μ²©μ‹œν‚€κ³  λ‹€λ₯Έ λͺ¨μ–‘μœΌλ‘œλΆ€ν„° μ—£μ§€λ₯Ό μ •μ˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€. λ‹€μŒμ€ μ˜ˆμ‹œμž…λ‹ˆλ‹€:

cloud: {
  disks: {
    shape: sql_table
    id: int {constraint: primary_key}
  }
  blocks: {
    shape: sql_table
    id: int {constraint: primary_key}
    disk: int {constraint: foreign_key}
    blob: blob
  }
  blocks.disk -> disks.id

  AWS S3 Vancouver -> disks
}

Classes


Basics

D2 fully supports UML Class diagrams. Here's a minimal example:

D2λŠ” UML 클래슀 λ‹€μ΄μ–΄κ·Έλž¨μ„ μ™„μ „νžˆ μ§€μ›ν•©λ‹ˆλ‹€. λ‹€μŒμ€ μ΅œμ†Œν•œμ˜ μ˜ˆμ‹œμž…λ‹ˆλ‹€:

MyClass: {
  shape: class

  field: "[]string"
  method(a uint64): (x, y int)
}

클래슀의 각 ν‚€λŠ” ν•„λ“œ λ˜λŠ” λ©”μ†Œλ“œλ₯Ό μ •μ˜ν•©λ‹ˆλ‹€.

ν•„λ“œ ν‚€μ˜ 값은 ν•΄λ‹Ή ν•„λ“œμ˜ νƒ€μž…μž…λ‹ˆλ‹€.

(λ₯Ό ν¬ν•¨ν•˜λŠ” λͺ¨λ“  ν‚€λŠ” λ°˜ν™˜ νƒ€μž…μ΄ μžˆλŠ” λ©”μ†Œλ“œμž…λ‹ˆλ‹€.

값이 μ—†λŠ” λ©”μ†Œλ“œ ν‚€λŠ” λ°˜ν™˜ νƒ€μž…μ΄ voidμž…λ‹ˆλ‹€.

Visibilities

ν•„λ“œ/λ©”μ†Œλ“œ κ°€μ‹œμ„±μ„ λ‚˜νƒ€λ‚΄λŠ” UML μŠ€νƒ€μΌ 접두사λ₯Ό μ‚¬μš©ν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.

visiblity prefix meaning
none public
+ public
- private
# protected

λ‹€μŒ 링크λ₯Ό μ°Έμ‘°ν•˜μ‹­μ‹œμ˜€: https://www.uml-diagrams.org/visibility.html

λ‹€μŒμ€ μ„œλ‘œ λ‹€λ₯Έ κ°€μ‹œμ„±κ³Ό 더 λ³΅μž‘ν•œ μœ ν˜•μ„ κ°–λŠ” μ˜ˆμ‹œμž…λ‹ˆλ‹€:

D2 Parser: {
  shape: class

  # Default visibility is + so no need to specify.
  +reader: io.RuneReader
  readerPos: d2ast.Position

  # Private field.
  -lookahead: "[]rune"

  # Protected field.
  # We have to escape the # to prevent the line from being parsed as a comment.
  \#lookaheadPos: d2ast.Position

  +peek(): (r rune, eof bool)
  rewind()
  commit()

  \#peekn(n int): (s string, eof bool)
}

"github.com/terrastruct/d2parser.git" -> D2 Parser

Sequence Diagrams


μ‹œν€€μŠ€ λ‹€μ΄μ–΄κ·Έλž¨μ€ κ°œμ²΄μ— shape: sequence_diagram μ„ μ„€μ •ν•˜μ—¬ μƒμ„±λ©λ‹ˆλ‹€.

shape: sequence_diagram
alice -> bob: What does it mean\nto be well-adjusted?
bob -> alice: The ability to play bridge or\ngolf as if they were games.

Rules

λ‹€λ₯Έ 도ꡬ와 달리, μˆœμ„œλ„λ₯Ό μœ„ν•΄ λ°°μ›Œμ•Ό ν•  νŠΉλ³„ν•œ ꡬ문이 μ—†μŠ΅λ‹ˆλ‹€. κ·œμΉ™μ€ D2 μ „μ²΄μ—μ„œ 거의 λ™μΌν•˜λ©°, 두 κ°€μ§€ μ£Όλͺ©ν• λ§Œν•œ 차이점이 μžˆμŠ΅λ‹ˆλ‹€.

Scoping

μ‹œν€€μŠ€ λ‹€μ΄μ–΄κ·Έλž¨μ˜ μžμ‹ μš”μ†Œλ“€μ€ μ‹œν€€μŠ€ λ‹€μ΄μ–΄κ·Έλž¨ μ „μ²΄μ—μ„œ λ™μΌν•œ λ²”μœ„λ₯Ό κ³΅μœ ν•©λ‹ˆλ‹€.

예λ₯Ό λ“€μ–΄:

Office chatter: {
  shape: sequence_diagram
  alice: Alice
  bob: Bobby
  awkward small talk: {
    alice -> bob: uhm, hi
    bob -> alice: oh, hello
    icebreaker attempt: {
      alice -> bob: what did you have for lunch?
    }
    unfortunate outcome: {
      bob -> alice: that's personal
    }
  }
}

μ‹œν€€μŠ€ λ‹€μ΄μ–΄κ·Έλž¨ μ™ΈλΆ€μ—μ„œλŠ” alice와 bob의 μ»¨ν…Œμ΄λ„ˆ λ²”μœ„κ°€ λ‹€λ₯΄κΈ° λ•Œλ¬Έμ— μ—¬λŸ¬ μΈμŠ€ν„΄μŠ€κ°€ μžˆμ„ 수 μžˆμŠ΅λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ shape: sequence_diagram ν•˜μœ„μ— μ€‘μ²©λ˜λ©΄ λ™μΌν•œ alice와 bob을 μ°Έμ‘°ν•©λ‹ˆλ‹€.

Ordering

D2의 λ‹€λ₯Έ κ³³μ—μ„œλŠ” μˆœμ„œ κ°œλ…μ΄ μ‘΄μž¬ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. λ‹€λ₯Έ 연결을 μ •μ˜ν•œ 후에 연결을 μ •μ˜ν•˜λ©΄ μ‹œκ°μ μœΌλ‘œ λ‚˜νƒ€λ‚˜μ§€ μ•Šμ„ 수 μžˆμŠ΅λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ μˆœμ„œλ„μ—μ„œλŠ” μˆœμ„œκ°€ μ€‘μš”ν•©λ‹ˆλ‹€. λͺ¨λ“  것을 μ •μ˜ν•˜λŠ” μˆœμ„œκ°€ λ‚˜νƒ€λ‚˜λŠ” μˆœμ„œμž…λ‹ˆλ‹€.

이것은 λ°°μš°λ„ ν¬ν•¨λ©λ‹ˆλ‹€. νŠΉλ³„νžˆ κ·Έλ£Ήμ—μ„œ 처음 λ‚˜νƒ€λ‚  λ•Œλ₯Ό μ œμ™Έν•˜κ³ λŠ” λͺ…μ‹œ 적으둜 배우λ₯Ό μ •μ˜ ν•  ν•„μš”λŠ” μ—†μ§€λ§Œ, νŠΉμ • μˆœμ„œλ₯Ό μ •μ˜ν•˜λ €λ©΄ κ·Έλ ‡κ²Œ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

shape: sequence_diagram
# Remember that semicolons allow multiple objects to be defined in one line
# Actors will appear from left-to-right as a, b, c, d...
a; b; c; d
# ... even if the connections are in a different order
c -> d
d -> a
b -> d

Features

Sequence diagrams are D2 objects

λ‹€λ₯Έ D2 객체와 λ§ˆμ°¬κ°€μ§€λ‘œ, 이듀은 포함, μ—°κ²°, 라벨 λ³€κ²½, μž¬μŠ€νƒ€μΌλ§ 및 λ‹€λ₯Έ 객체와 λ§ˆμ°¬κ°€μ§€λ‘œ 처리될 수 μžˆμŠ΅λ‹ˆλ‹€.

direction: right
Before and after becoming friends: {
  2007: Office chatter in 2007 {
    shape: sequence_diagram
    alice: Alice
    bob: Bobby
    awkward small talk: {
      alice -> bob: uhm, hi
      bob -> alice: oh, hello
      icebreaker attempt: {
        alice -> bob: what did you have for lunch?
      }
      unfortunate outcome: {
        bob -> alice: that's personal
      }
    }
  }

  2012: Office chatter in 2012 {
    shape: sequence_diagram
    alice: Alice
    bob: Bobby
    alice -> bob: Want to play with ChatGPT?
    bob -> alice: Yes!
    bob -> alice.play: Write a play...
    alice.play -> bob.play: about 2 friends...
    bob.play -> alice.play: who find love...
    alice.play -> bob.play: in a sequence diagram
  }

  2007 -> 2012: Five\nyears\nlater
}

Spans

μŠ€νŒ¬μ€ μ‹œν€€μŠ€ λ‹€μ΄μ–΄κ·Έλž¨ λ‚΄μ—μ„œ μƒν˜Έμž‘μš©μ˜ μ‹œμž‘κ³Ό 끝을 μ „λ‹¬ν•©λ‹ˆλ‹€.

앑터에 μ€‘μ²©λœ 객체λ₯Ό μ—°κ²°ν•˜μ—¬ μŠ€νŒ¬μ„ μ§€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

shape: sequence_diagram
alice.t1 -> bob
alice.t2 -> bob.a
alice.t2.a -> bob.a
alice.t2.a <- bob.a
alice.t2 <- bob.a

Groups

그룹은 일련의 λ‹€μ΄μ–΄κ·Έλž¨ 쀑 일뢀λ₯Ό λΌλ²¨λ§ν•˜λŠ” 데 도움이 λ©λ‹ˆλ‹€.

μš°λ¦¬λŠ” λ²”μœ„ κ·œμΉ™μ„ μ„€λͺ…ν•  λ•Œ 이전 μ˜ˆμ œμ—μ„œ 이λ₯Ό λ³Ό 수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€. 더 ꡬ체적으둜 λ§ν•˜λ©΄, κ·Έλ£Ήμ΄λž€ 아무것과도 μ—°κ²°λ˜μ–΄ μžˆμ§€ μ•Šμ§€λ§Œ μ—°κ²° λ˜λŠ” 객체가 ν¬ν•¨λœ sequence_diagram λͺ¨μ–‘ λ‚΄λΆ€μ˜ μ»¨ν…Œμ΄λ„ˆμž…λ‹ˆλ‹€.

shape: sequence_diagram
# Predefine actors
alice; bob
shower thoughts: {
  alice -> bob: A physicist is an atom's way of knowing about atoms.
  alice -> bob: Today is the first day of the rest of your life.
}
life advice: {
  bob -> alice: If all else fails, lower your standards.
}

Notes

λ…ΈνŠΈλŠ” μ—°κ²°λœ ν•­λͺ©μ΄ μ—†λŠ” λ°°μš°μ— λŒ€ν•΄ 쀑첩 객체λ₯Ό μ •μ˜ν•˜μ—¬ μ„ μ–Έλ©λ‹ˆλ‹€.

shape: sequence_diagram
alice -> bob
bob."In the eyes of my dog, I'm a man."
# Notes can go into groups, too
important insight: {
  bob."Cold hands, no gloves."
}
bob -> alice: Chocolate chip.

Self-messages

μ•‘ν„°μ—μ„œ 자기 μžμ‹ μœΌλ‘œ μ…€ν”„-μ°Έμ‘° λ©”μ‹œμ§€λ₯Ό μ„ μ–Έν•  수 μžˆμŠ΅λ‹ˆλ‹€.

shape: sequence_diagram
son -> father: Can I borrow your car?
friend -> father: Never lend your car to anyone to whom you have given birth.
father -> father: internal debate ensues

Customization

λ‹€λ₯Έ 것과 λ§ˆμ°¬κ°€μ§€λ‘œ λͺ¨μ–‘κ³Ό 연결을 μŠ€νƒ€μΌλ§ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ—¬κΈ°μ„œλŠ” 일뢀 λ©”μ‹œμ§€λ₯Ό μ μ„ μœΌλ‘œ λ§Œλ“€κ³  λͺ¨μ–‘을 λ°°μš°μžμ—κ²Œ μ„€μ •ν•©λ‹ˆλ‹€.

shape: sequence_diagram
scorer: { shape: person }
scorer.t -> itemResponse.t: getItem()
scorer.t <- itemResponse.t: item {
    stroke-dash: 5
}

scorer.t -> item.t1: getRubric()
scorer.t <- item.t1: rubric {
    stroke-dash: 5
}

scorer.t -> essayRubric.t: applyTo(essayResp)
itemResponse -> essayRubric.t.c
essayRubric.t.c -> concept.t: match(essayResponse)
scorer <- essayRubric.t: score {
    stroke-dash: 5
}

scorer.t -> itemOutcome.t1: new
scorer.t -> item.t2: getNormalMinimum()
scorer.t -> item.t3: getNormalMaximum()

scorer.t -> itemOutcome.t2: setScore(score)
scorer.t -> itemOutcome.t3: setFeedback(missingConcepts)

Glossary

⚠️ **GitHub.com Fallback** ⚠️