File: test.d2.dark.html

package info (click to toggle)
kf6-syntax-highlighting 6.23.0-1
  • links: PTS, VCS
  • area: main
  • in suites: forky, sid
  • size: 51,200 kB
  • sloc: xml: 210,435; cpp: 12,977; python: 3,281; sh: 965; perl: 813; ruby: 494; pascal: 393; javascript: 161; php: 159; haskell: 141; jsp: 132; lisp: 131; ada: 119; ansic: 107; makefile: 96; f90: 94; ml: 85; cobol: 81; yacc: 71; csh: 62; exp: 61; erlang: 54; sql: 51; java: 47; sed: 45; objc: 37; tcl: 36; awk: 31; asm: 30; fortran: 18; cs: 10
file content (227 lines) | stat: -rw-r--r-- 34,528 bytes parent folder | download 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
 
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>test.d2</title>
<meta name="generator" content="KF5::SyntaxHighlighting - Definition (D2) - Theme (Breeze Dark)"/>
</head><body style="background-color:#232629;color:#cfcfc2"><pre>

<span style="color:#7a7c7d">"""</span>
<span style="color:#7a7c7d">Block comment:</span>
<span style="color:#7a7c7d">This file demonstrates:</span>
<span style="color:#7a7c7d"> - imports (regular and quoted)</span>
<span style="color:#7a7c7d"> - vars &amp; substitutions</span>
<span style="color:#7a7c7d"> - containers, nested objects</span>
<span style="color:#7a7c7d"> - many shapes: cylinder, sql_table, class, c4-person, circle, square, sequence_diagram</span>
<span style="color:#7a7c7d"> - edges with labels (markdown, LaTeX), different arrow kinds</span>
<span style="color:#7a7c7d"> - tooltips &amp; links</span>
<span style="color:#7a7c7d"> - style blocks and globs (wildcards)</span>
<span style="color:#7a7c7d"> - nulling / suspend / unsuspend</span>
<span style="color:#7a7c7d"> - scenarios / steps composition</span>
<span style="color:#7a7c7d">"""</span>

<span style="color:#7a7c7d"># Imports</span>
<span style="color:#7a7c7d"># regular import</span>
<span style="color:#27ae60">...@shared</span>

<span style="color:#7a7c7d"># quoted import</span>
<span style="color:#27ae60">...@"team.v1"</span>

<span style="color:#7a7c7d"># Variables</span>
<span style="font-weight:bold">vars</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
  <span style="color:#8e44ad;font-weight:bold">colors</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
    <span style="color:#8e44ad;font-weight:bold">service</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#27aeae;font-weight:bold">#0B5FFF</span><span style="color:#3daee9">"</span>
    <span style="color:#8e44ad;font-weight:bold">db</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#27aeae;font-weight:bold">#E6F0FF</span><span style="color:#3daee9">"</span>
    <span style="color:#8e44ad;font-weight:bold">warn</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#27aeae;font-weight:bold">#FFDD99</span><span style="color:#3daee9">"</span>
  <span style="color:#3f8058">}</span>
  <span style="color:#8e44ad;font-weight:bold">urls</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
    <span style="color:#8e44ad;font-weight:bold">docs</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">https://example.com/docs#top</span><span style="color:#3daee9">"</span>
  <span style="color:#3f8058">}</span>
<span style="color:#3f8058">}</span>

<span style="color:#7a7c7d"># Global style for the root</span>
<span style="font-weight:bold">style</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
  <span style="font-weight:bold">fill</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">transparent</span>
  <span style="font-weight:bold">font</span><span style="color:#3daee9">:</span> <span style="color:#f67400">mono</span>
<span style="color:#3f8058">}</span>

<span style="color:#8e44ad;font-weight:bold">client</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
  <span style="font-weight:bold">shape</span><span style="color:#3daee9">:</span> <span style="color:#f67400">c4-person</span>
  <span style="font-weight:bold">label</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">Client (browser)</span><span style="color:#3daee9">\n</span><span style="color:#f44f4f">modern user agent</span><span style="color:#3daee9">"</span>
  <span style="font-weight:bold">tooltip</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">Client provides credentials and interacts with the API.</span><span style="color:#3daee9">"</span>
  <span style="font-weight:bold">link</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">${</span><span style="color:#27aeae">urls</span><span style="color:#3daee9">.</span><span style="color:#27aeae">docs</span><span style="color:#3daee9">}</span>
  <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">90</span>
  <span style="font-weight:bold">height</span><span style="color:#3daee9">:</span> <span style="color:#f67400">90</span>
  <span style="font-weight:bold">style</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span><span style="font-weight:bold">font-size</span><span style="color:#3daee9">:</span> <span style="color:#f67400">10</span><span style="color:#3f8058">}</span>
<span style="color:#3f8058">}</span>

<span style="color:#8e44ad;font-weight:bold">browser_cache</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
  <span style="font-weight:bold">shape</span><span style="color:#3daee9">:</span> <span style="color:#f67400">square</span>
  <span style="font-weight:bold">label</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">Browser</span><span style="color:#3daee9">\n</span><span style="color:#f44f4f">Cache</span><span style="color:#3daee9">"</span>
  <span style="font-weight:bold">style</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span><span style="font-weight:bold">opacity</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0.9</span><span style="color:#3f8058">}</span>
<span style="color:#3f8058">}</span>

<span style="color:#8e44ad;font-weight:bold">api_gateway</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
  <span style="font-weight:bold">shape</span><span style="color:#3daee9">:</span> <span style="color:#f67400">rectangle</span>
  <span style="font-weight:bold">label</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">API Gateway</span><span style="color:#3daee9">\n</span><span style="color:#f44f4f">(rate-limits, auth)</span><span style="color:#3daee9">"</span>
  <span style="font-weight:bold">style</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
    <span style="font-weight:bold">fill</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">${</span><span style="color:#27aeae">colors</span><span style="color:#3daee9">.</span><span style="color:#27aeae">service</span><span style="color:#3daee9">}</span>
    <span style="font-weight:bold">font-color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">white</span>
  <span style="color:#3f8058">}</span>
<span style="color:#3f8058">}</span>

<span style="color:#8e44ad;font-weight:bold">auth</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
  <span style="font-weight:bold">shape</span><span style="color:#3daee9">:</span> <span style="color:#f67400">circle</span>
  <span style="font-weight:bold">label</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">Auth</span><span style="color:#3daee9">\n</span><span style="color:#f44f4f">(oAuth2 / JWT)</span><span style="color:#3daee9">"</span>
  <span style="font-weight:bold">tooltip</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">Supports PKCE &amp; refresh tokens</span><span style="color:#3daee9">"</span>
<span style="color:#3f8058">}</span>

<span style="color:#8e44ad;font-weight:bold">workers</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
  <span style="font-weight:bold">shape</span><span style="color:#3daee9">:</span> <span style="color:#f67400">queue</span>
  <span style="font-weight:bold">label</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">Background</span><span style="color:#3daee9">\n</span><span style="color:#f44f4f">workers</span><span style="color:#3daee9">"</span>
  <span style="font-weight:bold">style</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span><span style="font-weight:bold">shadow</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">true</span><span style="color:#3f8058">}</span>
<span style="color:#3f8058">}</span>

<span style="color:#8e44ad;font-weight:bold">db_primary</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
  <span style="font-weight:bold">shape</span><span style="color:#3daee9">:</span> <span style="color:#f67400">cylinder</span>
  <span style="font-weight:bold">label</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">Postgres</span><span style="color:#3daee9">\n</span><span style="color:#f44f4f">Primary</span><span style="color:#3daee9">"</span>
  <span style="font-weight:bold">tooltip</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">primary-db.example.com</span><span style="color:#3daee9">\n</span><span style="color:#f44f4f">PG 14</span><span style="color:#3daee9">"</span>
  <span style="font-weight:bold">link</span><span style="color:#3daee9">:</span> <span style="color:#da4453;font-style:italic">"https://db.example.com/console"</span>
  <span style="font-weight:bold">style</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span><span style="font-weight:bold">fill</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">${</span><span style="color:#27aeae">colors</span><span style="color:#3daee9">.</span><span style="color:#27aeae">db</span><span style="color:#3daee9">}</span><span style="color:#3daee9">;</span> <span style="font-weight:bold">stroke</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#27aeae;font-weight:bold">#0B4A6F</span><span style="color:#3daee9">"</span><span style="color:#3f8058">}</span>
<span style="color:#3f8058">}</span>

<span style="color:#7a7c7d"># SQL table</span>
<span style="color:#8e44ad;font-weight:bold">users</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
  <span style="font-weight:bold">shape</span><span style="color:#3daee9">:</span> <span style="color:#f67400">sql_table</span>
  <span style="color:#8e44ad;font-weight:bold">id</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">int </span><span style="color:#3f8058">{</span><span style="font-weight:bold">constraint</span><span style="color:#3daee9">:</span><span style="color:#f44f4f"> </span><span style="color:#f67400">primary_key</span><span style="color:#3f8058">}</span>
  <span style="color:#8e44ad;font-weight:bold">name</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">string</span>
  <span style="color:#8e44ad;font-weight:bold">email</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">string </span><span style="color:#3f8058">{</span><span style="font-weight:bold">constraint</span><span style="color:#3daee9">:</span><span style="color:#f44f4f"> </span><span style="color:#3daee9">[</span><span style="color:#f44f4f">"unique"</span><span style="color:#3daee9">;</span><span style="color:#f44f4f"> "not null"</span><span style="color:#3daee9">]</span><span style="color:#3f8058">}</span>
  <span style="color:#8e44ad;font-weight:bold">created_at</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">timestamptz</span>
<span style="color:#3f8058">}</span>

<span style="color:#7a7c7d"># UML class</span>
<span style="color:#8e44ad;font-weight:bold">Order</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
  <span style="font-weight:bold">shape</span><span style="color:#3daee9">:</span> <span style="color:#f67400">class</span>
  <span style="color:#8e44ad;font-weight:bold">id</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">int</span>
  <span style="color:#8e44ad;font-weight:bold">total</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">float64</span>
  <span style="color:#8e44ad;font-weight:bold">placeOrder(customerId</span> <span style="color:#8e44ad;font-weight:bold">int)</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">bool</span>
  <span style="color:#8e44ad;font-weight:bold">cancel()</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">bool</span>
<span style="color:#3f8058">}</span>

<span style="color:#8e44ad;font-weight:bold">square_node</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span><span style="font-weight:bold">shape</span><span style="color:#3daee9">:</span> <span style="color:#f67400">square</span><span style="color:#3daee9">;</span> <span style="font-weight:bold">label</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">square</span><span style="color:#3daee9">"</span><span style="color:#3f8058">}</span>
<span style="color:#8e44ad;font-weight:bold">circle_node</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span><span style="font-weight:bold">shape</span><span style="color:#3daee9">:</span> <span style="color:#f67400">circle</span><span style="color:#3daee9">;</span> <span style="font-weight:bold">label</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">circle</span><span style="color:#3daee9">"</span><span style="color:#3f8058">}</span>

<span style="color:#7a7c7d"># Sequence diagram</span>
<span style="color:#8e44ad;font-weight:bold">login_sequence</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
  <span style="font-weight:bold">shape</span><span style="color:#3daee9">:</span> <span style="color:#f67400">sequence_diagram</span>
  <span style="color:#7a7c7d"># actors (explicit ordering matters inside sequence_diagram)</span>
  <span style="color:#8e44ad;font-weight:bold">client</span>
  <span style="color:#8e44ad;font-weight:bold">api_gateway</span>
  <span style="color:#8e44ad;font-weight:bold">auth</span>
  <span style="color:#7a7c7d"># messages (order matters)</span>
  <span style="color:#8e44ad;font-weight:bold">client</span> <span style="color:#3f8058">-></span> <span style="color:#8e44ad;font-weight:bold">api_gateway</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">POST /login</span><span style="color:#3daee9">"</span>
  <span style="color:#8e44ad;font-weight:bold">api_gateway</span> <span style="color:#3f8058">-></span> <span style="color:#8e44ad;font-weight:bold">auth</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">validate(credentials)</span><span style="color:#3daee9">"</span>
  <span style="color:#8e44ad;font-weight:bold">auth</span> <span style="color:#3f8058">-></span> <span style="color:#8e44ad;font-weight:bold">api_gateway</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">200 OK</span><span style="color:#3daee9">\n</span><span style="color:#f44f4f">{ token }</span><span style="color:#3daee9">"</span>
  <span style="color:#8e44ad;font-weight:bold">api_gateway</span> <span style="color:#3f8058">-></span> <span style="color:#8e44ad;font-weight:bold">client</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">302 redirect</span><span style="color:#3daee9">"</span>
  <span style="color:#8e44ad;font-weight:bold">auth</span> <span style="color:#3f8058">-></span> <span style="color:#8e44ad;font-weight:bold">auth</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">hash(password)</span><span style="color:#3daee9">"</span>
  <span style="color:#8e44ad;font-weight:bold">alt</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
    <span style="color:#3daee9">"</span><span style="color:#8e44ad;font-weight:bold">invalid creds</span><span style="color:#3daee9">":</span> <span style="color:#3f8058">{</span>
      <span style="color:#8e44ad;font-weight:bold">api_gateway</span> <span style="color:#3f8058">-></span> <span style="color:#8e44ad;font-weight:bold">client</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">401 Unauthorized</span><span style="color:#3daee9">"</span>
    <span style="color:#3f8058">}</span>
    <span style="color:#3daee9">"</span><span style="color:#8e44ad;font-weight:bold">valid creds</span><span style="color:#3daee9">":</span> <span style="color:#3f8058">{</span>
      <span style="color:#8e44ad;font-weight:bold">api_gateway</span> <span style="color:#3f8058">-></span> <span style="color:#8e44ad;font-weight:bold">client</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">302 redirect</span><span style="color:#3daee9">"</span>
    <span style="color:#3f8058">}</span>
  <span style="color:#3f8058">}</span>
<span style="color:#3f8058">}</span>

<span style="color:#7a7c7d"># Connections (edges) + labels</span>
<span style="color:#8e44ad;font-weight:bold">client</span> <span style="color:#3f8058">-></span> <span style="color:#8e44ad;font-weight:bold">api_gateway</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">REST: POST /v1/session</span><span style="color:#3daee9">"</span>
<span style="color:#8e44ad;font-weight:bold">client</span> <span style="color:#3f8058">-></span> <span style="color:#8e44ad;font-weight:bold">browser_cache</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">Cache read (stale-while-revalidate)</span><span style="color:#3daee9">"</span>
<span style="color:#8e44ad;font-weight:bold">browser_cache</span> <span style="color:#3f8058">&lt;-</span> <span style="color:#8e44ad;font-weight:bold">api_gateway</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">cache-bust (stale)</span><span style="color:#3daee9">"</span>
<span style="color:#8e44ad;font-weight:bold">api_gateway</span> <span style="color:#3f8058">-></span> <span style="color:#8e44ad;font-weight:bold">auth</span><span style="color:#3daee9">:</span> <span style="color:#c45b00">|md</span>
  OAuth token exchange
  <span style="color:#c45b00">```js</span>
  <span style="color:#8e44ad">fetch</span>(<span style="color:#f44f4f">'/token'</span>)
  <span style="color:#c45b00">```</span>
<span style="color:#c45b00">|</span>
<span style="color:#8e44ad;font-weight:bold">api_gateway</span> <span style="color:#3f8058">-></span> <span style="color:#8e44ad;font-weight:bold">workers</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">enqueue: `processEmail()`</span><span style="color:#3daee9">"</span>
<span style="color:#8e44ad;font-weight:bold">workers</span> <span style="color:#3f8058">-></span> <span style="color:#8e44ad;font-weight:bold">db_primary</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">writes (event logs)</span><span style="color:#3daee9">"</span>
<span style="color:#8e44ad;font-weight:bold">api_gateway</span> <span style="color:#3f8058">&lt;-></span> <span style="color:#8e44ad;font-weight:bold">monitoring</span><span style="color:#3daee9">:</span> <span style="color:#c45b00">|tex</span>
  <span style="color:#8e44ad">\textcolor</span>{green}{E}=mc^2
<span style="color:#c45b00">|</span>

<span style="color:#8e44ad;font-weight:bold">db_primary</span> <span style="color:#3f8058">&lt;-</span> <span style="color:#8e44ad;font-weight:bold">replica_db</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">replication (async)</span><span style="color:#3daee9">"</span>
<span style="color:#8e44ad;font-weight:bold">worker_queue</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
  <span style="font-weight:bold">shape</span><span style="color:#3daee9">:</span> <span style="color:#f67400">package</span>
  <span style="font-weight:bold">label</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">worker-queue (internal)</span><span style="color:#3daee9">"</span>
  <span style="font-weight:bold">style</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span><span style="font-weight:bold">opacity</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0.6</span><span style="color:#3f8058">}</span>
<span style="color:#3f8058">}</span>

<span style="color:#7a7c7d"># explicit connection with a multi-line block-string label</span>
<span style="color:#8e44ad;font-weight:bold">api_gateway</span> <span style="color:#3f8058">-></span> <span style="color:#8e44ad;font-weight:bold">worker_queue</span><span style="color:#3daee9">:</span> <span style="color:#c45b00">|"""md</span>
  Some label:
<span style="color:#da4453;font-weight:bold">    * </span>bullet 1
<span style="color:#da4453;font-weight:bold">    * </span>bullet 2

  And an inline <span style="color:#c45b00">`code()`</span> snippet.
<span style="color:#c45b00">"""|</span>

<span style="color:#8e44ad;font-weight:bold">monitoring</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span><span style="font-weight:bold">shape</span><span style="color:#3daee9">:</span> <span style="color:#f67400">text</span><span style="color:#3daee9">;</span> <span style="font-weight:bold">label</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">Monitoring</span><span style="color:#3daee9">"</span><span style="color:#3f8058">}</span>
<span style="color:#8e44ad;font-weight:bold">monitoring</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span><span style="font-weight:bold">tooltip</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">OpenTelemetry + Grafana</span><span style="color:#3daee9">\n</span><span style="color:#f44f4f">Click to open docs</span><span style="color:#3daee9">";</span> <span style="font-weight:bold">link</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">${</span><span style="color:#27aeae">urls</span><span style="color:#3daee9">.</span><span style="color:#27aeae">docs</span><span style="color:#3daee9">}</span><span style="color:#3f8058">}</span>

<span style="color:#3f8058">*</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{!&amp;</span><span style="font-weight:bold;font-style:italic">shape</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad;font-style:italic">sql_table</span><span style="color:#3daee9">;</span> <span style="font-weight:bold">style</span><span style="color:#3daee9">.</span><span style="font-weight:bold">opacity</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0.95</span><span style="color:#3f8058">}</span>

<span style="color:#8e44ad;font-weight:bold">temp_user</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
  <span style="font-weight:bold">shape</span><span style="color:#3daee9">:</span> <span style="color:#f67400">person</span>
  <span style="color:#8e44ad;font-weight:bold">name</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">John</span>
<span style="color:#3f8058">}</span>

<span style="color:#3f8058">**</span><span style="color:#3daee9">:</span> <span style="color:#f67400">unsuspend</span>
<span style="color:#8e44ad;font-weight:bold">temp_user</span><span style="color:#3daee9">:</span> <span style="color:#f67400">suspend</span>

<span style="color:#7a7c7d"># names that require quoting (dots, spaces, leading numerals)</span>
<span style="color:#3daee9">"</span><span style="color:#8e44ad;font-weight:bold">schema.v1.table</span><span style="color:#3daee9">":</span> <span style="color:#3f8058">{</span><span style="font-weight:bold">shape</span><span style="color:#3daee9">:</span> <span style="color:#f67400">page</span><span style="color:#3daee9">;</span> <span style="font-weight:bold">label</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">table with dot in ID</span><span style="color:#3daee9">"</span><span style="color:#3f8058">}</span>
<span style="color:#3daee9">"</span><span style="color:#8e44ad;font-weight:bold">123-start</span><span style="color:#3daee9">":</span> <span style="color:#3f8058">{</span><span style="font-weight:bold">shape</span><span style="color:#3daee9">:</span> <span style="color:#f67400">diamond</span><span style="color:#3daee9">;</span> <span style="font-weight:bold">label</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">starts-with-number</span><span style="color:#3daee9">"</span><span style="color:#3f8058">}</span>
<span style="color:#3daee9">"</span><span style="color:#8e44ad;font-weight:bold">complex/name with spaces</span><span style="color:#3daee9">":</span> <span style="color:#3f8058">{</span><span style="font-weight:bold">shape</span><span style="color:#3daee9">:</span> <span style="color:#f67400">hexagon</span><span style="color:#3daee9">;</span> <span style="font-weight:bold">label</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">complex ID</span><span style="color:#3daee9">"</span><span style="color:#3f8058">}</span>

<span style="color:#7a7c7d"># Styles on selectors</span>
<span style="color:#3f8058">*</span><span style="color:#8e44ad;font-weight:bold">d</span><span style="color:#3f8058">*</span><span style="color:#8e44ad;font-weight:bold">b</span><span style="color:#3f8058">*</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span><span style="font-weight:bold">style</span><span style="color:#3daee9">.</span><span style="font-weight:bold">font-size</span><span style="color:#3daee9">:</span> <span style="color:#f67400">12</span><span style="color:#3f8058">}</span>

<span style="color:#7a7c7d"># Nulling a nested attribute</span>
<span style="color:#8e44ad;font-weight:bold">users</span><span style="color:#3daee9">.</span><span style="color:#8e44ad;font-weight:bold">created_at</span><span style="color:#3daee9">:</span> <span style="color:#f67400">null</span>

<span style="color:#3f8058">*</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span><span style="font-weight:bold">style</span><span style="color:#3daee9">.</span><span style="font-weight:bold">font-color</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#27aeae;font-weight:bold">#222</span><span style="color:#3daee9">"</span><span style="color:#3f8058">}</span>

<span style="color:#3f8058">*</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{&amp;</span><span style="font-weight:bold;font-style:italic">link</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">*;</span> <span style="font-weight:bold">style</span><span style="color:#3daee9">.</span><span style="font-weight:bold">fill</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">yellow</span><span style="color:#3daee9">;</span> <span style="font-weight:bold">style</span><span style="color:#3daee9">.</span><span style="font-weight:bold">stroke</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#27aeae;font-weight:bold">#0A8F0A</span><span style="color:#3daee9">"</span><span style="color:#3f8058">}</span>

<span style="color:#3f8058">*</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
  <span style="color:#3f8058">&amp;</span><span style="font-weight:bold;font-style:italic">shape</span><span style="color:#3daee9">:</span> <span style="color:#8e44ad;font-style:italic">c4-person</span>
  <span style="font-weight:bold">style</span><span style="color:#3daee9">.</span><span style="font-weight:bold">fill</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">${</span><span style="color:#27aeae">colors</span><span style="color:#3daee9">.</span><span style="color:#27aeae">warn</span><span style="color:#3daee9">}</span>
<span style="color:#3f8058">}</span>

<span style="font-weight:bold">scenarios</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
  <span style="color:#8e44ad;font-weight:bold">degraded</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
    <span style="color:#8e44ad;font-weight:bold">db_primary</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span><span style="font-weight:bold">style</span><span style="color:#3daee9">.</span><span style="font-weight:bold">opacity</span><span style="color:#3daee9">:</span> <span style="color:#f67400">0.5</span><span style="color:#3f8058">}</span>
    <span style="color:#8e44ad;font-weight:bold">replica_db</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span><span style="font-weight:bold">style</span><span style="color:#3daee9">.</span><span style="font-weight:bold">opacity</span><span style="color:#3daee9">:</span> <span style="color:#f67400">1.0</span><span style="color:#3daee9">;</span> <span style="font-weight:bold">style</span><span style="color:#3daee9">.</span><span style="font-weight:bold">stroke</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#27aeae;font-weight:bold">#FF0000</span><span style="color:#3daee9">"</span><span style="color:#3f8058">}</span>
    <span style="color:#8e44ad;font-weight:bold">api_gateway</span> <span style="color:#3f8058">-></span> <span style="color:#8e44ad;font-weight:bold">replica_db</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">read-only fallback (degraded)</span><span style="color:#3daee9">"</span>
    <span style="color:#8e44ad;font-weight:bold">legacy_db</span><span style="color:#3daee9">:</span> <span style="color:#f67400">null</span> <span style="color:#7a7c7d"># overriding with null removes it</span>
  <span style="color:#3f8058">}</span>
<span style="color:#3f8058">}</span>

<span style="font-weight:bold">steps</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
  <span style="color:#8e44ad;font-weight:bold">1</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
    <span style="color:#8e44ad;font-weight:bold">api_gateway</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span><span style="font-weight:bold">style</span><span style="color:#3daee9">.</span><span style="font-weight:bold">border-radius</span><span style="color:#3daee9">:</span> <span style="color:#f67400">8</span><span style="color:#3f8058">}</span>
  <span style="color:#3f8058">}</span>
  <span style="color:#8e44ad;font-weight:bold">2</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
    <span style="color:#8e44ad;font-weight:bold">api_gateway</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span><span style="font-weight:bold">style</span><span style="color:#3daee9">.</span><span style="font-weight:bold">border-radius</span><span style="color:#3daee9">:</span> <span style="color:#f67400">2</span><span style="color:#3daee9">;</span> <span style="font-weight:bold">style</span><span style="color:#3daee9">.</span><span style="font-weight:bold">stroke-dash</span><span style="color:#3daee9">:</span> <span style="color:#f67400">4</span><span style="color:#3f8058">}</span>
  <span style="color:#3f8058">}</span>
<span style="color:#3f8058">}</span>

<span style="font-weight:bold">layers</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
  <span style="color:#8e44ad;font-weight:bold">extra</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span>
    <span style="color:#8e44ad;font-weight:bold">emoji_node</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span><span style="font-weight:bold">shape</span><span style="color:#3daee9">:</span> <span style="color:#f67400">rectangle</span><span style="color:#3daee9">;</span> <span style="font-weight:bold">label</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">Emoji 🚀 — 測試</span><span style="color:#3daee9">"</span><span style="color:#3f8058">}</span>
    <span style="color:#8e44ad;font-weight:bold">square_node2</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span><span style="font-weight:bold">shape</span><span style="color:#3daee9">:</span> <span style="color:#f67400">square</span><span style="color:#3daee9">;</span> <span style="font-weight:bold">width</span><span style="color:#3daee9">:</span> <span style="color:#f67400">40</span><span style="color:#3daee9">;</span>
                                  <span style="font-weight:bold">height</span><span style="color:#3daee9">:</span> <span style="color:#f67400">40</span><span style="color:#3f8058">}</span>
    <span style="color:#8e44ad;font-weight:bold">weird_label_node</span><span style="color:#3daee9">:</span> <span style="color:#3f8058">{</span><span style="font-weight:bold">shape</span><span style="color:#3daee9">:</span> <span style="color:#f67400">rectangle</span><span style="color:#3daee9">;</span> <span style="font-weight:bold">label</span><span style="color:#3daee9">:</span> <span style="color:#3daee9">"</span><span style="color:#f44f4f">This label has a #hash and (paren): check</span><span style="color:#3daee9">"</span><span style="color:#3f8058">}</span>
  <span style="color:#3f8058">}</span>
<span style="color:#3f8058">}</span>
</pre></body></html>