mermaidで棒グラフを描画するには

気づいたらサポートされてました。

mermaid

マインドマップの書式を公式サイトで確認したら 「え？ 新しいグラフが追加されたの？」となったので検証。 むしろ、なぜ今までコレがなかったのか。

xychart-betaという名称なのでまだベータ版らしい。

xychart

棒グラフや折れ線グラフを描きます。

```mermaid
xychart-beta

title "円相場"
x-axis "2025年5月" ["12日", "13日", "14日", "15日", "16日"]
y-axis "(ドル)" 140 --> 150
bar [147.81, 147.95, 146.27, 145.83, 145.36]
```

上のように書くと：

Obsidianで棒グラフを描けます。

はてなも対応してるかな。

xychart-beta

title "円相場"
x-axis "2025年5月" ["12日", "13日", "14日", "15日", "16日"]
y-axis "(ドル)" 140 --> 150
bar [147.81, 147.95, 146.27, 145.83, 145.36]

はいはい。 バージョンを11.6.0にすれば大丈夫。

折れ線グラフ

折れ線グラフはbarをlineに書き換えます。

```mermaid
xychart-beta

title "円相場"
x-axis "2025年5月" ["12日", "13日", "14日", "15日", "16日"]
y-axis "(ドル)" 140 --> 150
line [147.81, 147.95, 146.27, 145.83, 145.36]
```

最後の行がlineになってますよね。

xychart-beta

title "円相場"
x-axis "2025年5月" ["12日", "13日", "14日", "15日", "16日"]
y-axis "(ドル)" 140 --> 150
line [147.81, 147.95, 146.27, 145.83, 145.36]

これで推移を視覚化しやすい。

応用編

フロントマターが新設されました。

```mermaid
---
config:
  themeVariables:
    xyChart:
      titleColor: red
      backgroundColor: ivory
---
xychart-beta

title "円相場"
x-axis "2025年5月" ["12日", "13日", "14日", "15日", "16日"]
y-axis "(ドル)" 140 --> 150
bar [147.81, 147.95, 146.27, 145.83, 145.36]
```

図の色をカスタマイズできます。

---
config:
  themeVariables:
    xyChart:
      titleColor: red
      backgroundColor: ivory
---
xychart-beta

title "円相場"
x-axis "2025年5月" ["12日", "13日", "14日", "15日", "16日"]
y-axis "(ドル)" 140 --> 150
bar [147.81, 147.95, 146.27, 145.83, 145.36]

棒の色が用意されてない？ 2つ並べるとかは？ ここあたり、ベータ版ゆえか。

はてなブログの設定

はてなブログ 4.40.0

分類: ソーシャルネットワーキング,ライフスタイル
価格: 無料 (株式会社はてな)

「詳細設定」を開き「head要素にメタデータを追加」のところに下記スクリプトを付け加えます。 要するに「mermaidの11.6.0」ですね。

<script type="module">
import mermaid from 'https://unpkg.com/mermaid@11.6.0/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>

「保存」したらmermaidのコードブロックが使用可能になります。

まとめ

もう一つ「四象限チャート」も気になったので、また明日。