PCECAKE BLOG

Mermaidを使って円グラフを書こう。

Mermaidを使って円グラフを書こう。

投稿日: 2023/5/19


Mermaidで円グラフを書いてみよう

Mermaidについては以下の記事を参照ください。

Markdownで図が書きたい。そんな時はMermaid。

今回はMermaidを使って円グラフを書いてみます。

Pie chart(ガントチャート)の書き方

シーケンス図はある動作に対する処理の流れを記載したものです。

以下のサンプルをもとに説明していきます。

    ```mermaid
    pie title 飼育しているペット
        "犬" : 63.8
        "猫" : 28.1
        "魚" : 13.3
    ```

    ```mermaid

まずは、「ここからMermaidを書くぞ」の記載です。
これはMarkdownのコードを書く書式と同じで、コード名を「mermaid」とするだけです。

    pie title 飼育しているペット

次に「Mermaid」の中の「pie」だと指定します。
そのまま「title」に続けて円グラフのタイトルを定義します。

        "犬" : 63.8
        "猫" : 28.1
        "魚" : 13.3

では、本体部分です。

円グラフの場合は小難しいことはありません。

ダブルコーテーション(“)で囲った項目に続けてコロン(:)で区切り、値を記載するだけです。

円グラフは実はこれだけです。
実際もう少しだけ定義があるのと、更新されているかもしれないので、ページ最後のURLをチェックしてみてください。

ちなみに、最後は閉じるのを忘れないように。


## さらに詳しく  
さらに詳しく円グラフの書き方を確認したい場合は公式をあわせて参照してください。  

こんなのが書きたい!というのがあればコメントを頂ければ追記しますのでぜひコメントまで。  

[https://mermaid.js.org/syntax/pie.html](https://mermaid.js.org/syntax/pie.html)