-- sql-icon --
without: {
  tableEx: {
    shape: sql_table
    a: b
  }
  classEx: {
    shape: class
    a: b
  }
  codeEx: |go
    a := 1
  |
  mdEx: |md
    # This is for all ill-treated fellows

    You will live a long, healthy, happy life and make bags of money.
  |
}

with: {
  tableEx: {
    shape: sql_table
    a: b
    icon: https://icons.terrastruct.com/essentials%2F213-alarm.svg
  }
  classEx: {
    shape: class
    a: b
    icon: https://icons.terrastruct.com/essentials%2F213-alarm.svg
  }
  codeEx: |go
    a := 1
  | {
    icon: https://icons.terrastruct.com/essentials%2F213-alarm.svg
  }
  mdEx: |md
    # This is for all ill-treated fellows

    You will live a long, healthy, happy life and make bags of money.
  | {
    icon: https://icons.terrastruct.com/essentials%2F213-alarm.svg
  }
}

without.tableEx -> with.tableEx
without.classEx -> with.classEx
without.codeEx -> with.codeEx
without.mdEx -> with.mdEx

-- theme-overrides --

direction: right
vars: {
  d2-config: {
    theme-overrides: {
      B1: "#2E7D32"
      B2: "#66BB6A"
      B3: "#A5D6A7"
      B4: "#C5E1A5"
      B5: "#E6EE9C"
      B6: "#FFF59D"

      AA2: "#0D47A1"
      AA4: "#42A5F5"
      AA5: "#90CAF9"

      AB4: "#F44336"
      AB5: "#FFCDD2"

      N1: "#2E2E2E"
      N2: "#2E2E2E"
      N3: "#595959"
      N4: "#858585"
      N5: "#B1B1B1"
      N6: "#DCDCDC"
      N7: "#DCDCDC"
    }
    dark-theme-overrides: {
      B1: "#2E7D32"
      B2: "#66BB6A"
      B3: "#A5D6A7"
      B4: "#C5E1A5"
      B5: "#E6EE9C"
      B6: "#FFF59D"

      AA2: "#0D47A1"
      AA4: "#42A5F5"
      AA5: "#90CAF9"

      AB4: "#F44336"
      AB5: "#FFCDD2"

      N1: "#2E2E2E"
      N2: "#2E2E2E"
      N3: "#595959"
      N4: "#858585"
      N5: "#B1B1B1"
      N6: "#DCDCDC"
      N7: "#DCDCDC"
    }
  }
}

logs: {
  shape: page
  style.multiple: true
}
user: User {shape: person}
network: Network {
  tower: Cell Tower {
    satellites: {
      shape: stored_data
      style.multiple: true
    }

    satellites -> transmitter
    satellites -> transmitter
    satellites -> transmitter
    transmitter
  }
  processor: Data Processor {
    storage: Storage {
      shape: cylinder
      style.multiple: true
    }
  }
  portal: Online Portal {
    UI
  }

  tower.transmitter -> processor: phone logs
}
server: API Server

user -> network.tower: Make call
network.processor -> server
network.processor -> server
network.processor -> server

server -> logs
server -> logs
server -> logs: persist

server -> network.portal.UI: display
user -> network.portal.UI: access {
  style.stroke-dash: 3
}

costumes: {
  shape: sql_table
  id: int {constraint: primary_key}
  silliness: int
  monster: int
  last_updated: timestamp
}

monsters: {
  shape: sql_table
  id: int {constraint: primary_key}
  movie: string
  weight: int
  last_updated: timestamp
}

costumes.monster -> monsters.id

-- connection-underline --

a -> b: hi {
  style.underline: true
}

-- none-fill --

vars: {
  d2-config: {
    # Origami theme code
    theme-id: 302
  }
}
a.style.fill-pattern: none
b

-- width-smaller-than-label --
b: hello there cat {
  shape: person
  width: 64
  height: 66
}

-- width-smaller-than-label-custom-pos --
x: {
  width: 20
  label: long label
  label.near: center-center
}

-- nested-spread-substitutions-regression --
vars: {
  dog1: Frido {
    shape: circle
  }
  my-house: {
    label: "Home"
  }
}

ok: {
  ...${my-house}
  dog1: {
    ...${dog1}
  }
  dog1 -> dog3
}

-- bidirectional-connection-animation --
a <-> b: {style.animated: true}
a <-> c: {style.animated: true}
a <-> d: {style.animated: true}
a <-> e: {style.animated: true}
f <-> g: {style.animated: true}
x -- x: {style.animated: true}

-- opacity-zero-route --
grid: {
  *.style.opacity: 0
  grid-columns: 3
  a
  b
  c
  d
  e
  f
  g
  h

  d.style.opacity: 1
}

out -> grid.d

-- sketch-mode-circle-arrowhead --
vars: {
  d2-config: {
    sketch: true
  }
}

a
b
a <-> b: {
  source-arrowhead: {
    shape: circle
    style.filled: false
  }
}

x
y
z
x <-> y <-> z: {
  source-arrowhead: {
    shape: circle
    style.filled: false
  }
  direction: right
}

-- sketch-bidirectional-connection-animation --
vars: {
  d2-config: {
    sketch: true
  }
}

a <-> b: {style.animated: true}
a <-> c: {style.animated: true}
a <-> d: {style.animated: true}
a <-> e
f <-> g: {style.animated: true}
x -- x: {style.animated: true}

-- sequence-edge-group-tall-edge-label --
Sequence: {
  shape: sequence_diagram
  System: System
  File: File
  A

  System Starts: {
    System <- File: One\nTwo\nThree\nFour\nFive\nSix
    System -> File: One\nTwo\nThree\nFour\nFive\nSix
    System -> File: One
    System -> File: Two
    System <- File: One\nTwo\nThree\nFour\nFive\nSix
    Alright: {
      System <- File: One\nTwo\nThree\nFour\nFive\nSix
    }
  }

  Okay: {
    A -> File: One\nTwo\nThree\nFour\nFive\nSix
  }
}

-- sequence-multiline-self-reference --
shape: sequence_diagram
x
y

x -> x: self referential long description which is\nmultirow\n3 rows
x -> x: self referential long description which is\nmultirow
x -> y: normal
y -> y: self referential long description which is\nmultirow\n3 rows

-- sequence-bounding-box --
backend.client: {
  shape: sequence_diagram
  client -> client: BO_ID -> D2_ID
}

-- sequence-multiline-alignment --
shape: sequence_diagram
a
b

b -> b: one\ntwo\nthree\nfour\nfive
b -> b: one\ntwo\nthree\nfour\nfive

a.req -> b: okay then

-- sequence-multiline-label --
shape: sequence_diagram
a
b

a -> b: okay then
a -> b: one\ntwo\nthree\nfour\nfive\nsix\nseven\neight\nnine\nten
a -> b: one\ntwo\nthree\nfour\nfive

-- sequence-fontsize --
shape: sequence_diagram
(** -> **)[*].style.font-size: 24
(** -> **)[*].style.font-color: black
Front-End
Libreria
CD

Front-End.t1 -> Libreria.t1: generatePresentationPayload()
Libreria.t1 -> Libreria.t1: Generar y Firmar\nPrueba de TitularidadPrueba de TitularidadPrueba de TitularidadPrueba de Titularidad
Libreria.t1 -> Front-End.t1: Presentacion Firmada

-- multiline-class-headers --
A: "<<enumeration>>\nAlignment"{
    shape: class

    LeftAligned
    CenterAligned
    RightAligned
    Justified
}

C: "Alignment"{
    shape: class

    LeftAligned
    CenterAligned
    RightAligned
    Justified
}

D: "Alignment\nOf\nAlignment\nOf"{
    shape: class

    LeftAligned
    CenterAligned
    RightAligned
    Justified
}

-- connection-style-fill --
shape: sequence_diagram
customer
employee
rental
item

alice
bob

(* -> *)[*].style.fill: black
(* -> *)[*].style.font-color: white

customer -> employee: "rent(this, i, p)"
employee -> rental: "new(this, i, p)"
rental -> employee
employee -> rental: isValid()
rental -> item: isRentable(c)
item -> customer: is(Adult)
customer -> item: true

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

-- extended-ascii --
1: |md
  ÇéþüðæØÅßñò
|
2: |md
  òØõùßÍÿåÆ
|
3: |md
  çÆÐÞ©ßþúí
|
4: |md
  ÉáøÿÑö
|
1 -> 2 -> 3 -> 4 -> 1

-- unicode --
■: |md
  ■ foo bar
|
□: |md
  □ foo bar
|
●: |md
  ● foo bar
|
○: |md
  ○ foo bar
|
◆: |md
  ◆ foo bar
|
◇: |md
  ◇ foo bar
|
▲: |md
  ▲ foo bar
|
△: |md
  △ foo bar
|
▼: |md
  ▼ foo bar
|
▽: |md
  ▽ foo bar
|
※: |md
  ※ foo bar
|
◎: |md
  ◎ foo bar
|

-- gradient --
style.fill: "radial-gradient(circle, white 0%, #8A2BE2 60%, #4B0082 100%)"
gradient: {
  style.fill: "linear-gradient(#f69d3c, #3f87a6)"
  style.stroke: "linear-gradient(to top right, red, blue)"
  style.font-color: "radial-gradient(red, yellow, green, cyan, blue)"
}
colors: {
  style.fill: "linear-gradient(45deg, rgba(255,0,0,0.5) 0%, rgba(0,0,255,0.5) 100%)"
  style.stroke: "linear-gradient(to right, red, blue, green)"
  style.font-color: "linear-gradient(to bottom right, red 0%, yellow 25%, green 50%, cyan 75%, blue 100%)"
}
gradient -> colors