Mermaid 円グラフビューア

Mermaid の円グラフをブラウザで即座にレンダリング。割合データを可視化し、SVG または PNG にエクスポート。無料オンラインツール。

Mermaid コード

プレビュー

ダイアグラムをプレビューするにはMermaidコードを入力してください

円グラフは、市場シェア、予算配分、トラフィックソース、機能使用率、アンケート結果など、割合の分布を一目で伝えるのに役立ちます。Mermaid の `pie` 構文は、Mermaid の図の種類の中で最もシンプルで、タイトルとラベル値のペアのリストのみが必要です。このシンプルさから、ユーザーが簡単なデータ可視化を求めた際に、AI アシスタントが Mermaid の円グラフを生成することがよくあります。プロダクトマネージャーが Claude や ChatGPT に「ユーザー獲得チャネルの内訳を見せて」と尋ねたり、開発者が「API ログの HTTP エラーコードの分布を可視化して」と尋ねたりすると、多くの場合 Mermaid の円グラフが返ってきます。Zolkit はグラフを即座にレンダリングするため、レポートやプレゼンテーション用にエクスポートする前に、ラベル、割合、全体的な視覚的印象を確認できます。 Mermaid の円グラフは、生の値からパーセンテージを自動計算し、各スライスにラベルを付けます。ビューアは、Web 埋め込み用の鮮明な SVG、またはスライドデッキ、Word 文書、メールレポートへの組み込み用の 2 倍サイズの PNG をエクスポートします。より複雑なデータ可視化のニーズには、円グラフとガントチャート（タイムライン分布用）またはタイムライン図を組み合わせることを検討してください。

無料オンラインMermaidダイアグラムビューア＆エクスポートツール

ZolkitのMermaidダイアグラムビューアを使えば、Mermaidコードを貼り付けるだけで、レンダリングされたダイアグラムを即座に確認できます。インストール不要、サインアップ不要、サーバーへのアップロードも不要です。すべてブラウザ内で完結するため、Claude、ChatGPT、GeminiなどのAIが生成したダイアグラムを確認する最も速い方法です。フローチャート、シーケンス図、クラス図、ER図、ガントチャート、ステート図、マインドマップ、Gitグラフ、円グラフ、タイムラインなど、主要なMermaidダイアグラムタイプをすべてサポートしています。

即時ライブプレビュー

入力に合わせてダイアグラムが自動的にレンダリングされます。300ミリ秒のデバウンス処理により、遅延を感じさせません。

100% プライベート

すべてのレンダリングはmermaid.jsを使用してブラウザ内で行われます。コードがサーバーに送信されることはありません。

SVG & PNG エクスポート

ドキュメントやスライドに最適な、鮮明なベクターSVGまたは高解像度2×PNG形式でダイアグラムをダウンロードできます。

すべてのMermaidダイアグラムタイプに対応

フローチャート、シーケンス図、クラス図、ER図、ガントチャート、マインドマップ、Gitグラフなど、多数のダイアグラムタイプをサポートしています。

AIダイアグラム対応

AI時代のために構築されました — Claude、ChatGPT、Gemini、またはその他のLLMによって生成されたダイアグラムを直接プレビューできます。

常に無料

アカウント不要、利用制限なし、透かしなし。ZolkitのMermaidビューアは完全に無料で、永続的にご利用いただけます。

Mermaidダイアグラムをプレビューする方法

1
左側のエディタにMermaidコードを貼り付けます — AIアシスタントからコピーするか、手動で作成できます。
2
ダイアグラムは右側のプレビューパネルに即座にレンダリングされます。構文エラーがある場合は、問題点が説明されます。
3
'SVGをエクスポート' または 'PNGをエクスポート' をクリックして、ドキュメント、スライド、共有に適したファイル形式でダイアグラムをダウンロードします。

よくある質問

Mermaid の円グラフはどのように記述しますか？

最初の行に `pie title Your Title` と入力し、次に各スライスを `"Label" : value` の形式で別々の行にリストします。値は任意の正の数で構いません。Mermaid が自動的にパーセンテージに変換します。例: `pie title Browser Share \n "Chrome" : 65.2 \n "Safari" : 19.1 \n "Firefox" : 4.0`。値が 100 になるように調整する必要はありません。

各スライスの色を制御できますか？

Mermaid の円グラフは、図のテーマに基づいて自動割り当てされたカラーパレットを使用します。図の構文でスライスごとの色を直接指定することはできません。色をカスタマイズするには、カスタム Mermaid テーマを適用するか、SVG 出力を後処理する必要があります。特定ブランドカラーが必要なプレゼンテーションでは、Figma や Inkscape のようなベクターエディタでエクスポートされた SVG を編集するのが最も実用的な方法です。

Mermaid の円グラフにスライスの最大数はありますか？

厳密な制限はありませんが、7〜8 スライスを超えると、セグメントがラベル付けするには狭くなりすぎて読みにくくなります。ベストプラクティスとしては、個々のスライスが全体の 3〜5% 未満を表す場合は、小さなカテゴリを「その他」にまとめることです。Mermaid は任意のスライス数をレンダリングしようとしますが、10 を超えると可読性が大幅に低下します。

円グラフ、ガントチャート、タイムラインはいつ使い分けるべきですか？

円グラフは、単一時点での全体に対する部分の関係（割合、分布、シェア）を示したい場合に使用します。ガントチャートは、タスク、期間、スケジュールを時間軸に沿って表示する必要がある場合に使用します。タイムラインは、特定のイベントを時系列順にマークしたい場合に使用します。円グラフは「全体のどれくらいか？」に答え、ガントチャートとタイムライン図は「いつか？」に答えます。