XY chart (Mermaid)

When you want a quick chart and Vega-Lite feels like overkill, Mermaid's XY chart draws bars and lines from two arrays of numbers.

#What this example shows

A bar series and a line series on the same axes.
Explicit axis ranges, so the scale is stated.
Data written inline, which keeps it reviewable.

#A worked example

Open it, edit it, or copy the source below.

The source, which you can paste into a new diagram and edit:

xychart-beta
  title "Support tickets and first response time"
  x-axis [Apr, May, Jun, Jul, Aug, Sep]
  y-axis "Tickets" 0 --> 400
  bar [212, 245, 268, 311, 289, 254]
  line [180, 165, 158, 172, 140, 121]

#Making it your own

Both series share one y-axis, so scale them to be comparable or use two charts.
For anything with a legend, colours or grouping, use Vega-Lite instead.
The data is a snapshot embedded in the page. Say when it was taken.

Wardley map (Mermaid)

Value chain against evolution, drawn as a quadrant.

Ishikawa diagram (Mermaid)

Root cause analysis, grouped by category.

Mermaid examples

Back to the rest of these examples.

Copy it. Change one line. See what happens.