Skip to content

Commit 70dd08f

Browse files
colmariuscolmarius
committed
Style mermaid diagrams
1 parent aac1127 commit 70dd08f

9 files changed

Lines changed: 107 additions & 71 deletions

File tree

‎src/components/MermaidRenderer.astro‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -24,20 +24,4 @@
2424
pre > code.lang-mermaid {
2525
display: none;
2626
}
27-
28-
/* Mermaid diagram styles */
29-
.mermaid {
30-
display: flex;
31-
justify-content: center;
32-
margin: 2rem 0;
33-
}
34-
.mermaid svg {
35-
display: block;
36-
max-width: 100%;
37-
height: auto;
38-
}
39-
.mermaid-loading {
40-
opacity: 0;
41-
min-height: 200px;
42-
}
4327
</style>

‎src/content/posts/agent-planning-workflow.md‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -59,14 +59,6 @@ flowchart LR
5959
Update --> Done{Success<br/>Criteria?}
6060
Done -->|No| Code
6161
Done -->|Yes| Complete[✅ completed/<br/>new-feature.md]
62-
63-
style Todo fill:#1a1a1a,stroke:#FF9800,color:#fff
64-
style Progress fill:#1a1a1a,stroke:#2196F3,color:#fff
65-
style Complete fill:#1a1a1a,stroke:#4CAF50,color:#fff
66-
style Review fill:#1a1a1a,stroke:#9C27B0,color:#fff
67-
style Code fill:#1a1a1a,stroke:#2196F3,color:#fff
68-
style Update fill:#1a1a1a,stroke:#2196F3,color:#fff
69-
style Done fill:#1a1a1a,stroke:#F44336,color:#fff
7062
```
7163

7264
### Step 1: Create a Plan

‎src/content/posts/amp-power-patterns.md‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,6 @@ flowchart TD
3737
Q2 -->|No| Q3{Needs deep<br/>reasoning?}
3838
Q3 -->|No| Smart
3939
Q3 -->|Yes| Oracle[Oracle Mode<br/>GPT-5 reasoning]
40-
41-
style Start fill:#1a1a1a,stroke:#4CAF50,color:#fff
42-
style Rush fill:#1a1a1a,stroke:#4CAF50,color:#fff
43-
style Smart fill:#1a1a1a,stroke:#2196F3,color:#fff
44-
style Oracle fill:#1a1a1a,stroke:#9C27B0,color:#fff
45-
style Q1 fill:#1a1a1a,stroke:#FF9800,color:#fff
46-
style Q2 fill:#1a1a1a,stroke:#FF9800,color:#fff
47-
style Q3 fill:#1a1a1a,stroke:#FF9800,color:#fff
4840
```
4941

5042
### Rush Mode

‎src/content/posts/coding-with-agents-2025.md‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -60,14 +60,6 @@ flowchart TD
6060
Observe --> Decide{Goal Reached?}
6161
Decide -->|No| Think
6262
Decide -->|Yes| End([Done])
63-
64-
style Start fill:#1a1a1a,stroke:#4CAF50,color:#fff
65-
style End fill:#1a1a1a,stroke:#4CAF50,color:#fff
66-
style Think fill:#1a1a1a,stroke:#2196F3,color:#fff
67-
style Choose fill:#1a1a1a,stroke:#2196F3,color:#fff
68-
style Call fill:#1a1a1a,stroke:#FF9800,color:#fff
69-
style Observe fill:#1a1a1a,stroke:#9C27B0,color:#fff
70-
style Decide fill:#1a1a1a,stroke:#F44336,color:#fff
7163
```
7264

7365
This loop is why agents work. They don't just generate code—they:

‎src/content/posts/what-is-an-agent.md‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,6 @@ flowchart TD
4141
Observe --> Decide{Goal Reached?}
4242
Decide -->|No| Think
4343
Decide -->|Yes| End([Done])
44-
45-
style Start fill:#1a1a1a,stroke:#4CAF50,color:#fff
46-
style End fill:#1a1a1a,stroke:#4CAF50,color:#fff
47-
style Think fill:#1a1a1a,stroke:#2196F3,color:#fff
48-
style Choose fill:#1a1a1a,stroke:#2196F3,color:#fff
49-
style Call fill:#1a1a1a,stroke:#FF9800,color:#fff
50-
style Observe fill:#1a1a1a,stroke:#9C27B0,color:#fff
51-
style Decide fill:#1a1a1a,stroke:#F44336,color:#fff
5244
```
5345

5446
## Tools an Agent Can Call

‎src/pages/posts/[slug]/slides.astro‎

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,35 @@ const { Content } = await render(post);
8585
</div>
8686

8787
<script is:inline>
88+
// Shared Mermaid config (keep in sync with src/scripts/mermaid-config.ts)
89+
const mermaidConfig = {
90+
startOnLoad: false,
91+
securityLevel: 'strict',
92+
theme: 'default',
93+
themeVariables: {
94+
primaryColor: '#eef2ff',
95+
primaryTextColor: '#1e1b4b',
96+
primaryBorderColor: '#a5b4fc',
97+
secondaryColor: '#f8fafc',
98+
secondaryTextColor: '#0f172a',
99+
secondaryBorderColor: '#e2e8f0',
100+
tertiaryColor: '#ffffff',
101+
tertiaryTextColor: '#0f172a',
102+
tertiaryBorderColor: '#cbd5e1',
103+
noteBkgColor: '#ffffff',
104+
noteTextColor: '#0f172a',
105+
noteBorderColor: '#e2e8f0',
106+
lineColor: '#64748b',
107+
textColor: '#0f172a',
108+
mainBkg: '#ffffff',
109+
secondBkg: '#f8fafc',
110+
border1: '#e2e8f0',
111+
border2: '#cbd5e1',
112+
arrowheadColor: '#64748b',
113+
fontFamily: 'system-ui, -apple-system, sans-serif',
114+
},
115+
};
116+
88117
// Inline version of renderMermaid for slides (scoped to specific element)
89118
async function renderMermaidInline(root = document) {
90119
const selectors = [
@@ -129,7 +158,7 @@ const { Content } = await render(post);
129158
const { default: mermaid } = await import(
130159
'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'
131160
);
132-
mermaid.initialize({ startOnLoad: false, securityLevel: 'strict' });
161+
mermaid.initialize(mermaidConfig);
133162

134163
const mermaidElements = root.querySelectorAll('.mermaid');
135164
if (mermaidElements.length > 0) {
@@ -257,23 +286,5 @@ const { Content } = await render(post);
257286
}
258287
});
259288
</script>
260-
261-
<style is:global>
262-
/* Mermaid diagram styles */
263-
.mermaid {
264-
display: flex;
265-
justify-content: center;
266-
margin: 2rem 0;
267-
}
268-
.mermaid svg {
269-
display: block;
270-
max-width: 100%;
271-
height: auto;
272-
}
273-
.mermaid-loading {
274-
opacity: 0;
275-
min-height: 200px;
276-
}
277-
</style>
278289
</body>
279290
</html>

‎src/scripts/mermaid-config.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
* Shared Mermaid theme configuration
3+
* Matches website's indigo color scheme with light backgrounds and dark text
4+
*/
5+
export const mermaidConfig = {
6+
startOnLoad: false,
7+
securityLevel: 'strict',
8+
theme: 'default',
9+
themeVariables: {
10+
primaryColor: '#eef2ff',
11+
primaryTextColor: '#1e1b4b',
12+
primaryBorderColor: '#a5b4fc',
13+
secondaryColor: '#f8fafc',
14+
secondaryTextColor: '#0f172a',
15+
secondaryBorderColor: '#e2e8f0',
16+
tertiaryColor: '#ffffff',
17+
tertiaryTextColor: '#0f172a',
18+
tertiaryBorderColor: '#cbd5e1',
19+
noteBkgColor: '#ffffff',
20+
noteTextColor: '#0f172a',
21+
noteBorderColor: '#e2e8f0',
22+
lineColor: '#64748b',
23+
textColor: '#0f172a',
24+
mainBkg: '#ffffff',
25+
secondBkg: '#f8fafc',
26+
border1: '#e2e8f0',
27+
border2: '#cbd5e1',
28+
arrowheadColor: '#64748b',
29+
fontFamily: 'system-ui, -apple-system, sans-serif',
30+
},
31+
} as const;

‎src/scripts/mermaid.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { mermaidConfig } from './mermaid-config';
2+
13
export async function renderMermaid() {
24
// Prefer explicit language markers
35
let codes = Array.from(
@@ -40,10 +42,8 @@ export async function renderMermaid() {
4042
const { default: mermaid } = await import(
4143
'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'
4244
);
43-
mermaid.initialize({
44-
startOnLoad: false,
45-
securityLevel: 'strict',
46-
});
45+
// @ts-expect-error - CDN types incomplete
46+
mermaid.initialize(mermaidConfig);
4747
await mermaid.run({ querySelector: '.mermaid' });
4848

4949
// Remove loading class from all mermaid elements (including pre-rendered/cloned ones)

‎src/styles/global.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,4 +103,46 @@
103103
.prose-base code {
104104
@apply font-medium;
105105
}
106+
107+
/* Shared Mermaid diagram styles */
108+
.mermaid {
109+
display: flex;
110+
justify-content: center;
111+
margin: 2rem 0;
112+
}
113+
.mermaid svg {
114+
display: block;
115+
max-width: 100%;
116+
height: auto;
117+
}
118+
.mermaid-loading {
119+
opacity: 0;
120+
min-height: 200px;
121+
}
122+
123+
/* Rounded corners for Mermaid shapes */
124+
.mermaid svg rect {
125+
rx: 8;
126+
ry: 8;
127+
}
128+
129+
/* Style edge labels (Yes/No boxes) */
130+
.mermaid .edgeLabel {
131+
background-color: #ffffff !important;
132+
padding: 4px 8px !important;
133+
border-radius: 6px !important;
134+
border: 1px solid #e2e8f0 !important;
135+
}
136+
137+
.mermaid .edgeLabel rect {
138+
fill: #ffffff !important;
139+
stroke: #e2e8f0 !important;
140+
stroke-width: 1 !important;
141+
}
142+
143+
/* Hide empty edge labels */
144+
.mermaid .edgeLabel:empty,
145+
.mermaid .edgeLabel span:empty {
146+
display: none !important;
147+
}
106148
}

0 commit comments

Comments
 (0)