Mermaid円グラフ — データの視覚化

Mermaidの円グラフ

円グラフはMermaidで最もシンプルなダイアグラムタイプです。データを円のスライスとして比率表示し、分布、市場シェア、リソース配分をドキュメントで示すのに最適です。

基本構文

pie title Language Distribution
    "JavaScript" : 45
    "TypeScript" : 30
    "Python" : 15
    "Other" : 10

各エントリはクォートで囲まれたラベルの後にコロンと数値が続きます。Mermaidは自動的にパーセンテージを計算し、色を割り当てます。

値の仕組み

値は相対的であり、絶対的なパーセンテージではありません。Mermaidはすべての値を合計し、各スライスを全体に対する割合として計算します。以下の2つのチャートは同じように描画されます：

pie title Budget Allocation
    "Engineering" : 50
    "Marketing" : 30
    "Operations" : 20

pie title Budget Allocation
    "Engineering" : 5
    "Marketing" : 3
    "Operations" : 2

タイトルの追加

pieの後のtitleキーワードでチャートの見出しを設定します。チャートの上部中央に表示されます：

pie showData title Error Distribution (Q4 2024)
    "Timeout" : 42
    "4xx Client" : 28
    "5xx Server" : 18
    "Network" : 12

showDataキーワードは各スライスにパーセンテージラベルを追加し、可読性を向上させます。

ベストプラクティス

1. 5〜7スライスに制限する — スライスが多すぎるとチャートが読みにくくなります。小さなカテゴリは「その他」にまとめましょう。
2. サイズ順に並べる — 最大のスライスを最初にリストすると、よりすっきりした視覚効果が得られます。
3. 説明的なラベルを使用する — 「タイプA」より「Timeoutエラー（42%）」の方が情報量が多いです。
4. テーブルと併用する — 正確なデータが必要な場合は、円グラフは近似的な性質を持つため、Markdownテーブルを併記しましょう。

円グラフの使用場面

円グラフは以下の場合に適しています：

• 部分が全体をどう構成するかを示す（例：モジュール別テストカバレッジ）
• 少数のカテゴリを比較する
• READMEやレポートでの簡易ビジュアルサマリー

時系列比較（Ganttやtimelineを使用）や、類似した値間の正確な差の表示（テーブルを使用）には向いていません。