React チャート（Recharts）
Mermaid はフロー図やシーケンス図に適していますが、データの可視化には Recharts が強力です。ホバーでツールチップが表示され、レスポンシブに対応します。
棒グラフ
月別のアクセス数を棒グラフで表示します。
Loading chart...
積み上げ棒グラフ
stacked を指定すると積み上げ表示になります。
Loading chart...
折れ線グラフ
時系列データのトレンドを可視化します。
Loading chart...
エリアチャート
面積で量の推移を強調します。
Loading chart...
円グラフ
カテゴリ別の構成比を表示します。
Loading chart...
レーダーチャート
多軸でのスキル比較に適しています。
Loading chart...
散布図
2変数間の相関を確認できます。
Loading chart...
Mermaid との使い分け
| 用途 | ライブラリ | 理由 |
|---|---|---|
| フロー図・設計図 | Mermaid | テキストベースで管理しやすい |
| データの可視化 | Recharts | インタラクティブでレスポンシブ |
| シーケンス図 | Mermaid | 通信の流れが見やすい |
| 時系列データ | Recharts | ツールチップやアニメーション |
| ER図・クラス図 | Mermaid | UML標準に準拠 |
| 比較・集計 | Recharts | 棒・円・レーダーが豊富 |
Info
すべてのチャートはレスポンシブ対応です。ウィンドウ幅に応じて自動的にリサイズされます。モバイルでもタップでツールチップが表示されます。