piev0.9.4

円とは？

一目で比率がわかる。

エディターで開く →すぐに使えるテンプレート

pie

使いどころ

Use a 円 when…

One-glance proportional comparisons

Survey results, share-of-voice

Quick stats in a slide

構文の基本

The minimal syntax

Copy this and you have a working 円. Build from here.

pie.mmd

pie title Browser share (Apr 2026)
    class="code-str">"Chrome" : 46
    class="code-str">"Safari" : 22
    class="code-str">"Firefox" : 18
    class="code-str">"Other" : 14

よく使うパターン

Patterns worth memorizing

Implicit percentages

Values can be raw counts — Mermaid normalizes to percentages automatically.

Show data

Add `showData` after `pie` (e.g. `pie showData`) to print values next to slices.

Order matters

Slices render in declared order, clockwise from 12 — put the largest first.

ハマりどころ

The things that will trip you up

Mermaid silently ignores misspellings — these are the failures we see most.

01
No legend customization beyond label text.
02
Pie charts with > 6 slices read poorly; split or use a bar chart elsewhere.
03
Labels can't contain `:` — Mermaid uses it as the value separator.