フローチャート
ノード・矢印・角丸や菱形などの Mermaid 図形で、処理と分岐を描きます。
Mermaid ビューア オンライン
左に Mermaid コードを貼り付けるだけで、右側に図表が即座に描画されます。Mermaid 構文の分析とワンクリック修復、コードの最適化、PNG・SVG・PDF へのエクスポートまで、すべて無料・登録不要、データはブラウザから出ません。
- 完全無料
- 登録不要
- すべてブラウザ内で動作
- 12 種類以上の図表
リアルタイム Mermaid エディタ＆チャートビューア
この Mermaid チャートビューアは入力が止まるたびにプレビューを更新するので、簡単な Mermaid の図も文章を書くように手軽に描けます。コードが壊れたときは、内蔵の Mermaid フィクサーが問題を特定し、よくある構文エラーを自動で直します。全角記号や不可視文字などの典型的な落とし穴も、ひとクリックで解決します。
–
Diagnostics
Your diagram renders here as you type.
Could not render this diagram
100%
Everything runs locally in your browser — your diagram code never leaves this page.
描画できる Mermaid 図表の種類
フローチャートからタイムラインまで、すべての Mermaid 図表タイプがすぐ使えます。インストール不要でオンライン描画。下のプレビューはすべてビューアと同じエンジンでリアルタイム生成されており、テンプレートをクリックすればそのまま編集を続けられます。
シーケンス図
参加者間のメッセージのやり取りを、ループ・分岐・活性区間付きで描きます。
ER 図
データベースのエンティティ・属性・リレーションをカラスの足（IE）記法でモデル化。
クラス図
クラス・インターフェース・メンバー・継承をソフトウェア設計用に記述。
状態遷移図
システムの状態と、その間の遷移を追跡します。
ガントチャート
タスク・マイルストーン・依存関係・日付でプロジェクトを計画。
円グラフ
少ないデータ数でも、構成比の円グラフに変換。
ユーザージャーニー
タスクごとの満足度スコア付きでユーザー体験をマッピング。
タイムライン
出来事を縦方向のタイムラインに記録。沿革やロードマップに最適。
マインドマップ
インデントしたテキストだけで枝分かれするマインドマップを作成。
Git グラフ
Git リポジトリのブランチ・コミット・マージを可視化。
4 象限チャート
2 つの軸で項目を 4 象限に配置。優先度×工数などに。
Mermaid 構文の基本
Mermaid 構文はプレーンテキストです。1 行に 1 ステートメント、ノードを矢印でつなぎます。下の Mermaid 図形でほとんどの図がカバーできます。サンプルをクリックするとビューアで開いて編集を続けられます。
| 構文 | 描画される図形 |
|---|---|
A[ラベル] | 長方形（処理） |
A(ラベル) | 角丸の箱 |
A{ラベル} | 菱形（判断） |
A([ラベル]) | スタジアム形 |
A[(ラベル)] | 円柱（DB） |
A((ラベル)) | 円 |
A-->B | 矢印（リンク） |
A-->|テキスト|B | ラベル付き矢印 |
A---B | 矢印なしの線 |
subgraph タイトル … end | ノードのグループ化 |
ミニテンプレート
Mermaid 図表をオンラインで画像に変換
Mermaid 図表をオンラインで画像に変換する方法は 3 ステップです。コードを貼り付け、プレビューを描画し、ツールバーの PNG・SVG・PDF をクリック。変換はすべてブラウザ内で行われ、ファイルのアップロードは発生しません。
Mermaid → PNG
最大 4 倍解像度で書き出し。スライド・ドキュメント・チャットでシャープに表示されるピクセル画像です。
Mermaid → SVG
本当のベクターファイル。無限に拡大でき、Figma や Illustrator で編集可能。印刷や高解像度ディスプレイに最適。
Mermaid → PDF
ワンクリックで図表サイズの PDF ページを生成。報告書やチケット、アーカイブにそのまま使えます。
よくある質問
Mermaid ビューアとは何ですか？
Mermaid ビューアは、Mermaid 構文で書かれた図表コードを実際の図としてレンダリングするツールです。本サイトは 1 ページでビューア・メーカー・フィクサーを兼ねており、入力しながらオンライン描画し、構文の問題を発見・自動修復し、結果を PNG・SVG・PDF としてエクスポートできます。
無効な Mermaid 構文を直すには？
コードを貼り付けて「修復」をクリックしてください。Mermaid フィクサーは、スマートクォートと不可視 Unicode 文字、全角記号、括弧の不一致、end などの予約語の誤用、subgraph や loop に対応する end の欠落、貼り付けられた Markdown のコードフェンスなどを自動修復します。すべての変更は診断リストで説明されます。
Mermaid を PNG・SVG・PDF に変換するには？
上のビューアで図表を描画し、プレビューのツールバーで PNG・SVG・PDF をクリックします。PNG は高解像度ビットマップ、SVG はベクターファイル、PDF は印刷用ドキュメントとしてダウンロードされます。無料・無制限・ブラウザ内で完結です。
PlantUML と Mermaid、どちらを使うべき？
Mermaid はブラウザで直接レンダリングされるため、GitHub・GitLab・主要な Markdown 環境がネイティブ対応しており、ドキュメント用途では軽量な選択肢です。PlantUML は UML 2 仕様のカバレッジが広い反面、レンダリングに Java かサーバーが必要です。ドキュメントや Web で使う図なら Mermaid が通常は簡単です。
「Mermaid」という名前の意味は？
神話の人魚（マーメイド）にちなんだ命名です。船乗りが人魚の歌に魅了されたように、プレーンテキストから美しい図が「歌」のように生まれる、という思いが込められています。図表の世界では、Mermaid は「コードとして描く図（diagram-as-code）」を意味します。
Mermaid 図表にはどんな種類がありますか？
よく使われるのは、フローチャート、シーケンス図、ER 図、クラス図、状態遷移図、ガントチャート、円グラフ、ユーザージャーニー、タイムライン、マインドマップです（ギャラリーをご覧ください）。どのタイプも「flowchart TD」や「sequenceDiagram」のようなキーワード行で始まり、以降は 1 行 1 ステートメントで書きます。
図表コードはサーバーに送信されますか？
いいえ。レンダリング・修復・最適化・エクスポートはすべてブラウザ内でローカルに実行されます。サーバーへの送信や保存は一切なく、ページを一度読み込めばオフラインでも使えます。