← All updates

Mermaid xychart-beta — line & bar charts in your PDFs

Markdown documents can now embed Mermaid xychart-beta diagrams — line and bar charts with titled axes — rendered as crisp native PDF vector graphics like every other diagram type.

mermaidmarkdowndiagrams

xychart-beta is now supported wherever Mermaid is — POST /api/v1/md, the CLI, and the blog renderer. It's the ninth Mermaid diagram type alongside flowchart, sequence, class, state, gantt, pie, ER, and gitgraph.

Drop a fenced ```mermaid block using the xychart syntax and it renders as native PDF vector graphics — no rasterization, sharp at any zoom:

xychart-beta
    title "Quarterly revenue vs target"
    x-axis "Quarter" [Q1, Q2, Q3, Q4]
    y-axis "USD (k)" 0 --> 120
    bar [40, 70, 95, 110]
    line [50, 65, 90, 100]

You get a titled chart with auto-spaced y-axis ticks and gridlines, a rotated y-axis label, category labels along the x-axis, grouped bars, and overlaid line series with point markers. Multiple line and bar series can be combined in one chart. The y-range comes from the y-axis bounds you give, or is derived from the data when you omit them.

The categorical x-axis (a [...] list of labels) is the common case for time-series and comparison charts; an axis title is optional. Charts render vertically — the horizontal keyword is accepted but draws vertically for now.