777 lines
14 KiB
Text
777 lines
14 KiB
Text
-- 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 |  80% | 2024-04-01 | Alice |
|
|
| Beta | MEDIUM |  45% | 2024-05-15 | Bob |
|
|
| Gamma | LOW |  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
|
|
}
|