-- 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: foobar {style.font-color: red; style.stroke: red; style.fill: "radial-gradient(#ffffff, #000000)"}

-- var_in_markdown --
vars: {
  service-x: Kube
}
x: ${service-x}
description: |md
  ${service-x} is a service

  ```
  Let ${y} be ${x}
  ```
|
b -> description -> a

-- md-tables --
# Financial table
savings: ||md
  | Month    | Savings | Expenses | Balance |
  | -------- | ------- | -------- | ------- |
  | January  | $250    | $150     | $100    |
  | February | $80     | $200     | -$120   |
  | March    | $420    | $180     | $240    |
||

# Simple 2x2 table
status: ||md
  | Status | Count |
  | ------ | ----- |
  | Done   | 42    |
  | Todo   | 17    |
||

# Long table with many rows
metrics: ||md
  | Metric    | Value   |
  | --------- | ------- |
  | Uptime    | 99.9%   |
  | Latency   | 150ms   |
  | Errors    | 0.01%   |
  | Requests  | 15k/min |
  | CPU       | 45%     |
  | Memory    | 68%     |
  | Disk      | 72%     |
  | Network   | 33%     |
||

# Connect tables with labeled edges
savings -> status: Triggers {
  style: {
    stroke-dash: 5
  }
}
status -> metrics: Monitors {
  style: {
    stroke-width: 2
  }
}

# Add some styling
savings.style: {
  fill: "#e8f4f8"
  stroke: "#4a90e2"
}

status.style: {
  fill: "#f8e8e8"
  stroke: "#e24a4a"
}

metrics.style: {
  fill: "#f0f8e8"
  stroke: "#82e24a"
}

# Container for financial data
financial: {
  label: "Financial Overview"
  style.stroke-width: 2

  monthly: ||md
    | Month     | Revenue  | Costs    | Margin |
    | --------- | -------- | -------- | ------ |
    | January   | $25,000  | $18,000  | 28%    |
    | February  | $28,500  | $19,200  | 33%    |
    | March     | $31,200  | $21,500  | 31%    |
  ||

  quarterly: ||md
    | Quarter | Target | Actual | Variance |
    |:--------|-------:|:------:|:---------|
    | Q1 2024 | $75K   | $84.7K | +12.9%   |
    | Q2 2024 | $82K   | -      | -        |
  ||

  monthly -> quarterly: "Aggregates"
}

# Container for system metrics
monitoring: {
  label: "System Health"
  style.3d: true

  availability: ||md
    | Service    | Status | Uptime | Last Incident |
    |:-----------|:------:|:------:|:--------------|
    | API        | ✅     | 99.9%  | 15 days ago   |
    | Database   | ✅     | 99.8%  | 3 days ago    |
    | Cache      | ⚠️     | 98.5%  | 1 hour ago    |
  ||

  performance: ||md
    | Metric          |  P50  |  P90  |  P99  |
    |:----------------|:-----:|:-----:|:-----:|
    | Response Time   | 120ms | 350ms | 750ms |
    | DB Query Time   |  45ms | 180ms | 450ms |
    | Cache Latency   |   5ms |  12ms |  30ms |
  ||

  availability -> performance: "Affects"
}

# Container for project status
projects: {
  label: "Project Tracking"
  style.stroke: "#4a90e2"
  style.double-border: true

  status: ||md
    | Project | Priority | Progress | Due Date | Owner |
    |---------|:--------:|:--------:|:---------|:------|
    | Alpha   | HIGH     | ![p](https://progress.com/80) 80% | 2024-04-01 | Alice |
    | Beta    | MEDIUM   | ![p](https://progress.com/45) 45% | 2024-05-15 | Bob   |
    | Gamma   | LOW      | ![p](https://progress.com/20) 20% | 2024-06-30 | Carol |
  ||

  risks: ||md
    | Risk ID | Description | Impact | Mitigation |
    |:-------:|:------------|:------:|:-----------|
    | R1      | Resource shortage | 🔴 High | Hire contractors |
    | R2      | Technical debt | 🟡 Med | Code review |
    | R3      | Scope creep | 🟢 Low | Clear requirements |
  ||
}

# Container for team stats
team: {
  label: "Team Analytics"
  style.fill: "#f5f5f5"

  velocity: ||md
    | Sprint | Points | Completed | Carryover |
    |:-------|:------:|:---------:|:---------:|
    | SP-1   | 34     | 30        | 4         |
    | SP-2   | 38     | 35        | 3         |
    | SP-3   | 42     | 40        | 2         |
    | Average| 38     | 35        | 3         |
  ||
}

# Connect containers
financial -> monitoring: "Impacts"
monitoring -> projects: "Informs" {
  style.stroke-dash: 5
}
projects -> team: "Assigns" {
  style.animated: true
}

# Styling
financial.style.fill: "#e8f4f8"
monitoring.style.fill: "#f8e8e8"
projects.style.fill: "#e8f8e8"
team.style.fill: "#f8f0e8"

-- sql-table-reserved --
my_table: {
  shape: sql_table
  icon: https://static.wikia.nocookie.net/tomandjerry/images/4/46/JerryJumbo3-1-.jpg
  width: 200
  height: 200
  "shape": string
  "icon": string
  "width": int
  "height": int
}

x -> my_table."shape"

-- single-backslash-latex --
formula: {
  equation: |latex
    \begin{equation} \label{eq1}
    \begin{split}
    A & = \frac{\\pi r^2}{2} \\
     & = \frac{1}{2} \pi r^2
    \end{split}
    \end{equation}
  |
}

-- link-on-connections --
a <-> b: {
  link: https://google.com/
}

b -> c: test {
  link: layers.d
}

layers: {
  d: {
    d
  }
}

-- shape-animate --
vars: {
  d2-config: {
    layout-engine: elk
    # Terminal theme code
    theme-id: 300
  }
}
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: {
               style.animated: true
      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

-- note-overlap --
shape: sequence_diagram
alice -> bob
alice -> alice: "Self-messages"
alice -> alice: "Self-messages"
alice -> alice: "Self-messages"
alice -> alice: "Self-messages"

bob."In the eyes of my dog, I'm a man."

-- elk-title-near --
title: "diagram title : Red-line hits 'near: top-center' in elk" {near: top-center}
a: {
  a -> b
}
b: {
  c
}

a.b -> b.c
b.c -> a.a: {style.font-color: red; style.stroke: red; style.fill: mistyrose}

-- sql-casing-panic --

asdf:{
  shape:sQl_table
  zxcv
}

-- connection-icons --
direction: right
a -> b: hello {
  icon: https://icons.terrastruct.com/essentials%2F213-alarm.svg
}
b -> c: {
  icon: https://icons.terrastruct.com/essentials%2F213-alarm.svg
}

-- model-view --
# Models
user.style.fill: blue
softwareSystem: {
  serviceA.class: ok
  serviceB
  serviceC.class: ok
  serviceD

  serviceA -> serviceB
  serviceA -> serviceD
  serviceC -> serviceB
}
externalSystem
user -> softwareSystem
softwareSystem -> externalSystem

# Clear models
**: suspend
(** -> **)[*]: suspend

# Include all top-level objects
*: unsuspend
# Include all objects with a certain class
**: unsuspend {
  &class: ok
}
# Include all connections/objects connected to an object
(** -> externalSystem)[*]: unsuspend

-- sequence-diagram-note-md --
shape: sequence_diagram
x -> y: hello
x.x: |md
  ## A man who fishes for marlin in ponds

  - ...dramatic pause

  will put his money in Etruscan bonds.
|

y.z: |latex
  \\lim_{h \\rightarrow 0 } \\frac{f(x+h)-f(x)}{h}
|

x.z: |python
  1 + 1 = 2
|

-- md-label --
rectangle.shape: rectangle
rectangle: |md
  # hello

  - world

  blah blah
|

square.shape: square
square: |md
  # hello

  - world

  blah blah
|

page.shape: page
page: |md
  # hello

  - world

  blah blah
|

parallelogram.shape: parallelogram
parallelogram: |md
  # hello

  - world

  blah blah
|

document.shape: document
document: |md
  # hello

  - world

  blah blah
|

cylinder.shape: cylinder
cylinder: |md
  # hello

  - world

  blah blah
|

queue.shape: queue
queue: |md
  # hello

  - world

  blah blah
|

package.shape: package
package: |md
  # hello

  - world

  blah blah
|

step.shape: step
step: |md
  # hello

  - world

  blah blah
|

callout.shape: callout
callout: |md
  # hello

  - world

  blah blah
|

stored_data.shape: stored_data
stored_data: |md
  # hello

  - world

  blah blah
|

person.shape: person
person: |md
  # hello

  - world

  blah blah
|

diamond.shape: diamond
diamond: |md
  # hello

  - world

  blah blah
|

oval.shape: oval
oval: |md
  # hello

  - world

  blah blah
|

circle.shape: circle
circle: |md
  # hello

  - world

  blah blah
|

hexagon.shape: hexagon
hexagon: |md
  # hello

  - world

  blah blah
|

cloud.shape: cloud
cloud: |md
  # hello

  - world

  blah blah
|

-- c4-person-shape --
c4mdperson.shape: c4-person
c4mdperson: |md
## Personal Banking Customer

[person]

A customer of the bank, with\
personal bank accounts
  |
c4person: {
  shape: c4-person
  label: "C4 Style Person"
}
regular_person -> c4mdperson

regular_person: {
  shape: person
  label: "Standard Person"
}

c4person -> regular_person: "Compare shapes"

styling: {
  c4styled: {
    shape: c4-person
    style.fill: "#91BEEA"
    style.stroke: "#2E6195"
    style.stroke-width: 2
  }

  c4sized: {
    shape: c4-person
    width: 150
    height: 180
    label: "Custom Size"
  }
}

c4person -> styling.c4styled -> styling.c4sized
**: {
  &shape: c4-person
  style.fill: "#08427b"
  style.stroke: black
  style.font-color: white
  style.stroke-width: 1
}

-- c4-theme --

vars: {
  d2-config: {
    theme-id: 303
  }
}

customer: |md
  ## Personal Banking Customer
  [person]

  A customer of the bank, with personal bank accounts.
| {
  shape: c4-person
}

internet_banking_system: |md
  ## Internet Banking System
  [Software System]
| {
  shape: rectangle
  label.near: bottom-left
}

internet_banking_system.web_app: |md
  ## Web Application
  [Container: Java and Spring MVC]

  Delivers the static content and the Internet banking single page application.
| {
  shape: rectangle
}

internet_banking_system.spa: |md
  ## Single-Page Application
  [Container: JavaScript and Angular]

  Provides all of the Internet banking functionality to customers via their web browser.
| {
  shape: rectangle
}

internet_banking_system.mobile_app: |md
  ## Mobile App
  [Container: Xamarin]

  Provides a limited subset of the Internet banking functionality to customers via their mobile device.
| {
  shape: rectangle
}

internet_banking_system.api_app: |md
  ## API Application
  [Container: Java and Spring MVC]

  Provides Internet banking functionality via a JSON/HTTPS API.
| {
  shape: rectangle
}

internet_banking_system.database: |md
  ## Database
  [Container: Oracle Database Schema]

  Stores user registration information, hashed authentication credentials, access logs, etc.
| {
  shape: rectangle
}

email_system: |md
  ## E-mail System
  [Software System]

  The internal Microsoft Exchange e-mail system.
| {
  shape: rectangle
}

mainframe: |md
  ## Mainframe Banking System
  [Software System]

  Stores all of the core banking information about customers, accounts, transactions, etc.
| {
  shape: rectangle
}

# Connections
customer -> internet_banking_system.web_app: "Visits bigbank.com/ib using\n[HTTPS]"
internet_banking_system.web_app -> internet_banking_system.spa: "Delivers to the customer's web browser"
customer -> internet_banking_system.spa: "Views account balances, and makes payments using"
customer -> internet_banking_system.mobile_app: "Views account balances, and makes payments using"
internet_banking_system.spa -> internet_banking_system.api_app: "Makes API calls to\n[JSON/HTTPS]"
internet_banking_system.mobile_app -> internet_banking_system.api_app: "Makes API calls to\n[JSON/HTTPS]"
internet_banking_system.api_app -> mainframe: "Makes API calls to\n[XML/HTTPS]"
customer -> email_system: "Sends e-mails to"
internet_banking_system.api_app -> email_system: "Sends e-mail using"
internet_banking_system.database <-> internet_banking_system.api_app: "Reads from and writes to\n[SQL/TCP]"