Mermaid を貼り付けて、図を確認。 瞬時に。

Mermaid を貼り付け、即時プレビュー、SVG/PNG をエクスポート、ファイルをアップロード、ドラッグでパン、URL で共有。

クイックテンプレート
Mermaid ファイルを開くどこにでもドロップ — .mmd · .mermaid · .md · .txt · .mmd ファイルの開き方
Mermaid を読み込み中...行 1, 列 1
ヒント: プレビューでクリック＆ドラッグ（またはタッチ＆ドラッグ）するとパンできます。ファイルをプレビューにドロップして読み込めます。

Mermaid とは？

Mermaid は、Markdown 風のテキスト定義を使って図を動的に作成・変更できる JavaScript ベースの図表作成ツールです。シンプルなテキスト説明から図を生成できるオープンソースプロジェクトです。

複雑な描画ツールの代わりに、図を説明するコード風の構文を書き、Mermaid がそれを視覚的な図としてレンダリングします。このアプローチにより、図はバージョン管理しやすく、更新も容易で、ドキュメント作成に最適になります。

Mermaid はドキュメントプラットフォーム、Wiki、Markdown ファイルにシームレスに統合でき、開発者やテクニカルライターに好まれるツールです。

Mermaid を使う理由

  • バージョン管理: 図はテキストファイルなので、コードと一緒に Git で管理できます
  • 素早い更新: 図を描き直す代わりに数行のテキストを変更するだけで済みます
  • 一貫性: Mermaid がレイアウトとスタイルを自動で処理し、統一された図を保ちます
  • デザインツール不要: Visio や Lucidchart など高価なツールは不要です
  • コードとしてのドキュメント: 図をドキュメントと同じリポジトリに保存できます
  • クロスプラットフォーム: ブラウザと Node.js で動作し、多くのプラットフォームに統合できます
  • 無料・オープンソース: ライセンス費用なし、活発なコミュニティ
  • 複数の図の種類: フローチャート、シーケンス図、クラス図などに対応

フローチャート

シンプルなテキストベースの構文を使用してプロフェッショナルなフローチャートを作成。即座のプレビュー、SVG/PNGへのエクスポート、URLによる共有 - すべて無料。

シーケンス図

システムコンポーネント間の相互作用を可視化するUMLシーケンス図を設計。APIドキュメントとシステム設計に最適。

ガントチャート

ガントチャートでプロジェクトタイムラインを計画し可視化。シンプルなテキスト構文を使用してタスク、依存関係、マイルストーンを追跡。

クラス図

UMLクラス図でオブジェクト指向システムを設計。シンプルなテキストを使用してクラス、属性、メソッド、関係を定義。

状態図

状態図でステートマシンとシステムの動作を可視化。シンプルなテキストを使用して状態、遷移、イベントをモデル化。

ER図

エンティティ関係図でデータベーススキーマを設計。シンプルなテキスト構文を使用してエンティティ、属性、関係を定義。

広告

Mermaid 図の完全ガイド

シンプルなテキストベースの構文でプロフェッショナルな図を作成する方法を学ぶ

よくある質問

Mermaid Viewer の使い方と図の作成に関するよくある質問

この Mermaid エディタは本当に無料ですか？
はい、完全に無料です。図は無制限に作成でき、SVG/PNG への書き出し、URL 共有、すべての機能を登録・課金なしで利用できます。運営は控えめな広告で支えられています。
インストールは必要ですか？
インストールは不要です。ブラウザ上で完結する Web ツールなので、サイトを開けばすぐに作図できます。PC・タブレット・スマホで利用できます。
図はどのように保存できますか？
保存方法はいくつかあります。1) SVG/PNG で書き出す、2) URL 共有（図のコードは URL にエンコードされます）、3) Mermaid コードを自分のテキストファイルに保存、4) .mmd / .mermaid ファイルのアップロード・ダウンロード。
ドキュメントで図を使えますか？
もちろんです。SVG（拡大しても劣化しない）または PNG として書き出して、ドキュメント、資料、Web サイトで使えます。GitHub、GitLab、Notion などでは Mermaid コードの直接埋め込みも可能です。
SVG と PNG の違いは何ですか？
SVG はベクター形式で、どのサイズでも高品質を保てるため、ドキュメントや Web 用に最適です。PNG はラスター画像で共有しやすい反面、拡大時に劣化します。
図がレンダリングされないのはなぜですか？
Mermaid コードの構文エラーを確認してください。よくある原因は、引用符の閉じ忘れ、コロン/セミコロンの不足、ノード ID の誤り、未対応構文などです。図を簡略化して原因箇所を特定すると有効です。
他の人と共同作業できますか？
リアルタイム共同編集は未搭載ですが、URL を共有して共同作業できます。相手は開いて編集し、別バージョンを共有できます。Mermaid はテキストベースなので Git での運用にも向いています。
オフラインでも使えますか？
初回読み込みにはインターネット接続が必要です。読み込み後は基本編集がオフラインで動く場合がありますが、書き出しなど一部機能は接続が必要になることがあります。
Mermaid 構文はどう学べますか？
まずは全図種の例を含む Mermaid ガイドを参照してください。テンプレートを使うと素早く始められます。あわせて mermaid.js.org の公式ドキュメントも有用です。
見た目をカスタマイズできますか？
はい。図はサイトのテーマに従います。上部バーの「テーマ」ボタンでライトとダークを切り替えると、図は対応する Mermaid テーマで再描画されます。さらに高度な見た目調整は %%{init:...}%% ディレクティブで色、フォント、その他の視覚設定を定義できます。
対応している図の種類は？
このエディタは主要な Mermaid 図をサポートしています。フローチャート、シーケンス図、クラス図、状態遷移図、ER 図、ガントチャート、円グラフ、Git グラフ、ユーザージャーニーなどに対応します。
図のデータはプライベートですか？
図のコードはサーバーに送信されません。レンダリングはブラウザ内で完結します。URL 共有時はコードが URL 自体に含まれ、こちらで内容を保存・追跡することはありません。
なぜテキストベースの図を使うべきですか？
テキストベース図には多くの利点があります。バージョン管理しやすい（Git 向き）、更新が速い、スタイルを統一しやすい、検索可能、軽量、さらに自動生成しやすい点です。Pull Request でのレビューも容易です。
Web サイトに Mermaid を埋め込めますか？
はい。サイトに Mermaid の JavaScript ライブラリを読み込み、Mermaid コードブロックを追加すれば埋め込めます。GitHub、GitLab、Notion、Obsidian などはネイティブ対応しています。
推奨される最大サイズはありますか？
厳密な上限はありませんが、非常に大きな図（目安 100 ノード超）は端末によって描画が遅くなることがあります。複雑な内容は小さく分割した図にするのがおすすめです。