Skip to content

Commit bde0c89

Browse files
webstackdevwebstackdev
committed
Add Diagram component
1 parent b0fe3f9 commit bde0c89

25 files changed

Lines changed: 1974 additions & 652 deletions

File tree

_CHAT_BOT.md renamed to CHAT_BOT.md

File renamed without changes.

_CRM.md renamed to HUBSPOT.md

File renamed without changes.

‎MERMAID.md‎

Lines changed: 256 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,60 @@
11
# Mermaid usage
22

3-
## src/content/articles/opentelemetry-span-design-granularity-overhead/pdf.mdx
3+
- `flowchart LR`, `flowchart TD` - shows a sequence of actions.
4+
- `gantt`
5+
- `graph TD` - legacy implementation, use `flowchart` instead.
6+
- `sequenceDiagram`
7+
- `stateDiagram-v2` - is meant for Finite State Machines (FSM), shows the status of a system at any given time.
48

5-
```mermaid
6-
gantt
7-
title Trace Waterfall (readable)
8-
dateFormat X
9-
axisFormat %L ms
9+
**Quick Comparison Table**
1010

11-
section Request
12-
HTTP GET /orders/123 :a1, 0, 150
11+
| Type | Purpose | Key Feature | Syntax Note |
12+
| :-------------------- | :------------------------------------ | :----------------------------------------------------------- | :----------------------------------------------------------- |
13+
| **`flowchart`** | Visualizing processes or logic flows. | **Newest engine**: Supports subgraphs, better styling, and more shapes. | Use `flowchart TD` or `flowchart LR`. |
14+
| **`graph`** | Legacy version of the flowchart. | Older engine with fewer features and more rigid layouts. | Often used interchangeably but lacks `flowchart`'s flexibility. |
15+
| **`stateDiagram-v2`** | Modeling system behavior/states. | **UML-compliant**: Focuses on "States" and "Transitions." | Uses `[*] ->` for start/end points. |
1316

14-
section Cache
15-
cache.get :a2, 5, 15
17+
## flowchart LR
1618

17-
section Database
18-
db.query orders :a3, 20, 80
19+
```text
20+
flowchart LR
21+
subgraph correct[Correct: 1-100 spans]
22+
B1[batch.process] --> E1[item.failed event]
23+
B1 --> E2[item.failed event]
24+
B1 --> A1[batch.successful: 9998]
25+
end
1926
20-
section Enrichment
21-
enrichOrder :a4, 85, 140
22-
http.get /customers/456 :a5, 90, 120
23-
http.get /products/789 :a6, 90, 110
27+
subgraph wrong[Wrong: 10,000 spans]
28+
I1[process.item] --> I2[process.item]
29+
I2 --> I3[process.item]
30+
I3 --> I4[...9,997 more...]
31+
end
32+
33+
style correct fill:#9f9,color:#000
34+
style wrong fill:#f96,color:#000
2435
```
25-
Figure: Readable trace waterfall with clear hierarchy.
2636

2737
```mermaid
38+
flowchart LR
39+
subgraph correct[Correct: 1-100 spans]
40+
B1[batch.process] --> E1[item.failed event]
41+
B1 --> E2[item.failed event]
42+
B1 --> A1[batch.successful: 9998]
43+
end
44+
45+
subgraph wrong[Wrong: 10,000 spans]
46+
I1[process.item] --> I2[process.item]
47+
I2 --> I3[process.item]
48+
I3 --> I4[...9,997 more...]
49+
end
50+
51+
style correct fill:#9f9,color:#000
52+
style wrong fill:#f96,color:#000
53+
```
54+
55+
## flowchart TD
56+
57+
```text
2858
flowchart TD
2959
A[Incoming Request] --> B{Head Sampling?}
3060
@@ -46,42 +76,87 @@ flowchart TD
4676
style H fill:#f96,color:#000
4777
style G fill:#9f9,color:#000
4878
```
49-
Figure: Head sampling reduces overhead; tail sampling preserves interesting traces.
5079

5180
```mermaid
52-
gantt
53-
title Trace Waterfall (over-instrumented)
54-
dateFormat X
55-
axisFormat %L ms
81+
flowchart TD
82+
A[Incoming Request] --> B{Head Sampling?}
5683
57-
section Request
58-
HTTP GET /orders/123 :a1, 0, 150
84+
B -->|Yes| C[Create Spans]
85+
B -->|No| D[No Spans Created]
5986
60-
section Validation
61-
validate.request :a2, 2, 5
62-
parse.json :a3, 5, 8
63-
validate.orderId :a4, 8, 10
87+
C --> E[Export to Collector]
88+
E --> F{Tail Sampling?}
6489
65-
section Cache
66-
cache.get :a5, 10, 12
67-
serialize.key :a6, 10, 11
68-
redis.get :a7, 11, 12
69-
deserialize.result :a8, 12, 13
90+
F -->|Error?| G[Keep]
91+
F -->|Slow?| G
92+
F -->|High-value?| G
93+
F -->|Random 5%| G
94+
F -->|Otherwise| H[Drop]
7095
71-
section Database
72-
db.getConnection :a9, 15, 18
73-
db.query orders :a10, 18, 75
74-
db.releaseConnection :a11, 75, 77
75-
map.toEntity :a12, 77, 79
96+
G --> I[Storage Backend]
7697
77-
section Response
78-
serialize.json :a13, 140, 145
79-
set.headers :a14, 145, 147
80-
send.response :a15, 147, 150
98+
style D fill:#f96,color:#000
99+
style H fill:#f96,color:#000
100+
style G fill:#9f9,color:#000
101+
```
102+
103+
## graph TD
104+
105+
```text
106+
graph TD
107+
subgraph CP[Control Plane]
108+
A[API Server] --> B[State Store]
109+
A --> C[Controllers]
110+
end
111+
112+
D[Isolation Boundary]
113+
114+
subgraph DP[Data Plane]
115+
F[Worker Node 1]
116+
G[Worker Node 2]
117+
H[Worker Node 3]
118+
end
119+
120+
C -->|"Desired State"| D
121+
D --> F
122+
D --> G
123+
D --> H
124+
125+
F -->|"Actual State"| D
126+
G -->|"Actual State"| D
127+
H -->|"Actual State"| D
128+
D --> C
81129
```
82-
Figure: Over-instrumented trace—wall of spans obscures the critical path.
83130

84131
```mermaid
132+
graph TD
133+
subgraph CP[Control Plane]
134+
A[API Server] --> B[State Store]
135+
A --> C[Controllers]
136+
end
137+
138+
D[Isolation Boundary]
139+
140+
subgraph DP[Data Plane]
141+
F[Worker Node 1]
142+
G[Worker Node 2]
143+
H[Worker Node 3]
144+
end
145+
146+
C -->|"Desired State"| D
147+
D --> F
148+
D --> G
149+
D --> H
150+
151+
F -->|"Actual State"| D
152+
G -->|"Actual State"| D
153+
H -->|"Actual State"| D
154+
D --> C
155+
```
156+
157+
## sequenceDiagram
158+
159+
```text
85160
sequenceDiagram
86161
participant Client
87162
participant API as API Service
@@ -108,51 +183,154 @@ sequenceDiagram
108183
API-->>Client: Enriched order
109184
Note over API: Root span ends
110185
```
111-
Figure: Request instrumentation sequence.
112186

113187
```mermaid
114-
flowchart LR
115-
subgraph correct[Correct: 1-100 spans]
116-
B1[batch.process] --> E1[item.failed event]
117-
B1 --> E2[item.failed event]
118-
B1 --> A1[batch.successful: 9998]
119-
end
188+
sequenceDiagram
189+
participant Client
190+
participant API as API Service
191+
participant Cache
192+
participant DB as Database
193+
participant Customers as Customers Service
120194
121-
subgraph wrong[Wrong: 10,000 spans]
122-
I1[process.item] --> I2[process.item]
123-
I2 --> I3[process.item]
124-
I3 --> I4[...9,997 more...]
125-
end
195+
Client->>API: GET /orders/123
196+
Note over API: Root span: HTTP GET /orders/{id}
126197
127-
style correct fill:#9f9,color:#000
128-
style wrong fill:#f96,color:#000
198+
API->>Cache: Get order:123
199+
Note over API: Child span: cache.get
200+
Cache-->>API: Miss
201+
202+
API->>DB: SELECT * FROM orders
203+
Note over API: Child span: db.query orders
204+
DB-->>API: Order data
205+
206+
API->>Customers: GET /customers/456
207+
Note over API: Child span: HTTP GET customers-service
208+
Note over Customers: Continues trace
209+
Customers-->>API: Customer data
210+
211+
API-->>Client: Enriched order
212+
Note over API: Root span ends
129213
```
130-
Figure: Batch instrumentation approaches—events vs spans.
131214

132-
## src/content/articles/platform-architecture-control-plane-data-plane-separation/index.mdx
215+
## stateDiagram-v2
216+
217+
```text
218+
stateDiagram-v2
219+
[*] --> Closed
220+
Closed --> Open: Failures exceed threshold
221+
Open --> HalfOpen: Timeout expires
222+
HalfOpen --> Closed: Probe succeeds
223+
HalfOpen --> Open: Probe fails
224+
225+
note right of Closed
226+
Normal operation
227+
Requests flow through
228+
Track failure rate
229+
end note
230+
231+
note right of Open
232+
Fail fast
233+
Don't call downstream
234+
Return cached/fallback
235+
end note
236+
237+
note right of HalfOpen
238+
Test recovery
239+
Allow limited probes
240+
Monitor success
241+
end note
242+
```
133243

134244
```mermaid
135-
graph TB
136-
subgraph CP[Control Plane]
137-
A[API Server] --> B[State Store]
138-
A --> C[Controllers]
139-
end
245+
stateDiagram-v2
246+
[*] --> Closed
247+
Closed --> Open: Failures exceed threshold
248+
Open --> HalfOpen: Timeout expires
249+
HalfOpen --> Closed: Probe succeeds
250+
HalfOpen --> Open: Probe fails
251+
252+
note right of Closed
253+
Normal operation
254+
Requests flow through
255+
Track failure rate
256+
end note
257+
258+
note right of Open
259+
Fail fast
260+
Don't call downstream
261+
Return cached/fallback
262+
end note
263+
264+
note right of HalfOpen
265+
Test recovery
266+
Allow limited probes
267+
Monitor success
268+
end note
269+
```
140270

141-
D[Isolation Boundary]
271+
## gantt
142272

143-
subgraph DP[Data Plane]
144-
F[Worker Node 1]
145-
G[Worker Node 2]
146-
H[Worker Node 3]
147-
end
273+
```text
274+
gantt
275+
title Trace Waterfall (over-instrumented)
276+
dateFormat X
277+
axisFormat %L ms
148278
149-
C -->|"Desired State"| D
150-
D --> F
151-
D --> G
152-
D --> H
279+
section Request
280+
HTTP GET /orders/123 :a1, 0, 150
153281
154-
F -->|"Actual State"| D
155-
G -->|"Actual State"| D
156-
H -->|"Actual State"| D
157-
D --> C
282+
section Validation
283+
validate.request :a2, 2, 5
284+
parse.json :a3, 5, 8
285+
validate.orderId :a4, 8, 10
286+
287+
section Cache
288+
cache.get :a5, 10, 12
289+
serialize.key :a6, 10, 11
290+
redis.get :a7, 11, 12
291+
deserialize.result :a8, 12, 13
292+
293+
section Database
294+
db.getConnection :a9, 15, 18
295+
db.query orders :a10, 18, 75
296+
db.releaseConnection :a11, 75, 77
297+
map.toEntity :a12, 77, 79
298+
299+
section Response
300+
serialize.json :a13, 140, 145
301+
set.headers :a14, 145, 147
302+
send.response :a15, 147, 150
158303
```
304+
305+
```mermaid
306+
gantt
307+
title Trace Waterfall (over-instrumented)
308+
dateFormat X
309+
axisFormat %L ms
310+
311+
section Request
312+
HTTP GET /orders/123 :a1, 0, 150
313+
314+
section Validation
315+
validate.request :a2, 2, 5
316+
parse.json :a3, 5, 8
317+
validate.orderId :a4, 8, 10
318+
319+
section Cache
320+
cache.get :a5, 10, 12
321+
serialize.key :a6, 10, 11
322+
redis.get :a7, 11, 12
323+
deserialize.result :a8, 12, 13
324+
325+
section Database
326+
db.getConnection :a9, 15, 18
327+
db.query orders :a10, 18, 75
328+
db.releaseConnection :a11, 75, 77
329+
map.toEntity :a12, 77, 79
330+
331+
section Response
332+
serialize.json :a13, 140, 145
333+
set.headers :a14, 145, 147
334+
send.response :a15, 147, 150
335+
```
336+
Figure: Over-instrumented trace—wall of spans obscures the critical path.

0 commit comments

Comments
 (0)