fix: sequence diagram support via mermaid/svgdom upgrade

.github/workflows/publish.yml

@@ -22,9 +22,6 @@ jobs:
           node-version: 22
           registry-url: 'https://registry.npmjs.org'
 
-      - name: Ensure npm with OIDC support
-        run: npm install -g npm@latest
-
       - name: Install dependencies
         run: npm install
 

CHANGELOG.md

@@ -7,9 +7,9 @@ Project uses [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [0.3.1] - 2026-04-28
 
-### Fixed
+### Added
 
-- Sequence diagram rendering (polyfill CSSStyleDeclaration for svgdom)
+- Sequence diagram support (mermaid 11.14, svgdom 0.1.23)
 
 ### Changed
 

src/mermaid/render.ts

@@ -1,6 +1,5 @@
 import { createHash } from 'node:crypto'
 import { Resvg } from '@resvg/resvg-js'
-import { patchSvgdomStyle } from './style-polyfill.js'
 
 // Patch JSON.stringify to handle circular references (elkjs debug logs)
 const originalStringify = JSON.stringify
@@ -50,8 +49,6 @@ async function loadMermaid() {
       win.setInterval = setInterval
       win.clearInterval = clearInterval
       win.console = console
-
-      patchSvgdomStyle(win)
     }
 
     // Load and register ELK layout engine
@@ -117,6 +114,9 @@ export async function renderMermaid(code: string): Promise<Buffer> {
     svg = svg.replace(/style="[^"]*max-width:[^;]*;?\s*"/, '')
   }
 
+  // resvg doesn't support orient="auto-start-reverse" on markers
+  svg = svg.replace(/orient="auto-start-reverse"/g, 'orient="auto"')
+
   // Convert SVG to PNG with 4x scale for crisp images
   const resvg = new Resvg(svg, {
     fitTo: {

test/mermaid-elk.test.ts

@@ -87,10 +87,7 @@ flowchart TB
     expect(filename).toMatch(/^mermaid-[a-f0-9]{12}\.png$/)
   })
 
-  it('renders sequence diagrams - regression test for CSSStyleDeclaration polyfill', async () => {
-    // D3 (bundled in mermaid) calls element.style.removeProperty() during sequence rendering
-    // svgdom doesn't implement CSSStyleDeclaration, so we polyfill it
-    // Without the polyfill: TypeError: this.style.removeProperty is not a function
+  it('renders sequence diagrams', async () => {
     const sequenceDiagram = `
 sequenceDiagram
     participant A as Service A
@@ -100,13 +97,10 @@ sequenceDiagram
 `
     const png = await renderMermaid(sequenceDiagram)
 
-    // Check PNG magic bytes
     expect(png[0]).toBe(0x89)
     expect(png[1]).toBe(0x50)
     expect(png[2]).toBe(0x4e)
     expect(png[3]).toBe(0x47)
-
-    // Sequence diagram should render to reasonable size
     expect(png.length).toBeGreaterThan(5000)
   })