リアルタイムプレビュー
コードの変更が即座に描画され、構文エラーやレイアウトをすぐ確認できます。
オンラインで図を作成
Mermaid記法をブラウザで編集し、リアルタイムプレビュー。テンプレートとサンプルから始め、PNG・SVG・PDF・MMDで出力、リンク共有にも対応。データはブラウザ内で処理されます。
Mermaidコードを図にするための機能をひとつに
開発者、プロダクトチーム、テクニカルライター、学生、教員のための高速な「Diagram as Code」ワークフローです。
テンプレートとサンプル
フローチャート、シーケンス図、ER図、ガントチャート、アーキテクチャ図などからすぐ始められます。
33種類の図
一般的な図に加え、C4、サンキー図、Wardleyマップ、構文図、ZenUMLまで幅広く対応します。
PNG・SVG・PDF・MMD出力
画像、ベクター、印刷用文書、または編集可能なMermaidソースをダウンロードできます。
リンク共有
同僚、顧客、クラスメートにURLを送り、同じ図をすぐ開いてもらえます。
ブラウザ内でのプライバシー
編集・描画・データ処理はブラウザ内で行われ、機密性の高い図を端末側に保ちやすくします。
11言語のインターフェース
English、简体中文、Tiếng Việt、Русский、Português (Brasil)、Español、Français、日本語、한국어、Deutsch、العربيةに対応。
Diagram as Code向け
図をテキストとして編集・レビュー・コピー・バージョン管理できます。
3ステップで図を作成
- 01
Mermaidコードを書く・貼り付ける
テンプレート、サンプル、ドキュメント、GitHub、ChatGPT、Claudeなどのコードを利用できます。
- 02
入力しながらプレビュー
ラベル、関係、方向、スタイル、レイアウトを調整すると図がリアルタイムで更新されます。
- 03
出力または共有
PNG・SVG・PDF・MMDをダウンロードするか、共有リンクを作成します。
33種類のMermaid図を作成
ソフトウェア設計、業務フロー、プロジェクト管理、データモデリング、戦略、研究、技術文書に適した図を選べます。
- フローチャート
- クラス図
- シーケンス図
- ER図（エンティティ関係図）
- 状態遷移図
- マインドマップ
- アーキテクチャ図
- ブロック図
- C4図
- Cynefinフレームワーク
- イベントモデリング
- ガントチャート
- Gitグラフ
- 特性要因図（魚骨図）
- カンバン
- パケット図
- 円グラフ
- 四象限チャート
- レーダーチャート
- 構文図（ABNF）
- 構文図（EBNF）
- 構文図（IR）
- 構文図（PEG）
- 要求図
- サンキー図
- タイムライン
- ツリービュー
- ツリーマップ
- ユーザージャーニー
- ベン図
- Wardleyマップ
- XYチャート
- ZenUML
実際のドキュメント作業に最適
ソフトウェア開発者
API、サービス連携、データモデル、状態遷移、Gitフロー、ネットワークパケット、システム構成を可視化。
プロダクト・プロジェクトチーム
ユーザージャーニー、業務フロー、ロードマップ、カンバン、タイムライン、要件、スケジュールを整理。
テクニカルライター
README、ナレッジベース、仕様書、チュートリアル、社内文書に保守しやすい図を追加。
学生・教員
複雑な仕組みを説明し、概念を比較し、マインドマップや学習用ダイアグラムを作成。
用途に合わせて出力形式を選択
ブラウザのプレビューから文書、デザイン、印刷、プレゼン、バージョン管理へ、描き直さずに移行できます。
- PNG
- スライド、文書、チャット、素早い共有に適した高品質画像。
- SVG
- Webやデザインツールで拡大しても鮮明なベクター形式。
- 印刷、レポート、レビュー、保存に適した文書形式。
- MMD
- 後から編集・再利用・バージョン管理できるMermaidソースコード。
図のデータはブラウザ内に保持
Mermaidコンテンツはクライアント側で処理されます。システム構成、社内フロー、データベースモデルなど、外部サービスへアップロードしたくない図にも適しています。
よくある質問
Mermaidオンラインエディタは本当に無料ですか？
はい。エディタ、テンプレート、サンプル、リアルタイムプレビュー、リンク共有、PNG・SVG・PDF・MMD出力を無料で利用できます。
Mermaidとは何ですか？
Mermaidはテキストベースのダイアグラム記法です。ノード、関係、イベント、タイムラインなどをコードで記述し、視覚的な図に変換します。
どの種類の図に対応していますか？
フローチャート、クラス図、シーケンス図、ER図、状態遷移図、マインドマップ、アーキテクチャ図、C4、ガント、Git、カンバン、サンキー図、タイムライン、ユーザージャーニー、ベン図、Wardleyマップ、XY、ZenUMLなど33種類です。
PNG・SVG・PDF・MMDで出力できますか？
はい。PNGは一般的な画像、SVGは拡大可能なベクター、PDFは印刷や正式文書、MMDは編集可能なソース保存に適しています。
Mermaidコードはサーバーに送信されますか？
通常の編集・出力では、図のデータをブラウザ側で処理する設計です。
共有リンクはどのように使いますか？
エディタでリンクを作成して送ると、相手はブラウザで同じ図を開けます。
Mermaidやソフトウェアのインストールは必要ですか？
不要です。最新のブラウザでサイトを開くだけで利用できます。
テンプレートやサンプルから始められますか？
はい。構文を学びながら、よく使う図をゼロから書かずに作成できます。
ChatGPTやClaudeが生成したMermaidコードを貼り付けられますか？
はい。コードを貼り付け、プレビューを確認し、必要に応じて構文を修正して出力できます。
ドラッグ＆ドロップの作図ツールではなくMermaidを使う理由は？
テキストの図は編集やコピーが速く、Gitやコードレビューと相性がよく、技術文書と同期しやすいためです。