The mermaid diagram implementation needed some polish. State diagram circles didn’t match the squared-off design language, and there was no way to copy diagram code.

SVG Post-Processing#

The solution was build-time transformation using linkedom. After mermaid generates the SVG, I parse and modify it directly:

• Convert <circle> elements to <rect> for state diagram start/end nodes
• Keeps the squared-off aesthetic consistent across the site

The transformation happens during the build, so there’s no runtime overhead.

The Copy Button#

Added a web component-based copy button that’s compatible with View Transitions. It provides an accessible dropdown with keyboard navigation and proper ARIA attributes.

Four actions:

• Copy Mermaid for reuse in other tools
• Copy SVG Code for embedding the markup directly
• Download SVG saves the vector file
• Download PNG saves a 2x resolution raster image

The PNG download converts SVG to canvas at 2x scale for retina quality, then triggers a file download.

The button sits at low opacity by default, becoming visible on hover. Can be toggled per-diagram with showCopyButton={false}.

Alignment Options#

Added container alignment props for different use cases:

• align="left" / align="center" / align="right" for positioning
• align="full" stretches the diagram to container width

Contrast Refinement#

Dialed back the diagram aesthetics:

• Switched from --color-text to --color-text-muted for strokes
• Reduced line width from 1.5px to 1px
• Result: diagrams that complement the content rather than dominating it

Here’s an example state diagram showing the refinements:

The start and end nodes are now squares, matching the rest of the design system.