Emit classAssignments as CSS classes on SVG node elements

Summary

When using :::className syntax, the assigned class names are parsed correctly into classAssignments but are only used to look up classDef inline styles. The class name itself is never emitted as a CSS class attribute on the SVG <g> element.

This prevents external CSS styling of individual nodes, which is the standard behavior in mermaid.js and is really useful when you're displaying an inline SVG in a page that already has a cohesive set of CSS classes defined.

Current behavior

import { parseMermaid, renderMermaidSVG } from "beautiful-mermaid"

const graph = parseMermaid(`graph LR
    A[Start]:::highlight --> B[End]

If a matching classDef for highlight exists, its styles are resolved to inline fill/stroke attributes, but the class name highlight is discarded either way.

Expected behavior

Class names should be added to the SVG element's class attribute:

<g class="node highlight" data-id="A" ...>

Why this matters

• Mermaid.js compatibility. The standard mermaid renderer applies :::className as actual CSS classes on SVG elements. Users migrating from mermaid.js expect this.
• External CSS styling. The main use case for :::className without a classDef is external CSS. Right now this is a silent no-op.
• Non-breaking. CSS classes with no matching rules are inert, so existing diagrams render identically. Inline attributes from classDef have higher specificity than class-based CSS rules, so both mechanisms become complementary.
• Minimal change. The renderer already has data-id on each <g> and access to the classAssignments map. Appending the value to the existing class attribute should be straightforward.

Versions

• beautiful-mermaid: 1.1.3