v1.1.2

Ship pre-built JavaScript for webpack/vite/Node consumers.

What changed

• Dual exports — Bun gets raw .ts (zero overhead), Node/webpack/vite get pre-built ESM from dist/
• No config needed — conditional exports in package.json handle routing automatically
• tsup build — ESM + declaration files + source maps

Fixes

• Closes #45 — package no longer breaks webpack consumers that don't transpile node_modules

Full Changelog

v1.1.1...v1.1.2

v1.1.0

What's New

XY Charts (bar, line, combined)

Full support for Mermaid's xychart-beta syntax — bar charts, line charts, and combinations with:

• Multi-series with monochromatic color palette derived from theme accent
• Smooth cubic spline interpolation for line series
• Interactive tooltips (hover bars/data points)
• Horizontal orientation support
• Dot grid background, rounded bars, floating labels
• ASCII/Unicode rendering for terminal output
• Full theme support with live CSS variable switching

Inline Edge Styling (linkStyle)

Style individual edges by index or set defaults — stroke, stroke-width supported. Works in flowcharts and state diagrams.

CJK State Diagram Support

State diagrams now correctly parse Chinese, Japanese, Korean and other Unicode characters in state names, transitions, and descriptions.

Text-Embedded Edge Labels

Flowcharts now support text-embedded label syntax (-- Yes -->, -. Maybe .->, == Sure ==>) as an alternative to pipe syntax (-->|Yes|).

Thanks to @liuxiaopai-ai for the original branch label implementation in #36.

Full Changelog

• feat: XY Charts — bar, line, combined, horizontal, interactive (#40)
• feat: linkStyle support (#47)
• fix: CJK Unicode support in state diagrams (#43, #49)
• feat: text-embedded edge labels (#32, #49)

v1.0.2

Changes

• Remove DOM lib from tsconfig — use ambient declare const for browser globals (document, window)
• This avoids pulling in the entire DOM type namespace for a library with zero DOM dependencies

v1.0.1

Layout Quality Improvements

• Centering: contentAlignment H_CENTER V_CENTER for subgraphs
• Node placement: BALANCED fixed alignment at root and subgraph level
• Edge spacing: optimized edgeEdge, edgeEdgeBetweenLayers, edgeNodeBetweenLayers
• High-degree nodes: special treatment for nodes with 8+ connections
• Post-compaction: LEFT_RIGHT_CONSTRAINT_LOCKING at root level
• Model order: NODES_AND_EDGES preservation at root level

Layer Alignment

Post-processing step that snaps same-layer nodes to uniform flow-axis positions, fixing the visual stagger caused by ELK's orthogonal edge routing. Uses single-linkage clustering for accurate grouping across any fan-out size.

Edge Bundling

Fan-out/fan-in edges now share common trunk segments with subgraph-aware junction placement.

Bug Fixes

• Fix edit dialog SVG rendering, source panel update, and close timing
• Workarounds for ELK 0.11.0 compound node bugs (eclipse-elk/elk#724)

v1.0.0

beautiful-mermaid v1.0.0

Layout Engine

• ELK.js replaces dagre — fully synchronous layout via FakeWorker bypass, better edge routing and subgraph handling
• Shape-aware edge clipping — edges terminate at actual shape boundaries (e.g. diamond vertices), not bounding boxes
• New layout options — nodeSpacing, layerSpacing, componentSpacing, thoroughness for fine-grained control
• Disconnected component support — graphs with unconnected subgraphs now lay out properly
• Per-subgraph direction overrides — nested subgraphs can have independent LR/TD/BT/RL direction

Multi-line Labels & Formatting

• <br> tags in node labels, edge labels, and subgraph headers — line breaks work everywhere
• Inline formatting — <b>, <i>, <u>, <s> tags render as bold/italic/underline/strikethrough in SVG
• Variable-width text measurement — character-class buckets (narrow, wide, CJK, emoji) instead of fixed-ratio estimation

Themeable ASCII

• ANSI color modes — none, ansi16, ansi256, truecolor, and html (for browser rendering)
• AsciiTheme type — customize colors per role: fg, border, line, arrow, corner, junction
• colorMode: 'auto' — auto-detects terminal capabilities

ASCII Shapes

12+ distinct node shapes in terminal output:
rectangle, rounded, diamond, circle, hexagon, stadium, cylinder, doublecircle, subroutine, asymmetric, trapezoid, state-start, state-end

ASCII Rendering Improvements

• Edge bundling — fan-in/fan-out patterns merge into visual junctions (TD direction)
• Multi-line labels in both nodes and edges
• Multi-section boxes for class diagrams (name / attributes / methods) and ER diagrams
• Canvas role tracking — each character tagged with semantic role for accurate colorization
• Diagonal line validation — assertNoDiagonals() for test assertions

SVG Renderer

• Semantic data attributes on all elements (data-id, data-from, data-to, data-style, data-label)
• Improved arrow markers — combined fill + stroke for crisp rendering at small sizes
• Better edge label pills — increased stroke width, improved contrast

Breaking Changes

• dagre removed — replaced by ELK.js (API unchanged, layout results differ)
• tsup.config.ts removed (no longer bundled separately)

v0.1.3

What's New

Security

• XSS Prevention - Escape inline style values to prevent SVG attribute injection (#8)

Features

• Browser Bundle - CDN support via unpkg/jsDelivr for script tag usage (#9)

  <script src="https://unpkg.com/beautiful-mermaid/dist/beautiful-mermaid.browser.global.js"></script>
  <script>
    const { renderMermaid, THEMES } = beautifulMermaid;
    renderMermaid('graph TD; A-->B').then(svg => { ... });
  </script>

Contributors

Thanks to our first external contributors!