From 36ab303af0c08326246ee1df0a951da0111c684f Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 14 Sep 2026 23:36:21 +0000
Subject: [PATCH 1/2] Bump mermaid from 11.17.2 to 12.0.0

Bumps [mermaid](https://github.com/mermaid-js/mermaid) from 11.17.2 to 12.0.0.
- [Release notes](https://github.com/mermaid-js/mermaid/releases)
- [Commits](https://github.com/mermaid-js/mermaid/compare/mermaid@11.17.2...mermaid@12.0.0)

---
updated-dependencies:
- dependency-name: mermaid
  dependency-version: 12.0.0
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 55adbeae..7da26319 100644
--- a/package.json
+++ b/package.json
@@ -98,7 +98,7 @@
     "cheerio": "^1.0.0-rc.10",
     "installed-check": "^11.0.0",
     "jsonfeed-to-atom": "^1.2.5",
-    "mermaid": "^11.17.2",
+    "mermaid": "^12.0.0",
     "neostandard": "^0.13.0",
     "npm-run-all2": "^9.0.2",
     "preact": "^10.29.6",

From 98aeb366197583096fba4637ff3d783e27c9e74c Mon Sep 17 00:00:00 2001
From: Bret Comnes <bret@comnes.org>
Date: Mon, 14 Sep 2026 18:18:01 -0700
Subject: [PATCH 2/2] Fix documentation diagram colors for Mermaid 12

---
 browser-tests/docs-diagrams.spec.js | 24 ++++++++++++++++++++++++
 docs/implementation/client.ts       |  3 +--
 docs/implementation/style.css       | 12 +++++++++++-
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/browser-tests/docs-diagrams.spec.js b/browser-tests/docs-diagrams.spec.js
index 7022ad7c..d56cea46 100644
--- a/browser-tests/docs-diagrams.spec.js
+++ b/browser-tests/docs-diagrams.spec.js
@@ -11,6 +11,7 @@ test('the built documentation loads Mermaid and renders diagrams without errors'
   page.on('pageerror', error => errors.push(error.message))
   await page.goto(`${siteURL}/docs/implementation/`)
   const diagrams = page.locator('.mermaid')
+  await expect(diagrams).toHaveCount(3)
   await expect(diagrams.first()).toBeVisible()
   for (const diagram of await diagrams.all()) {
     await expect(diagram.locator('svg')).toBeVisible()
@@ -19,3 +20,26 @@ test('the built documentation loads Mermaid and renders diagrams without errors'
   }
   expect(errors).toEqual([])
 })
+
+test('diagram edges and arrowheads follow live light/dark color changes', async ({ page, siteURL }) => {
+  await page.emulateMedia({ colorScheme: 'light' })
+  await page.goto(`${siteURL}/docs/implementation/`)
+  const diagrams = page.locator('.mermaid')
+  await expect(diagrams).toHaveCount(3)
+  for (const diagram of await diagrams.all()) {
+    await expect(diagram.locator('svg')).toBeVisible()
+  }
+
+  const colors = new Set()
+  for (const colorScheme of ['light', 'dark']) {
+    await page.emulateMedia({ colorScheme })
+    const color = await page.locator('body').evaluate(element => getComputedStyle(element).color)
+    colors.add(color)
+    for (const diagram of await diagrams.all()) {
+      await expect(diagram.locator('.flowchart-link').first()).toHaveCSS('stroke', color)
+      await expect(diagram.locator('.marker path').first()).toHaveCSS('fill', color)
+      await expect(diagram.locator('.marker path').first()).toHaveCSS('stroke', color)
+    }
+  }
+  expect(colors.size).toBe(2)
+})
diff --git a/docs/implementation/client.ts b/docs/implementation/client.ts
index 80b35627..46260259 100644
--- a/docs/implementation/client.ts
+++ b/docs/implementation/client.ts
@@ -18,7 +18,6 @@ mermaid.initialize({
     subGraphTitleMargin: { top: 8, bottom: 16 },
   },
   themeVariables: {
-    fontFamily: 'system-ui, sans-serif',
-    lineColor: 'currentColor'
+    fontFamily: 'system-ui, sans-serif'
   }
 })
diff --git a/docs/implementation/style.css b/docs/implementation/style.css
index 18d6e7f3..519cadb0 100644
--- a/docs/implementation/style.css
+++ b/docs/implementation/style.css
@@ -18,7 +18,8 @@
   }
 
   /* Mermaid embeds ID-scoped theme rules in each SVG. Override only its
-     surfaces and labels so diagrams follow the site's live light/dark theme. */
+     surfaces, labels, and edges so diagrams follow the site's live light/dark
+     theme without passing CSS color keywords to Mermaid's color parser. */
   .mermaid .node :is(rect, polygon, circle, path),
   .mermaid .edgeLabel rect {
     fill: var(--background) !important;
@@ -30,6 +31,15 @@
     stroke: var(--site-muted) !important;
   }
 
+  .mermaid .flowchart-link {
+    stroke: var(--text) !important;
+  }
+
+  .mermaid .marker {
+    fill: var(--text) !important;
+    stroke: var(--text) !important;
+  }
+
   .mermaid text {
     fill: var(--text) !important;
   }