Mermaidで棒グラフや折れ線グラフを作図できるXYchart

このファイルについて

Mermaidで棒グラフや折れ線グラフが作図可能なXYchartのMarkdownへの埋め込みサンプルです。 β版なのでObsidian上でまだ反映されない仕様もありますが、他にも様々な種類の図やグラフが開発されており、今後Markdownファイルに図を埋め込む際の標準になりそうです。

XY Chart | Mermaid

GeminiのGoogle Search機能をオンにしてワンショットでのグラフ化を試みましたが、検索では正確なデータの抽出に失敗したので、URL contextで気象庁のページURLを読み込ませてやると、正確なデータを抽出してXYchartに変換してくれました。

グラフ：2015年8月と2025年8月の名古屋の最高気温の比較

---
config:
    xyChart:
        width: 1000
        height: 500
        showDataLabel: true
        xAxis:
            labelFontSize: 11
---
xychart-beta
title "2015年8月と2025年8月の名古屋の最高気温の比較"

x-axis "日付" 
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]

y-axis "最高気温 (°C)" 25 --> 40
Bar [38.9, 38.8, 38.4, 36.8, 37.7, 38.4, 34.9, 35.5, 35.5, 29.0, 29.4, 33.1, 34.5, 34.4, 36.6, 37.0, 37.3, 38.6, 37.5, 38.3, 39.0, 37.7, 35.6, 38.4, 36.6, 37.0, 37.7, 37.3, 35.2, 39.1, 40.0]
Line [38.9, 38.8, 38.4, 36.8, 37.7, 38.4, 34.9, 35.5, 35.5, 29.0, 29.4, 33.1, 34.5, 34.4, 36.6, 37.0, 37.3, 38.6, 37.5, 38.3, 39.0, 37.7, 35.6, 38.4, 36.6, 37.0, 37.7, 37.3, 35.2, 39.1, 40.0]

Line [38.4, 37.0, 36.4, 36.4, 35.7, 34.0, 38.0, 36.6, 35.5, 36.8, 36.4, 35.2, 30.6, 34.0, 35.3, 33.3, 30.6, 33.6, 31.7, 28.0, 30.0, 32.4, 33.7, 32.2, 26.3, 30.0, 31.8, 27.3, 28.0, 27.4, 28.8]

参照データ
2015年8月：気象庁｜過去の気象データ検索
2025年8月：気象庁｜過去の気象データ検索

こちらはMemaid Live Editorで同じMermaidデータを画像化したもの。最新バージョンでは値のラベリングが可能になっています。