Mermaidで円グラフを作成する方法
編集者： Edraw
グラフ・チャート
Mermaidを利用して円グラフを作成する時、まずデータを整理し、Mermaidの文法を理解し、最後に対応するMermaid エディタを選ぶことが重要です。この三つのポイントを押さえることで、初心者でも簡単にきれいな円グラフを描くことができます。
Step1.データの整理
円グラフは、各項目が全体に占める割合を視覚化するのに適しています。作成する前に、各項目の数値データを整理しておきましょう。Mermaidでは、提供した数値から自動で比率を計算して円グラフを描画できます。
例えば、2025年第三四半期の売上を示す場合は以下のように整理します。
"製品A" : 400
"製品B" : 550
"製品C" : 350
注意点として、既に比率を計算したデータを入力する場合は、小数点以下2桁までに収める必要があります。例えば、以下のように比率をそのまま入力すると正確に表示されません。
"製品A" : 32.398%
"製品B" : 27.101%
"製品C" : 40.501%
Mermaidでは、原則として生データを入力し、自動計算させるのが基本です。
Step2.円グラフの基本記法
Mermaidで円グラフを描く場合、基本的な記法は非常にシンプルです。以下の例を見てください。
pie showData title 2025年第三四半期の売上 "製品A" : 400 "製品B" : 550 "製品C" : 350
ポイントは以下の通りです。
-
pieで円グラフであることを宣言する
-
showDataでデータ表示の有無を指定（省略可能）
-
titleでグラフのタイトルを設定
-
項目名は半角英語の引用符「" "」で囲み、コロン「:」の後に数値を記述
この基本文法だけでも、すぐに円グラフを描画できます。
参考文献：https://mermaid.js.org/syntax/pie.html
Step3.高度設定でスタイルを調整
Mermaidでは、高度な記法を使うことで円グラフの色やフォントサイズを自由にカスタマイズできます。例えば月間支出割合を示す円グラフを作る場合、以下のように設定できます。
%%{init: {'themeVariables': {
'pie1': '#ff9999',
'pie2': '#66ccff',
'pie3': '#99ff99',
'pie4': '#ffcc66',
'pie5': '#cc99ff',
'pie6': '#66ffcc',
'pie7': '#ff6666',
'pie8': '#cccccc',
'pieFontSize': '18px',
'pieLabelFontSize': '14px' }}}%%
pie title 月間支出割合
"家賃" : 50000
"食費" : 25000
"交通費" : 10000
"娯楽" : 8000
"通信費" : 6000
"水道光熱費" : 12000
"貯金" : 30000
"その他" : 4000
反映された円グラフは以下のようです。
各プロパティの概要は以下の通りです。
| 変数名 | 種類 | 説明 | 設定例 |
|---|---|---|---|
| pie1〜pie8 | 色 (#HEX) | 各スライスの塗りつぶし色 | #ff9999 |
| pieFontSize | 文字列(px) | タイトルのフォントサイズ | 18px |
| pieLabelFontSize | 文字列(px) | 扇区ラベルのフォントサイズ | 14px |
| pieStrokeWidth | 数値(px) | 枠線幅（対応スライスのみ） | 2 |
| pieStrokeColor | 色 (#HEX) | 枠線色（対応スライスのみ） | #333333 |
| pieTextColor | 色 (#HEX) | 文字色（対応スライスのみ） | #000000 |
| pieLegendTextSize | 文字列(px) | 凡例の文字サイズ（対応スライスのみ） | 12px |
これにより、色や文字サイズ、枠線などのスタイルを自由に調整できます。
Step4. Mermaidエディタの導入
文法を理解したら、Mermaid対応のツールでコードを入力して円グラフを描画できます。代表的なエディタは以下の通りです。
②VSCode（プラグインをインストールする必要あり）
プラグインをインストールする方法はこちらの記事をご参照ください。
コードをマークダウンファイル（.md）として保存して、ctrl+shift+Vを押せば、円グラフが自動生成されます。
ここで強調したいのは、VSCodeを利用する場合、最初に必ず「```mermaid」を宣言する必要がある点です。
③Notion（Mermaid対応ブロックを利用）
「/code」を入力すると、Mermaid機能が起動し、コードを入力できるエリアが表示されるようになります。
これらの環境では、入力したコードを即座に円グラフに変換でき、編集や共有も容易です。
よくある質問
①Mermaidで円グラフを作成する方法の長所短所
メリットは、簡単な記法で短時間に円グラフを作成でき、Markdownやドキュメントにそのまま埋め込める点です。AI生成コードとの併用も可能です。一方、デメリットはカスタマイズできるスタイルが限られ、ドーナツグラフや一部の扇（スライス）を強調したいなど複雑な表現には対応していないことです。
②Mermaidで作った円グラフの扇（スライス）の表示順は？
Mermaidの円グラフでは、スライスの順番を手動で制御することはできません。常に各項目の割合に従って、割合が大きいものから順に時計回りで描画されます。
グラフ作成ツールEdrawMax
円グラフをより高度にカスタマイズしたい場合は、専用のグラフ作成ツールを利用するのがおすすめです。EdrawMaxなら、円グラフをはじめとする各種割合グラフを簡単に作成することができます。
コードを覚える必要はなく、データを入力するだけで素早く円グラフを作成できます。豊富なテンプレートからワンクリックで切り替え可能で、見栄えの良いグラフ作成も簡単です。作成したグラフは、PDFやPowerPointなどのオフィス形式、さらにSVG形式で出力することもできます。まずは無料ダウンロードして、ぜひ体験してみましょう。
| 項目 | Mermaid | EdrawMax |
|---|---|---|
| コードの習得 | Mermaid記法を理解する必要あり | 不要。データ入力やドラッグ操作で作成可能 |
| 高度なスタイル設定 | 限定的。色やフォントサイズは変更可能だが複雑な装飾は不可 | 色、線、フォントなど自由にカスタマイズ可能 |
| ドーナツグラフ／ローズチャート | 非対応。円グラフのみ作成可能 | 対応 |
| 出力形式 | MarkdownやHTMLへの埋め込みが中心。画像出力は別途スクリーンショット等が必要 | PDF、PowerPoint、Word、SVGなど多形式で出力可能 |
すぐに使える円グラフのテンプレート
Mermaidでは円グラフの作成は便利ですが、二重円グラフやドーナツグラフなど、変形した円グラフには対応していません。
補足として、こうした変形円グラフを作成できるテンプレートを添付します。クリックすれば利用可能です。
二重円グラフ・ロースグラフ・ドーナツグラフ
関連記事