Upgraded beautiful-mermaid to 1.1.3, fixed XY chart bar...

beautiful-mermaid 1.1.3#

Upgraded from 0.1.2. The big API change: renderMermaid (async) became renderMermaidSVG (sync), which simplified both the Mermaid component and the rehype plugin. The new version also adds XY chart support (xychart-beta) for bar and line charts, a renderMermaidASCII export for plain-text diagram output, and the theme config got extracted to a shared mermaid-themes.ts file.

XY chart bars had rounded corners#

The existing CSS rule rx: 0 !important on rect elements only works for diagram nodes. XY chart bars render as <path> elements with quadratic Bezier curves for rounded ends. The fix lives in transform-mermaid-svg.ts: at build time, any <path class="xychart-bar"> gets parsed and converted to a plain <rect> with the same bounding box. Square corners, no runtime cost.

Diagram modal went edge-to-edge#

The expand modal was a card (95% width, 90vh, max-width 1400px, 1px border) floating over a blurred backdrop. That felt like an extra step between you and the diagram. Now it fills the full viewport. The card entrance animation (translateY(20px)) was removed since there’s nothing to slide in. The duplicate responsive rules for narrow/mobile breakpoints that already set width: 100%; height: 100% got cleaned up since that’s now the default.

Double divider in the modal#

The split-view divider between diagram and code pane was 2px thick: 1px from the .diagram-modal-divider background plus 1px from .diagram-modal-code-pane’s border-left. Removed the border-left.

Expand button inside the modal#

The copy-button web component was injecting an expand button into the modal’s header. You’re already expanded, so that’s redundant. Added data-expandable="false" to the modal’s copy button instance.

Unified drag handles#

The code panel divider used three dots (circles via border-radius: 50% plus a box-shadow trick for the middle dot). The diagram modal divider used a solid 7x40px rectangle. Now both use the same indicator: two 3x3px squares with 4px gap, opacity 0 at rest fading to 0.6 on hover with accent color.

Diagram text was too heavy#

The library sets node labels and participant names to font-weight: 500 (medium), which in Satoshi renders noticeably heavy at small sizes. Normalized all diagram text to font-weight: 400 via CSS. Font size already provides hierarchy (18px titles vs 13px labels vs 11px messages), so the weight variation was just noise.

Also stripped the broken Google Fonts @import from every SVG. The library generates an import URL with the literal string var(--font-sans) as the font family, which can’t resolve. The actual font loads from the page’s CSS, so this was a wasted HTTP request per diagram.