Mermaid XY チャートのチートシート

2 本の軸の上の、折れ線グラフまたは棒グラフ。

このページのすべての図は

Mernyx（macOS 向けネイティブ Mermaid エディタ）が描いたものです。ブラウザで動く Mermaid.js ではなく、App のキャンバスで使うのと同じレンダラーです。

折れ線

x 軸が位置を並べ、データは位置ごとに 1 つの数です。

xychart
    x-axis [jan, feb, mar, apr]
    y-axis "Revenue" 0 --> 100
    line [10, 40, 60, 90]

折れ線グラフ。jan から apr まで 4 つの点が、10 から 90 まで上がっています。

棒グラフ

bar は同じデータを、線ではなく棒で描きます。

xychart
    x-axis [jan, feb, mar, apr]
    y-axis "Revenue" 0 --> 100
    bar [10, 40, 60, 90]

棒グラフ。jan から apr まで 4 本の棒が、10 から 90 まで上がっています。

2 つの系列とタイトル

折れ線と棒は同じグラフに並べられます。タイトルは 1 行で書きます。

xychart
    title "Sales revenue"
    x-axis [jan, feb, mar, apr]
    y-axis "Revenue (in $)" 4000 --> 11000
    line [5000, 6000, 7500, 8200]
    bar [4000, 5500, 7000, 8100]

Sales revenue というタイトルのグラフ。4 か月分の折れ線と棒が並んでいて、どちらも上がり、y 軸は 4000 から 11000 までです。

x 軸に名前をつける

一覧の前に置いたラベルが軸に名前を与えます。

xychart
    x-axis "Month" [jan, feb, mar, apr]
    y-axis "Revenue" 0 --> 100
    line [10, 40, 60, 90]

折れ線グラフ。x 軸の上に Month とラベルがあり、下に jan から apr。y 軸は Revenue とラベルされ、0 から 100 までです。

Mermaid XY チャートのチートシート

折れ線

棒グラフ

2 つの系列とタイトル

x 軸に名前をつける

Mernyx で描いてみる