mermaidで円グラフを描く
はじめに
この記事では、「mermaidで円グラフを描く」について書いています。
Mermaidとは、フローチャートやシステム開発で使われるシーケンス図、ガントチャートなどをテキストで表現することができます。
最近QiitaやGitHubなどでMermaidがサポートされ、折角なので書き方やローカルで使える方法を試してみようとなったのが記事を書いたきっかけでした。
自分に向けた備忘録の意味もありますが、「」な人の一助になれば嬉しいです。
円グラフの書き方
基本的な書き方は以下の通りです。
- 円グラフを書くには、先頭に
pieキーワードを先頭に書きます。 - 続いて円グラフを作るデータを書いていきます。
- データは
"LABEL": xxのように書きます LABELにはデータの名称を書き、"で囲ってくださいxxにはデータのパーセンテージを書いてください- 「小数点以下第二位までサポートされてる」と公式では書かれていますが、円グラフに書かれる数値は小数点より上の値までのようです。
- ２つの間は
:を入れてください
- データは
オプションとして以下があります。
showDataを書くと、凡例の横にデータの数値が書かれます。title XXXと書くことで円グラフのタイトル（左の例だとXXX）を書くことができます。
また、書く上での注意点として以下があります。（ちゃんと確認などしたわけではなく、私が使っているなかで見られた現象です）
- 円グラフは、パーセンテージの大きい順に並べられるみたいです。
- 記述したデータのパーセンテージの総和が100にならない場合、足りない分が均等に各データに加算されるようです。
サンプル
では実際に例を見てみましょう
pie
"cat" : 21
"dog" : 35
"bird" : 44
もう一つ例を出します
pie showdata
title 円グラフのタイトル部分
"アルファ" : 3.45
"ベータ" : 16.32
"ガンマ" : 44.10
"デルタ" : 36.13
おわりに
「mermaidで円グラフを描く」について解説しました。
非常に簡単に円グラフが書けてびっくりしました。とても便利ですね。
似たようなツールにPlantUMLもありますが、どちらが使いやすいかなどはこれから色々試してみるなかで比較していけたら良いなと思います。
さいごに、記事を書く上で参考にしたサイトのリンクを以下に掲載します。合わせて読んでいただくと良いかと思います。
