Mermaid ER 図ビューア

Mermaid erDiagram コードを貼り付けて、データベーススキーマを即座にプレビュー。SVG または PNG にエクスポート。無料、ブラウザのみの ER 図ツール。

Mermaid コード

プレビュー

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

エンティティ関連（ER）図は、リレーショナルデータベーススキーマを視覚化するための標準的な表記法です。エンティティ（テーブル）、その属性（カラム）、およびそれらの間の関係（1対1、1対多、多対多）を示します。Mermaid の `erDiagram` 構文は、ER 図作成をテキストベースのコードの世界にもたらし、README、ADR（アーキテクチャ決定記録）、プルリクエストの説明でデータベーススキーマを簡単に文書化できるようにします。データベースエンジニアやバックエンド開発者が AI アシスタントにスキーマ設計を依頼する際（「ユーザー、製品、注文を含む e コマースプラットフォームのデータベースを作成してください」）、その応答には Mermaid ER 図が含まれることがよくあります。そのコードを Zolkit に貼り付けることで、関連性とカーディナリティが意図したビジネスルールを反映しているかどうかをすぐに検証できます。 Zolkit の ER 図ビューアは、型付き属性を持つエンティティ定義、主キーおよび外部キー注釈、カラスの足（crow's foot）表記の関連線、インライン関連ラベルを含む、Mermaid の `erDiagram` 構文を完全にサポートしています。バックエンド開発者、データベースアーキテクト、テクニカルライターがブラウザを離れることなくスキーマを文書化するために使用しています。

無料オンライン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 の ER 図では、どのようなカーディナリティシンボルが使用されますか？

Mermaid はカラスの足（crow's foot）表記を使用します: 1対1 には `||--||`、1対0以上には `||--o{`、0以上対0以上には `}o--o{`、1対1以上には `||--|{` です。これらは関連線上に標準的なカラスの足シンボルとしてレンダリングされ、カーディナリティをすぐに読み取れるようにします。

Mermaid の ER 図で主キーと外部キーをマークするにはどうすればよいですか？

エンティティ定義のカラムタイプの後に `PK` または `FK` を追加します: 主キーには `int id PK`、外部キーには `int userId FK` です。ユニークキーには `UK` を追加することもできます。これらの注釈はエンティティボックス内のラベルとして表示され、スキーマのリレーショナル構造を伝えるために不可欠です。

Mermaid の ER 図で多対多の関係を文書化できますか？

はい。多対多の関係は `}o--o{` を使用して直接表現するか、ジャンクションエンティティを介して表現します。ジャンクションエンティティ（ORDER と PRODUCT 間の ORDER_ITEM など）を使用する方が、通常はより良いプラクティスです。これは実際のスキーマ設計をより正確にモデル化し、数量や価格など、関係自体に属性を追加できるようにするためです。

プロジェクトで Mermaid ER 図を使用する最良の方法は何ですか？

ER 図をプロジェクトの README または専用の `SCHEMA.md` ファイルに Mermaid コードブロックとして追加します。GitHub、GitLab、Notion はすべて Mermaid をネイティブにレンダリングするため、図はコードと一緒に最新の状態に保たれます。移行を実行するたびに図を更新し、一度きりの成果物ではなく、生きた文書として扱います。