fix(mermaid): inject SVG via HTML parser, not strict XML

[thomnico]

fix(mermaid): inject SVG via HTML parser, not strict XML

TL;DR

Switch templates/mermaid-flowchart.html from setting the canvas's HTML
property to a DOMParser that parses the SVG as text/html (HTML5,
lenient) instead of image/svg+xml (strict XML). Document the trap in
references/css-patterns.md.

Why

Mermaid 10+ emits HTML inside <foreignObject> for multi-line node labels:

<foreignObject>
  <p>line one<br>line two</p>
</foreignObject>

The unclosed <br> is valid HTML but not valid XML. That distinction
silently breaks two patterns the skill — and agents reusing the skill under
stricter security policies — naturally reach for:

Approach	XSS scanner	Renders Mermaid	Verdict
Setting the host's HTML property to the SVG string (canonical)	Flagged as a potential sink	Yes	Fine without a scanner; agents under Semgrep refuse to emit it
parseFromString(svg, 'image/svg+xml') + adoptNode	Passes	No — parser stops at the first <br>, silently truncates the SVG	Looks like a "one-node diagram" bug
parseFromString(svg, 'text/html') + adoptNode	Passes	Yes — HTML5 parser handles <br> and preserves the SVG namespace via foreign-content rules	Use this

The XML-parser failure mode is the dangerous one because it does not
throw — only the first node renders, every edge disappears, and the
browser console is empty. The underlying error surfaces only via Chrome's
page error overlay: Opening and ending tag mismatch: br line 1 and p.

Repro (before fix)

A real-world plan-review diagram I generated under a Semgrep policy that
blocks the canonical injection pattern:

• Source: 15 nodes, 17 edges, multi-line labels
• Rendered before fix: 1 node, 0 edges
• Rendered after fix: 15 nodes, 17 edges ✓

Changes

• plugins/visual-explainer/templates/mermaid-flowchart.html
  • Replace the HTML-property assignment in render() with DOMParser
    • text/html + adoptNode
  • Inline comment pointing to the docs
• plugins/visual-explainer/references/css-patterns.md
  • Update the inline render() example to use the same pattern
  • Add a new subsection "Injecting Mermaid SVG: pick the right parser"
    with the comparison table, failure mode, and a canonical
    injectSvg(host, svgMarkup) helper

Compatibility

• Works in all browsers that support DOMParser with text/html parsing —
  i.e. every browser that supports Mermaid 10+ in the first place.
• No behaviour change in browsers where the previous pattern worked: the
  parsed SVG is identical.
• Removes a CSP / XSS-scanner blocker that prevents the skill from being
  usable in security-hardened environments.

Out of scope

• The openInNewTab handler still serialises via a template literal;
  that string is then parsed by the browser when the new tab loads, so it
  does not hit the same trap. Left as-is to keep the diff minimal.