Bump mermaid from 11.17.2 to 12.0.0

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)
+})

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'
   }
 })

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;
   }

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",