リアルタイムプレビュー
コードを直すと図も更新されるので、記法の間違いや配置をすぐに確認できます。
オンラインで図を作成
Mermaid記法を入力するだけで、フローチャートやシーケンス図、ER図を作成。コードを編集しながらプレビューを確認でき、PNG・SVG・PDFで保存できます。サンプル付き、インストール不要。
Mermaidでの作図に必要な機能をまとめて
コードを貼り付けて図を確認し、資料や設計書に使える形で保存できます。
テンプレートとサンプル
フローチャート、シーケンス図、ER図、ガントチャートなどのサンプルから始められます。
33種類の図に対応
よく使うフローチャートやマインドマップに加え、C4図やサンキー図なども作成できます。
画像・PDF・コードの保存
PNG・SVG・PDFで図を保存できます。コードを残したい場合はMMD形式を選んでください。
リンクで共有
リンクを送ると、相手のブラウザで同じ図を開けます。
ブラウザ内で編集
編集や書き出しはブラウザで処理するため、図のコードをアップロードする必要はありません。
11言語に対応
日本語のほか、英語、韓国語など11言語で使えます。
コードとして図を管理
図のコードをコピーしたり、Gitで変更履歴を管理したりできます。
Mermaidの実用サンプル：フローチャート・シーケンス図・ER図
業務フロー、APIの通信、データベースの関係をMermaidコードで表現する例です。サンプルをエディタで開くと、コードを編集しながら図の変化を確認できます。
承認フローをフローチャートにする
申請から確認、承認または修正までの流れです。flowchart TDで上から下に並べ、判断を菱形のノードで示します。
flowchart TD
A[申請を送信] --> B{申請を承認しますか？}
B -->|はい| C[処理を開始]
B -->|いいえ| D[申請を修正]
D --> A記法のポイント: AやBはノードのID、角括弧内は図に表示する文字です。分岐のラベルは -->|はい| のように縦棒で囲みます。エラーが出たら、括弧や縦棒の閉じ忘れを確認してください。
エディタでこのサンプルを開くAPIリクエストをシーケンス図にする
利用者、API、データベースのやり取りを順番に示します。participantの別名を使うと、短いIDで日本語の名前を表示できます。
sequenceDiagram
participant U as 利用者
participant A as API
participant D as データベース
U->>A: 注文を送信
A->>D: 注文を保存
D-->>A: 注文IDを返す
A-->>U: 受付完了記法のポイント: メッセージは U->>A: 注文を送信 のように、矢印の後にコロンと説明を書きます。-->> は応答を破線で表示します。
エディタでこのサンプルを開く顧客と注文の関係をER図にする
顧客が複数の注文を持つデータモデルです。CUSTOMERとORDERの属性に主キーと外部キーを付け、関係の多重度を確認できます。
erDiagram
CUSTOMER ||--o{ ORDER : places
CUSTOMER {
int id PK
string name
}
ORDER {
int id PK
int customer_id FK
date created_at
}記法のポイント: || は1件、o{ は0件以上を表します。属性は「型 名前」の順に書き、主キーにはPK、外部キーにはFKを付けます。
エディタでこのサンプルを開く作成した図をPNG・SVG・PDFで出力する
エディタの「エクスポート」から形式を選びます。PNGはスライドや画像共有、SVGは拡大しても鮮明なWeb用の図、PDFは印刷に適しています。後からコードを編集する場合はMMD形式で保存してください。
3ステップで図を作成
- 01
コードを入力する
Mermaidコードを貼り付けるか、テンプレートを選んで内容を書き換えます。
- 02
プレビューを確認する
文字やつながり、向きなどを変えながら、図の見え方を確認します。
- 03
保存・共有する
画像やPDFで保存したり、MMD形式でコードを残したり、リンクで共有したりできます。
フローチャートからER図まで、33種類に対応
処理の流れ、システムのやり取り、データベースの関係、スケジュールなど、用途に合う図を選べます。
- フローチャート
- クラス図
- シーケンス図
- ER図（エンティティ関係図）
- 状態遷移図
- マインドマップ
- アーキテクチャ図
- ブロック図
- C4図
- Cynefinフレームワーク
- イベントモデリング
- ガントチャート
- Gitグラフ
- 特性要因図（魚骨図）
- カンバン
- パケット図
- 円グラフ
- 四象限チャート
- レーダーチャート
- 構文図（ABNF）
- 構文図（EBNF）
- 構文図（IR）
- 構文図（PEG）
- 要求図
- サンキー図
- タイムライン
- ツリービュー
- ツリーマップ
- ユーザージャーニー
- ベン図
- Wardleyマップ
- XYチャート
- ZenUML
設計書や資料づくりに
ソフトウェア開発者
API、サービス連携、データモデル、状態遷移、Gitフロー、ネットワークパケット、システム構成を可視化。
プロダクト・プロジェクトチーム
ユーザージャーニー、業務フロー、ロードマップ、カンバン、タイムライン、要件、スケジュールを整理。
テクニカルライター
README、ナレッジベース、仕様書、チュートリアル、社内文書に保守しやすい図を追加。
学生・教員
複雑な仕組みを説明し、概念を比較し、マインドマップや学習用ダイアグラムを作成。
図の保存形式を選ぶ
資料に貼り付けるならPNG、拡大して使うならSVG、印刷するならPDFがおすすめです。
- 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やコードレビューと相性がよく、技術文書と同期しやすいためです。