日本語のラベルは使えますか？

使えます。ノード名やメッセージを日本語で書いても崩れません。ただしラベルに括弧やコロンを含めるときは A["設定（初期値）"] のように二重引用符で囲んでください。記法の一部と解釈されるのを防げます。

Mermaid図エディタ

テンプレートから始める

Mermaidコード

コードを入力

描画テーマ

入力したコードはブラウザ内だけで処理され、サーバーには送信されません。

プレビュー

コードを入力するか、上のテンプレートを選ぶと図が表示されます。

このツールは役に立ちましたか？

いただいた声は開発者がすべて読み、改善に反映しています。

このツールでできること

Mermaidのコードを入力すると、入力を止めた直後に図が描き変わります。テンプレートから始めれば記法を覚えていなくても図を作れます。処理はすべてブラウザ内で完結するため、社内の設計情報を貼り付けても外部に送信されません。

✅ ライブプレビュー: 入力を止めると自動で描き直します
✅ 5種のテンプレート: フローチャート・シーケンス図・ガントチャート・円グラフ・クラス図を日本語ラベル入りで用意
✅ 日本語がそのまま使える: ノード名やメッセージを日本語で書いても崩れません
✅ SVG・PNGで保存: 資料に貼れる形式で書き出せます
✅ エラーの表示: 記法を間違えたときはページ内に理由を表示します
✅ ブラウザ内で完結: 入力したコードはサーバーに送信されません

こんな時に便利

GitHubのREADMEやIssueに貼るフローチャートを、貼る前に見た目を確かめたいとき
Notionやドキュメントツールに図を埋め込む前に、記法が通るか試したいとき
会議資料に業務フローの図を入れたいが、作図ツールで線を引くのが面倒なとき
設計変更のたびに図を描き直すのをやめて、テキストの差分でレビューしたいとき

使い方

テンプレートを選ぶか、コードを入力する

「テンプレートから始める」のボタンを押すと、その図のサンプルコードが入力欄に入ります。慣れてきたら直接書いても構いません。

図を確認しながらコードを直す

入力を止めると自動で描き直されます。記法に誤りがあるときは、プレビュー欄に理由が表示されます。

描画テーマを切り替えると、資料の配色に合わせた見た目で確認できます。

画像として書き出す

「SVGで保存」は拡大しても劣化しない形式、「PNGで保存」はそのまま貼れる画像形式です。コードだけ持っていくなら「コードをコピー」を使ってください。

GitHubやNotionにそのまま貼るなら、画像ではなくコードをコピーする方が後から直せて便利です。

Mermaid記法の早見表

図の種類ごとに、最初に覚えるべき記法をまとめました。コードをそのまま入力欄に貼って動作を確かめられます。

図の種類から探す:

フローチャート
矢印と線
条件分岐
シーケンス図
ガントチャート
円グラフ
クラス図

フローチャートの記法（graph / flowchart）

1行目で向きを宣言します。TD は上から下、LR は左から右です。

書き方	意味・描かれるもの
`graph TD`	上から下へ流れる図を宣言する（`TB` も同じ）
`graph LR`	左から右へ流れる図を宣言する
`A[受付]`	四角いノード。`A` はID、`[]` の中が表示名
`B(丸い箱)`	角丸のノード
`C{判定}`	ひし形のノード（条件分岐に使う）
`D((円))`	円形のノード（開始・終了に使う）
`subgraph 名前 … end`	複数ノードを枠で囲んでグループ化する

ノード名に記号（() や - など）を含めたいときは A["文字列"] のように二重引用符で囲みます。

矢印・線の書き分け

ノードをつなぐ線は、記号の違いで見た目が変わります。

書き方	意味・描かれるもの
`A --> B`	実線の矢印
`A --- B`	矢印のない実線
`A -.-> B`	点線の矢印
`A ==> B`	太い矢印（主要な流れの強調に使う）
`A -->\|承認\| B`	矢印にラベルを付ける
`A -- 承認 --> B`	上と同じ意味の別記法

条件分岐（Yes / No で分ける）

ひし形のノードから、ラベル付きの矢印を2本出すのが基本形です。

書き方	意味・描かれるもの
`B{在庫あり?}`	条件を表すひし形ノード
`B -- はい --> C`	条件が真のときの分岐
`B -- いいえ --> D`	条件が偽のときの分岐
`C --> E` `D --> E`	分かれた流れを1つに合流させる

シーケンス図の記法（sequenceDiagram）

登場人物を並べ、その間のやり取りを上から順に書きます。

書き方	意味・描かれるもの
`sequenceDiagram`	シーケンス図であることの宣言（1行目）
`participant U as 利用者`	登場人物を宣言し、表示名を付ける
`U->>W: 検索`	実線の矢印でメッセージを送る（要求）
`W-->>U: 結果`	点線の矢印で返す（応答）
`Note over W,D: 補足`	複数の登場人物にまたがる注記を置く
`alt 条件 … else … end`	条件によって分かれるやり取りを囲む
`loop 3回 … end`	繰り返すやり取りを囲む

ガントチャートの記法（gantt）

日付の書式を宣言してから、セクションごとにタスクを並べます。

書き方	意味・描かれるもの
`gantt`	ガントチャートであることの宣言
`dateFormat YYYY-MM-DD`	入力する日付の書式を指定する
`axisFormat %m/%d`	目盛りの表示書式を指定する
`section 設計`	タスクをまとめる区切りを作る
`要件整理 :done, req, 2026-09-01, 5d`	完了済みタスク（ID `req`、9/1から5日間）
`画面設計 :active, design, after req, 7d`	進行中タスク。`req` の後ろに続けて7日間
`:crit, …`	クリティカルパスとして強調する

タスク行は「表示名 : 状態, ID, 開始日, 期間」の順です。開始日に after 他のID と書くと、そのタスクの後ろに並びます。

円グラフの記法（pie）

項目名と数値を並べるだけで、割合は自動で計算されます。

書き方	意味・描かれるもの
`pie title 内訳`	円グラフの宣言とタイトル
`"操作方法" : 42`	項目名と値。割合は自動計算される
`showData`	`pie showData` と書くと数値も表示する

クラス図の記法（classDiagram）

クラスの中身と、クラス同士の関係を分けて書きます。

書き方	意味・描かれるもの
`classDiagram`	クラス図であることの宣言
`class 注文 { … }`	クラスと、その属性・メソッドを書く
`+int 注文番号`	public な属性（`-` は private）
`+合計金額() int`	メソッド（括弧を付けると関数として描かれる）
`A --> B`	関連（矢印の向きが参照の方向）
`A <\|-- B`	継承（`B` が `A` を継承する）
`A "1" --> "*" B`	多重度を書く（1対多）

記法はMermaid 11系の書き方に合わせています。より詳しい仕様は公式ドキュメントを参照してください。

Mermaidを使う前に知っておくと得なこと

Mermaidは「図をテキストで書く」ための記法です。2014年に公開され、いまではGitHubやNotionなど主要なサービスが標準で対応しています。

書いた図をそのまま貼れる場所

GitHub: README・Issue・Pull Requestのコメントで、```mermaid で囲むとそのまま図として表示されます
Notion: コードブロックの言語に Mermaid を選ぶと、プレビュー表示に切り替えられます
GitLab / Azure DevOps: いずれもMarkdown内のmermaidブロックに対応しています
VS Code: 拡張機能を入れるとMarkdownのプレビューで図が見えます

画像ではなくテキストで図を持つ利点

差分が読める: 図の変更がコードレビューの差分として見えるため、「どこが変わったか」を目で追えます
検索できる: ノード名がテキストなので、リポジトリ全文検索で図の中身が引っかかります
直すのが速い: 線を引き直す代わりに1行書き換えるだけで済みます

日本語を使うときの注意

日本語のラベルはそのまま書けます。ただし括弧やコロンなどの記号をラベルに含めると記法の一部と解釈されることがあるため、A["設定（初期値）"] のように二重引用符で囲むのが安全です。全角の括弧でも同じ扱いにしておくと事故がありません。

このツールでできないこと

作った図の保存・共有機能はありません（ブラウザ内で処理する方針のため、サーバーにコードを預かりません）。続きの作業をするときは「コードをコピー」でテキストを手元に残してください。