Skip to content

Commit 0d90b5e

Browse files
timothywarnertimothywarner
committed
style: Update pipeline diagram for improved readability and aesthetics
1 parent 07bd975 commit 0d90b5e

1 file changed

Lines changed: 118 additions & 98 deletions

File tree

‎docs/pipeline-diagram.html‎

Lines changed: 118 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -3,181 +3,198 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>CircleCI Pipeline - Globomantics Robot Fleet API</title>
6+
<title>CircleCI Pipeline - Robot Fleet API</title>
77
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
88
<style>
99
* { box-sizing: border-box; }
1010
body {
1111
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
12-
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
12+
background: #0f172a;
1313
color: #e2e8f0;
1414
margin: 0;
15-
padding: 20px;
15+
padding: 40px 20px;
1616
min-height: 100vh;
1717
}
1818
.container {
19-
max-width: 1400px;
19+
max-width: 1200px;
2020
margin: 0 auto;
2121
}
2222
h1 {
2323
text-align: center;
2424
color: #fff;
25-
font-size: 2rem;
26-
margin-bottom: 0.5rem;
27-
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
25+
font-size: 1.75rem;
26+
font-weight: 600;
27+
margin-bottom: 0.25rem;
2828
}
2929
.subtitle {
3030
text-align: center;
31-
color: #a0aec0;
31+
color: #94a3b8;
3232
margin-bottom: 2rem;
33+
font-size: 1rem;
3334
}
3435
.diagram-container {
35-
background: #fff;
36-
border-radius: 12px;
37-
padding: 30px;
38-
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
39-
margin-bottom: 2rem;
36+
background: #ffffff;
37+
border-radius: 16px;
38+
padding: 40px;
39+
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
4040
}
4141
.mermaid {
4242
display: flex;
4343
justify-content: center;
4444
}
45+
.mermaid svg {
46+
max-width: 100%;
47+
height: auto;
48+
}
4549
.legend {
46-
display: grid;
47-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
50+
display: flex;
51+
flex-wrap: wrap;
52+
justify-content: center;
4853
gap: 1rem;
49-
margin-top: 2rem;
54+
margin-top: 2.5rem;
55+
padding-top: 1.5rem;
56+
border-top: 1px solid #334155;
5057
}
5158
.legend-item {
52-
background: rgba(255,255,255,0.1);
53-
border-radius: 8px;
54-
padding: 1rem;
55-
border-left: 4px solid;
59+
display: flex;
60+
align-items: center;
61+
gap: 0.5rem;
62+
font-size: 0.875rem;
63+
color: #cbd5e1;
5664
}
57-
.legend-item.trigger { border-color: #1e3a5f; }
58-
.legend-item.orb { border-color: #805ad5; }
59-
.legend-item.build { border-color: #22543d; }
60-
.legend-item.test { border-color: #3b82f6; }
61-
.legend-item.deploy { border-color: #ea580c; }
62-
.legend-item.approval { border-color: #f59e0b; }
63-
.legend-item.prod { border-color: #dc2626; }
64-
.legend-item h3 { margin: 0 0 0.5rem 0; font-size: 1rem; }
65-
.legend-item p { margin: 0; font-size: 0.875rem; color: #a0aec0; }
65+
.legend-dot {
66+
width: 16px;
67+
height: 16px;
68+
border-radius: 4px;
69+
}
70+
.legend-dot.trigger { background: #1e40af; }
71+
.legend-dot.orb { background: #0891b2; }
72+
.legend-dot.build { background: #0369a1; }
73+
.legend-dot.test { background: #7c3aed; }
74+
.legend-dot.deploy { background: #c2410c; }
75+
.legend-dot.approval { background: #ca8a04; }
76+
.legend-dot.prod { background: #be185d; }
6677
footer {
6778
text-align: center;
68-
color: #718096;
69-
font-size: 0.875rem;
79+
color: #64748b;
80+
font-size: 0.75rem;
7081
margin-top: 2rem;
7182
}
7283
</style>
7384
</head>
7485
<body>
7586
<div class="container">
76-
<h1>CircleCI Pipeline Architecture</h1>
77-
<p class="subtitle">Globomantics Robot Fleet API - Build, Test, Deploy Workflow</p>
87+
<h1>Robot Fleet API Pipeline</h1>
88+
<p class="subtitle">CircleCI Workflow Architecture</p>
7889

7990
<div class="diagram-container">
8091
<pre class="mermaid">
81-
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#1a365d', 'primaryTextColor': '#fff', 'primaryBorderColor': '#2c5282', 'lineColor': '#4a5568', 'secondaryColor': '#2d3748', 'fontFamily': 'Arial, sans-serif'}}}%%
92+
%%{init: {
93+
'theme': 'base',
94+
'themeVariables': {
95+
'fontSize': '13px',
96+
'fontFamily': 'system-ui, sans-serif'
97+
}
98+
}}%%
8299
flowchart TB
83-
subgraph TRIGGER["&nbsp; GIT PUSH &nbsp;"]
84-
PUSH[/"Push to Repository"/]
100+
subgraph TRIGGER["📥 TRIGGER"]
101+
PUSH[/"Git Push"/]
85102
end
86103

87-
subgraph ORBS["&nbsp; ORBS &nbsp;"]
104+
subgraph ORBS["📦 ORBS"]
88105
NODE_ORB["circleci/node@7.2.1"]
89-
CUSTOM_ORB["robot-fleet - custom orb"]
106+
CUSTOM_ORB["robot-fleet — custom orb"]
90107
end
91108

92-
subgraph BUILD_STAGE["&nbsp; BUILD STAGE &nbsp;"]
93-
BUILD["BUILD JOB<br/>━━━━━━━━━━━━━<br/>checkout<br/>node/install-packages<br/>npm run build<br/>persist_to_workspace"]
109+
subgraph BUILD_STAGE["🔨 BUILD"]
110+
BUILD["<b>build</b><br/>checkout → install → build<br/>→ persist workspace"]
94111
end
95112

96-
subgraph TEST_STAGE["&nbsp; TEST STAGE &nbsp;"]
97-
TEST["TEST JOB<br/>━━━━━━━━━━━━━<br/>attach_workspace<br/>npm test<br/>store_test_results<br/>notify-slack-on-failure"]
113+
subgraph TEST_STAGE["🧪 TEST"]
114+
TEST["<b>test</b><br/>npm test → store results<br/>→ notify on fail ❌"]
98115
end
99116

100-
subgraph DEPLOY_FEATURE["&nbsp; FEATURE/DEVELOP BRANCHES &nbsp;"]
101-
DEV["DEPLOY-DEV<br/>━━━━━━━━━━━━━<br/>simulate-azure-deployment<br/>robot-fleet/health-check<br/>robot-fleet/validate-deployment<br/>notify-slack SUCCESS"]
117+
subgraph DEPLOY_DEV["🚀 DEV — feature/develop branches"]
118+
DEV["<b>deploy-dev</b><br/>Azure deploy → health-check<br/>→ validate → notify ✅"]
102119
end
103120

104-
subgraph DEPLOY_MAIN["&nbsp; MAIN BRANCH PIPELINE &nbsp;"]
105-
STAGING["DEPLOY-STAGING<br/>━━━━━━━━━━━━━<br/>simulate-azure-deployment<br/>robot-fleet/health-check<br/>robot-fleet/validate-deployment<br/>notify-slack SUCCESS"]
121+
subgraph DEPLOY_MAIN["🚀 MAIN BRANCH ONLY"]
122+
STAGING["<b>deploy-staging</b><br/>Azure deploy → health-check<br/>→ validate → notify ✅"]
106123

107-
NOTIFY_AWAIT["NOTIFY-AWAITING-APPROVAL<br/>━━━━━━━━━━━━━<br/>Slack: Awaiting Approval"]
124+
NOTIFY_AWAIT["⏳ <b>notify-awaiting-approval</b><br/>Slack notification"]
108125

109-
APPROVAL{{"HOLD-FOR-PRODUCTION<br/>━━━━━━━━━━━━━<br/>MANUAL APPROVAL<br/>REQUIRED"}}
126+
APPROVAL{{"⏸️ <b>hold-for-production</b><br/>MANUAL APPROVAL"}}
110127

111-
PROD["DEPLOY-PROD<br/>━━━━━━━━━━━━━<br/>simulate-azure-deployment<br/>robot-fleet/health-check<br/>robot-fleet/validate-deployment<br/>notify-slack SUCCESS"]
128+
PROD["<b>deploy-prod</b><br/>Azure deploy → health-check<br/>→ validate → notify ✅"]
112129
end
113130

114-
%% Main flow connections
131+
%% Main flow
115132
PUSH --> BUILD
116133
BUILD --> TEST
117-
TEST -->|"feature/* or develop"| DEV
118-
TEST -->|"main branch"| STAGING
134+
TEST -->|"feature/* develop"| DEV
135+
TEST -->|"main"| STAGING
119136
STAGING --> NOTIFY_AWAIT
120137
NOTIFY_AWAIT --> APPROVAL
121-
APPROVAL -->|"Approved"| PROD
138+
APPROVAL -->|"Approved ✓"| PROD
122139

123-
%% Orb usage dotted lines
140+
%% Orb connections
124141
NODE_ORB -.->|"install-packages"| BUILD
125-
CUSTOM_ORB -.->|"health-check<br/>validate-deployment"| DEV
126-
CUSTOM_ORB -.->|"health-check<br/>validate-deployment"| STAGING
127-
CUSTOM_ORB -.->|"health-check<br/>validate-deployment"| PROD
128-
129-
%% Styling classes
130-
classDef triggerStyle fill:#1e3a5f,stroke:#2c5282,color:#fff,stroke-width:2px,font-weight:bold
131-
classDef orbStyle fill:#553c9a,stroke:#805ad5,color:#fff,stroke-width:2px
132-
classDef buildStyle fill:#22543d,stroke:#38a169,color:#fff,stroke-width:2px
133-
classDef testStyle fill:#1e40af,stroke:#3b82f6,color:#fff,stroke-width:2px
134-
classDef deployStyle fill:#9a3412,stroke:#ea580c,color:#fff,stroke-width:2px
135-
classDef approvalStyle fill:#d97706,stroke:#f59e0b,color:#000,stroke-width:3px,font-weight:bold
136-
classDef prodStyle fill:#991b1b,stroke:#dc2626,color:#fff,stroke-width:2px
137-
138-
class PUSH triggerStyle
139-
class NODE_ORB,CUSTOM_ORB orbStyle
140-
class BUILD buildStyle
141-
class TEST testStyle
142-
class DEV,STAGING deployStyle
143-
class APPROVAL approvalStyle
144-
class PROD prodStyle
142+
CUSTOM_ORB -.->|"health-check validate"| DEV
143+
CUSTOM_ORB -.->|"health-check validate"| STAGING
144+
CUSTOM_ORB -.->|"health-check validate"| PROD
145+
146+
%% Styling - Colorblind safe palette (no red/green)
147+
classDef trigger fill:#1e40af,stroke:#1e3a8a,color:#fff,stroke-width:2px
148+
classDef orb fill:#0891b2,stroke:#0e7490,color:#fff,stroke-width:2px
149+
classDef build fill:#0369a1,stroke:#075985,color:#fff,stroke-width:2px
150+
classDef test fill:#7c3aed,stroke:#6d28d9,color:#fff,stroke-width:2px
151+
classDef deploy fill:#c2410c,stroke:#9a3412,color:#fff,stroke-width:2px
152+
classDef approval fill:#ca8a04,stroke:#a16207,color:#000,stroke-width:3px
153+
classDef prod fill:#be185d,stroke:#9d174d,color:#fff,stroke-width:2px
154+
155+
class PUSH trigger
156+
class NODE_ORB,CUSTOM_ORB orb
157+
class BUILD build
158+
class TEST test
159+
class DEV,STAGING,NOTIFY_AWAIT deploy
160+
class APPROVAL approval
161+
class PROD prod
145162
</pre>
146163
</div>
147164

148165
<div class="legend">
149-
<div class="legend-item trigger">
150-
<h3>Trigger</h3>
151-
<p>Git push to main, develop, or feature/* branches</p>
166+
<div class="legend-item">
167+
<div class="legend-dot trigger"></div>
168+
<span>Trigger</span>
152169
</div>
153-
<div class="legend-item orb">
154-
<h3>Orbs</h3>
155-
<p>circleci/node for caching, robot-fleet for health checks</p>
170+
<div class="legend-item">
171+
<div class="legend-dot orb"></div>
172+
<span>Orbs</span>
156173
</div>
157-
<div class="legend-item build">
158-
<h3>Build Stage</h3>
159-
<p>Install dependencies, build app, persist workspace</p>
174+
<div class="legend-item">
175+
<div class="legend-dot build"></div>
176+
<span>Build</span>
160177
</div>
161-
<div class="legend-item test">
162-
<h3>Test Stage</h3>
163-
<p>Run tests, store results, notify Slack on failure</p>
178+
<div class="legend-item">
179+
<div class="legend-dot test"></div>
180+
<span>Test</span>
164181
</div>
165-
<div class="legend-item deploy">
166-
<h3>Deploy Stage</h3>
167-
<p>Simulate Azure deployment, validate with orb commands</p>
182+
<div class="legend-item">
183+
<div class="legend-dot deploy"></div>
184+
<span>Deploy</span>
168185
</div>
169-
<div class="legend-item approval">
170-
<h3>Approval Gate</h3>
171-
<p>Manual approval required before production deploy</p>
186+
<div class="legend-item">
187+
<div class="legend-dot approval"></div>
188+
<span>Approval Gate</span>
172189
</div>
173-
<div class="legend-item prod">
174-
<h3>Production</h3>
175-
<p>Final deployment to production environment</p>
190+
<div class="legend-item">
191+
<div class="legend-dot prod"></div>
192+
<span>Production</span>
176193
</div>
177194
</div>
178195

179196
<footer>
180-
<p>Globomantics Robot Fleet API - CircleCI Advanced Configuration Course</p>
197+
Globomantics Robot Fleet API &bull; CircleCI Advanced Configuration
181198
</footer>
182199
</div>
183200

@@ -186,9 +203,12 @@ <h3>Production</h3>
186203
startOnLoad: true,
187204
securityLevel: 'loose',
188205
flowchart: {
189-
useMaxWidth: true,
206+
useMaxWidth: false,
190207
htmlLabels: true,
191-
curve: 'basis'
208+
curve: 'basis',
209+
padding: 20,
210+
nodeSpacing: 50,
211+
rankSpacing: 60
192212
}
193213
});
194214
</script>

0 commit comments

Comments
 (0)