beautiful-mermaid

The library supports xychart-beta syntax for creating modern, polished charts. XY charts feature rounded bars, smooth cubic spline curves, and a monochromatic palette driven by the theme's accent color. If interactive: true is set in SVG options, tooltips will appear on hover.

// Bar chart
xychart-beta
    title "Monthly Revenue"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Revenue ($K)" 0 --> 500
    bar [180, 250, 310, 280, 350, 420]

// Line chart
xychart-beta
    title "User Growth"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    line [1200, 1800, 2500, 3100, 3800, 4500]

// Combined bar + line
xychart-beta
    title "Sales with Trend"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    bar [300, 380, 280, 450, 350, 520]
    line [300, 330, 320, 353, 352, 395]

// Horizontal orientation
xychart-beta horizontal
    title "Language Popularity"
    x-axis [Python, JavaScript, Java, Go, Rust]
    bar [30, 25, 20, 12, 8]

Since rendering is synchronous, use React.useMemo() to compute the SVG string. This prevents the 'flash' of unrendered content often seen with async renderers. You can pass CSS variables (e.g., var(--background)) to the options to allow the SVG to inherit theme changes from your application's CSS without requiring a React re-render.

import { renderMermaidSVG } from 'beautiful-mermaid'

function MermaidDiagram({ code }: { code: string }) {
  const { svg, error } = React.useMemo(() => {
    try {
      return {
        svg: renderMermaidSVG(code, {
          bg: 'var(--background)',
          fg: 'var(--foreground)',
          transparent: true,
        }),
        error: null,
      }
    } catch (err) {
      return { svg: null, error: err instanceof Error ? err : new Error(String(err)) }
    }
  }, [code])

  if (error) return <pre>{error.message}</pre>
  return <div dangerouslySetInnerHTML={{ __html: svg! }} />
}

The xychart-beta diagram type supports bar charts, line charts, or combinations of both. It can use categorical x-axes (labels) or numeric x-axes (ranges). You can also specify a horizontal orientation.

Vertical Chart (Default)

xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun]
    y-axis "Revenue (USD)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9800, 10500]
    line [5000, 6000, 7500, 8200, 9800, 10500]

Horizontal Chart

Add the horizontal keyword after the diagram type:

xychart-beta horizontal
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun]
    y-axis "Revenue (USD)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9800, 10500]

Numeric X-Axis

Instead of categories, provide a numeric range using -->:

xychart-beta
    x-axis 0 --> 100
    y-axis 0 --> 50
    line [10, 20, 35, 40, 45]

To add support for xychart-beta or xychart diagrams, you must update the main entry point to detect the diagram type and route it through the Parse → Layout → Render pipeline.

1. Update detectDiagramType: Add logic to identify the diagram type using a word boundary (\b) to ensure xychart-beta is correctly matched even if followed by other parameters.
2. Update renderMermaid: Add a case for xychart that coordinates the three stages: parseXYChart, layoutXYChart, and renderXYChartSvg.

// 1. Update detection logic
function detectDiagramType(text: string): 'flowchart' | 'sequence' | 'class' | 'er' | 'xychart' {
  const firstLine = text.trim().split(/[\n;]/)[0]?.trim().toLowerCase() ?? ''

  if (/^xychart-beta\b/.test(firstLine)) return 'xychart'
  if (/^xychart\b/.test(firstLine)) return 'xychart'
  // ... other types
  return 'flowchart'
}

// 2. Update the render switch
case 'xychart': {
  const chart = parseXYChart(lines)
  const positioned = await layoutXYChart(chart, options)
  return renderXYChartSvg(positioned, colors, font, transparent)
}