Skip to content

Commit 4e544c4

Browse files
nginx-jacknginx-jack
authored
Merge pull request #412 from nginxinc/mermaid-data-grid
Mermaid: Add grid support and exampleSite example
2 parents c2be37f + a5bf04e commit 4e544c4

File tree

3 files changed

+163
-1
lines changed

3 files changed

+163
-1
lines changed

‎exampleSite/content/test-product/mermaid/_index.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
description: Mermaid
3+
title: Mermaid
4+
toc: true
5+
---

‎exampleSite/content/test-product/mermaid/mermaid-grid.md‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
---
2+
description: Mermaid grid
3+
title: Mermaid grid
4+
toc: true
5+
---
6+
7+
Mermaid supports multiple grid sizes, similar to [image grid]({{< relref "../images/image-grid.md" >}}).
8+
9+
- `wide`
10+
- `last-third`
11+
- `first-third`
12+
- `first-two-thirds` (default)
13+
14+
This attribute is provided as part of the codeblock options for `mermaid`.
15+
16+
### Wide
17+
To use the full, wide grid:
18+
```
19+
```mermaid {grid="wide"}
20+
21+
```
22+
23+
24+
```mermaid {grid="wide"}
25+
graph LR
26+
%% Nodes and Relationships
27+
subgraph KubernetesCluster["Kubernetes Cluster"]
28+
subgraph NamespaceNGF["Namespace: nginx-gateway"]
29+
NGFControlPlanePod["NGINX Gateway Fabric Control Plane Pod"]
30+
NGFControlPlanePod --> KubernetesAPI["Kubernetes API"]
31+
end
32+
subgraph ApplicationsNamespaceA["Namespace: applications"]
33+
subgraph DataplaneComponentsA["Dataplane Components"]
34+
GatewayA["Gateway A<br>Listener: *.example.com"]
35+
subgraph NGINXDataPlanePodA["NGINX Data Plane Pod"]
36+
subgraph NGINXContainerA["NGINX Container"]
37+
NGINXProcessA["NGINX Process"]
38+
NGINXAgentA["NGINX Agent"]
39+
end
40+
end
41+
end
42+
subgraph HTTPRouteAAndApplications["HTTPRoutes and Applications"]
43+
HTTPRouteA["HTTPRoute A<br>Host: a.example.com"]
44+
HTTPRouteB["HTTPRoute B<br>Host: b.example.com"]
45+
ApplicationA["Application A<br>Pods: 2"]
46+
ApplicationB["Application B<br>Pods: 1"]
47+
end
48+
end
49+
subgraph ApplicationsNamespaceB["Namespace: applications-2"]
50+
subgraph DataplaneComponentsB["Dataplane Components"]
51+
GatewayB["Gateway B<br>Listener: *.other-example.com"]
52+
subgraph NGINXDataPlanePodB["NGINX Data Plane Pod"]
53+
subgraph NGINXContainerB["NGINX Container"]
54+
NGINXProcessB["NGINX Process"]
55+
NGINXAgentB["NGINX Agent"]
56+
end
57+
end
58+
end
59+
subgraph HTTPRouteBandApplications["HTTPRoutes and Applications"]
60+
HTTPRouteC["HTTPRoute C<br>Host: c.other-example.com"]
61+
ApplicationC["Application C<br>Pods: 1"]
62+
end
63+
end
64+
end
65+
subgraph UsersAndClients["Users and Clients"]
66+
UserOperator["Cluster Operator"]
67+
UserDevA["Application Developer A"]
68+
UserDevB["Application Developer B"]
69+
ClientA["Client A"]
70+
ClientB["Client B"]
71+
end
72+
subgraph SharedInfrastructure["Public Endpoint"]
73+
PublicEndpoint["TCP Load Balancer / NodePort"]
74+
end
75+
%% Updated Traffic Flow
76+
ClientA-->|a.example.com|PublicEndpoint
77+
ClientB-->|c.other-example.com|PublicEndpoint
78+
PublicEndpoint==>NGINXProcessA
79+
PublicEndpoint==>NGINXProcessB
80+
NGINXProcessA==>ApplicationA
81+
NGINXProcessA==>ApplicationB
82+
NGINXProcessB==>ApplicationC
83+
%% Kubernetes Configuration Flow
84+
HTTPRouteA-->GatewayA
85+
HTTPRouteB-->GatewayA
86+
HTTPRouteC-->GatewayB
87+
UserOperator-->KubernetesAPI
88+
NGFControlPlanePod--gRPC-->NGINXAgentA
89+
NGFControlPlanePod--gRPC-->NGINXAgentB
90+
NGINXAgentA-->NGINXProcessA
91+
NGINXAgentB-->NGINXProcessB
92+
UserDevA-->KubernetesAPI
93+
UserDevB-->KubernetesAPI
94+
%% Styling
95+
style UserOperator fill:#66CDAA,stroke:#333,stroke-width:2px
96+
style GatewayA fill:#66CDAA,stroke:#333,stroke-width:2px
97+
style GatewayB fill:#66CDAA,stroke:#333,stroke-width:2px
98+
style NGFControlPlanePod fill:#66CDAA,stroke:#333,stroke-width:2px
99+
style NGINXProcessA fill:#66CDAA,stroke:#333,stroke-width:2px
100+
style NGINXProcessB fill:#66CDAA,stroke:#333,stroke-width:2px
101+
style KubernetesAPI fill:#9370DB,stroke:#333,stroke-width:2px
102+
style HTTPRouteAAndApplications fill:#E0FFFF,stroke:#333,stroke-width:2px
103+
style HTTPRouteBandApplications fill:#E0FFFF,stroke:#333,stroke-width:2px
104+
style UserDevA fill:#FFA07A,stroke:#333,stroke-width:2px
105+
style HTTPRouteA fill:#FFA07A,stroke:#333,stroke-width:2px
106+
style HTTPRouteB fill:#FFA07A,stroke:#333,stroke-width:2px
107+
style ApplicationA fill:#FFA07A,stroke:#333,stroke-width:2px
108+
style ApplicationB fill:#FFA07A,stroke:#333,stroke-width:2px
109+
style ClientA fill:#FFA07A,stroke:#333,stroke-width:2px
110+
style UserDevB fill:#87CEEB,stroke:#333,stroke-width:2px
111+
style HTTPRouteC fill:#87CEEB,stroke:#333,stroke-width:2px
112+
style ApplicationC fill:#87CEEB,stroke:#333,stroke-width:2px
113+
style ClientB fill:#87CEEB,stroke:#333,stroke-width:2px
114+
style PublicEndpoint fill:#FFD700,stroke:#333,stroke-width:2px
115+
```
116+
117+
### Last third
118+
Or an 'aside' style `last-third`:
119+
```
120+
```mermaid {grid="last-third"}
121+
122+
```
123+
124+
Some content on the left, where the graph would appear to the right.
125+
For this use case, you would want to make sure your text is similar height, or higher than the graph, or the document flow will look off.
126+
```mermaid {grid="last-third"}
127+
graph TD
128+
A[Start] --> B{Decision};
129+
B -->|Yes| C[Process 1];
130+
B -->|No| D[Process 2];
131+
C --> E[End];
132+
D --> E;
133+
```
134+
135+
136+
### Default
137+
By default, it will use the "first-two-thirds" grid, if nothing is provided.
138+
139+
```
140+
```mermaid
141+
graph TD
142+
A[Start] --> B{Decision};
143+
B -->|Yes| C[Process 1];
144+
B -->|No| D[Process 2];
145+
C --> E[End];
146+
D --> E;
147+
```
148+
149+
```mermaid
150+
graph TD
151+
A[Start] --> B{Decision};
152+
B -->|Yes| C[Process 1];
153+
B -->|No| D[Process 2];
154+
C --> E[End];
155+
D --> E;
156+
```

‎layouts/_default/_markup/render-codeblock-mermaid.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
<pre class="mermaid">
1+
{{- $grid := .Attributes.grid | default "first-two-thirds" -}}
2+
<pre class="mermaid" data-grid="{{ $grid }}" data-testid="codeblock-mermaid">
23
{{- .Inner | safeHTML }}
34
</pre>
45
{{ .Page.Store.Set "hasMermaid" true }}

0 commit comments

Comments
 (0)