Mermaidとは何ですか？

Mermaidはテキストでフローチャート・シーケンス図・ER図などを書ける記法とそのレンダラのことです。`flowchart TD A-->B` のように数行書くだけで図ができ、Markdownの中に直接埋め込めます。GitHub・GitLab・Notion・Obsidian・Azure DevOpsなど主要ツールが標準でレンダリングできるため、エンジニア向けドキュメント作成の事実上の標準になりつつあります。

どんな種類の図を作れますか？

flowchart（フローチャート）・sequenceDiagram（シーケンス図）・classDiagram（クラス図）・stateDiagram-v2（状態遷移図）・erDiagram（ER図）・gantt（ガントチャート）・pie（円グラフ）の主要7種類に加え、journey（ユーザージャーニー）・mindmap・timeline等にも対応しています。本ツールでは7種類のサンプルテンプレートをワンクリックで挿入できます。

作った図はどうやって保存できますか？

「SVG保存」「PNG保存」ボタンでローカルに画像ファイルをダウンロードできます。SVGはベクター形式で拡大縮小しても画質劣化なし（README・技術ブログ・印刷物に最適）、PNGはどこにでも貼り付けやすい汎用形式です。「SVGをコピー」でSVGコードをクリップボードに、「コードをコピー」でMermaidソース自体をコピーできます。

GitHubのReadmeにそのまま貼れますか？

はい、本ツールで作ったコードを ```mermaid のコードフェンスで囲んでReadme.mdに貼ると、GitHubが自動でレンダリングしてくれます（2022年以降標準対応）。GitLab・Bitbucket・Notion・Obsidian・Azure DevOpsでも同様にレンダリングされます。コード差分がそのまま図の差分になるため、図表のレビューがしやすくなります。

日本語は使えますか？

はい、ノード名・ラベル・矢印テキストすべてに日本語・絵文字を使えます。本ツールの全テンプレートも日本語で記述されているのでそのまま参考にできます。日本語を含む場合でも改行・スペースの扱いは英語と同じです。漢字・ひらがな・カタカナ・全角記号いずれもそのまま記述できます。

シーケンス図でアクター間の矢印の書き方は？

`participant U as ユーザー` でアクターを宣言し、`U->>W: ログイン要求` のように `送信元->>受信先: メッセージ` で書きます。実線矢印は `->>`、点線矢印は `-->>` 、活性化バーは `activate/deactivate`、自分自身への呼び出しは `U->>U: ...` と書けます。本ツールのシーケンス図サンプルが基本パターンを網羅しています。

ER図でPK/FKやリレーションをどう書く？

ER図では `USER ||--o{ ORDER : places` のように `||--o{` で「1対多」リレーションを表します。`||`=必ず1件、`o{`=0件以上、`|{`=1件以上、`o|`=0または1件。エンティティ属性は `USER { string id PK }` の形式でPK/FKマーカーを付けます。本ツールのER図サンプルがUSER/ORDER/PRODUCTのEC典型構造を網羅しています。

フローチャートのノード形状の指定方法は？

`A[四角]`・`B(角丸)`・`C{ひし形/判断}`・`D((円))`・`E>旗]`・`F[/平行四辺形/]`・`G[\\台形\\]` などの記号で形状を切り替えられます。`-->` は実線矢印、`-.->` は点線、`==>` は太線。ラベル付き矢印は `A -->|条件|B` の形式。本ツールのflowchartサンプルが基本形を含んでいます。

描画エラーが出るときの確認方法は？

右側のプレビュー欄にエラーメッセージが表示されます。よくある原因は (1) 図の種類宣言（`flowchart TD` 等）の書き忘れ、(2) 全角スペースの混入、(3) 予約語（end・class等）を識別子に使用、(4) シーケンス図でparticipant未宣言、です。エラーメッセージに行番号が含まれることが多いので該当行をチェックしてください。

データはサーバーに送信されますか？

いいえ、Mermaidの描画はすべてブラウザ内のJavaScriptで完結します。入力したコード・生成した図はサーバーに送信されません。社外秘のシステムアーキテクチャ、未公開製品のクラス図、社内DBのER図、機密プロジェクトのガントチャートなども安全に作図できます。入力中のコードはローカルストレージに保存され、ページを閉じても作業を再開できます。

Mermaid プレビュー

Mermaid記法のフローチャート・シーケンス図・クラス図・状態遷移図・ER図・ガントチャート・円グラフをリアルタイムプレビューできる無料オンラインツール。SVG/PNGダウンロード対応、テンプレート切替で初心者でもすぐ書ける。README・技術ドキュメント・要件定義・設計レビュー資料の作成に最適、ブラウザ完結で外部送信なし。

Mermaid記法でフローチャート・シーケンス図・ER図・クラス図・状態遷移図・ガントチャート・円グラフをリアルタイム描画し、SVG/PNGでダウンロードできるツールです。7種類のテンプレートを用意しているため、Mermaidに不慣れでもすぐ作図を始められます。

Mermaid プレビュー

// Mermaid プレビューの機能と特徴

Mermaidとは

Mermaidは、テキストベースのDSL（ドメイン特化言語）で図表を記述できる仕組みです。Markdownの中に直接書け、GitHub・Notion・Obsidian・GitLab・Confluence・Azure DevOps など主要ツールが標準サポートしています。コードレビュー可能・履歴管理可能・差分が見えるため、PowerPoint や Draw.io より「変更に強い図表」が求められる技術ドキュメントで採用が広がっています。

対応している図の種類

フローチャート（flowchart）、シーケンス図（sequenceDiagram）、クラス図（classDiagram）、状態遷移図（stateDiagram-v2）、ER図（erDiagram）、ガントチャート（gantt）、円グラフ（pie）に対応しています。本ツールには各図の動作確認用テンプレートも用意しているため、構文を覚える前にまずどんな見た目になるか試せます。

SVG/PNG出力

作成した図はSVGとPNGの両方でダウンロードできます。SVGはベクター形式で拡大しても劣化せず、Webサイト・PDF・印刷物に最適。PNGはSlack・メール・パワポへの貼り付けが手軽です。本ツールはダーク基調のテーマで出力するため、レトロ風サイトや黒背景のドキュメントとも調和します。

ローカル保存・プライバシー

入力中のMermaidコードはブラウザのローカルストレージに保存されるため、ページを閉じても次回そのまま続けられます。コードや図はすべてブラウザ内で処理し、外部サーバーには送信されません。社外秘のアーキテクチャ図・社内データベース構造（ER図）・未公開システムの設計書も安心して作図できます。

// Mermaid プレビューに関するよくある質問

Mermaidとは何ですか？: Mermaidはテキストでフローチャート・シーケンス図・ER図などを書ける記法とそのレンダラのことです。`flowchart TD A-->B` のように数行書くだけで図ができ、Markdownの中に直接埋め込めます。GitHub・GitLab・Notion・Obsidian・Azure DevOpsなど主要ツールが標準でレンダリングできるため、エンジニア向けドキュメント作成の事実上の標準になりつつあります。
どんな種類の図を作れますか？: flowchart（フローチャート）・sequenceDiagram（シーケンス図）・classDiagram（クラス図）・stateDiagram-v2（状態遷移図）・erDiagram（ER図）・gantt（ガントチャート）・pie（円グラフ）の主要7種類に加え、journey（ユーザージャーニー）・mindmap・timeline等にも対応しています。本ツールでは7種類のサンプルテンプレートをワンクリックで挿入できます。
作った図はどうやって保存できますか？: 「SVG保存」「PNG保存」ボタンでローカルに画像ファイルをダウンロードできます。SVGはベクター形式で拡大縮小しても画質劣化なし（README・技術ブログ・印刷物に最適）、PNGはどこにでも貼り付けやすい汎用形式です。「SVGをコピー」でSVGコードをクリップボードに、「コードをコピー」でMermaidソース自体をコピーできます。
GitHubのReadmeにそのまま貼れますか？: はい、本ツールで作ったコードを ```mermaid のコードフェンスで囲んでReadme.mdに貼ると、GitHubが自動でレンダリングしてくれます（2022年以降標準対応）。GitLab・Bitbucket・Notion・Obsidian・Azure DevOpsでも同様にレンダリングされます。コード差分がそのまま図の差分になるため、図表のレビューがしやすくなります。
日本語は使えますか？: はい、ノード名・ラベル・矢印テキストすべてに日本語・絵文字を使えます。本ツールの全テンプレートも日本語で記述されているのでそのまま参考にできます。日本語を含む場合でも改行・スペースの扱いは英語と同じです。漢字・ひらがな・カタカナ・全角記号いずれもそのまま記述できます。
シーケンス図でアクター間の矢印の書き方は？: `participant U as ユーザー` でアクターを宣言し、`U->>W: ログイン要求` のように `送信元->>受信先: メッセージ` で書きます。実線矢印は `->>`、点線矢印は `-->>` 、活性化バーは `activate/deactivate`、自分自身への呼び出しは `U->>U: ...` と書けます。本ツールのシーケンス図サンプルが基本パターンを網羅しています。
ER図でPK/FKやリレーションをどう書く？: ER図では `USER ||--o{ ORDER : places` のように `||--o{` で「1対多」リレーションを表します。`||`=必ず1件、`o{`=0件以上、`|{`=1件以上、`o|`=0または1件。エンティティ属性は `USER { string id PK }` の形式でPK/FKマーカーを付けます。本ツールのER図サンプルがUSER/ORDER/PRODUCTのEC典型構造を網羅しています。
フローチャートのノード形状の指定方法は？: `A[四角]`・`B(角丸)`・`C{ひし形/判断}`・`D((円))`・`E>旗]`・`F[/平行四辺形/]`・`G[\\台形\\]` などの記号で形状を切り替えられます。`-->` は実線矢印、`-.->` は点線、`==>` は太線。ラベル付き矢印は `A -->|条件|B` の形式。本ツールのflowchartサンプルが基本形を含んでいます。
描画エラーが出るときの確認方法は？: 右側のプレビュー欄にエラーメッセージが表示されます。よくある原因は (1) 図の種類宣言（`flowchart TD` 等）の書き忘れ、(2) 全角スペースの混入、(3) 予約語（end・class等）を識別子に使用、(4) シーケンス図でparticipant未宣言、です。エラーメッセージに行番号が含まれることが多いので該当行をチェックしてください。
データはサーバーに送信されますか？: いいえ、Mermaidの描画はすべてブラウザ内のJavaScriptで完結します。入力したコード・生成した図はサーバーに送信されません。社外秘のシステムアーキテクチャ、未公開製品のクラス図、社内DBのER図、機密プロジェクトのガントチャートなども安全に作図できます。入力中のコードはローカルストレージに保存され、ページを閉じても作業を再開できます。

// Mermaid プレビューの使い方

サンプルから図の種類を選ぶ

まず画面上部の「サンプル」からフローチャート・シーケンス図・ER図など描きたい種類を選びます。テンプレートが左のエディタに挿入され、その動作確認用の図が右にプレビューされます。Mermaid記法を覚えていなくてもすぐ書き始められます。
コードを編集してリアルタイム確認

左のエディタでコードを編集すると、右のプレビューが即座に更新されます。ノード名・矢印・属性などを書き換えて、思い通りの図に仕上げてください。構文エラーがある場合はプレビュー欄に該当箇所のメッセージが表示されます。
SVG・PNGで保存または埋め込み

完成したら「SVG保存」「PNG保存」ボタンでファイルとしてダウンロードできます。Markdownに直接埋め込みたい場合は「コードをコピー」して```mermaidブロックに貼り付ければ、GitHub・Notion・Obsidian等がそのまま図としてレンダリングしてくれます。

カテゴリデザイン

// Mermaid プレビューの機能と特徴

Mermaidとは

対応している図の種類

SVG/PNG出力

ローカル保存・プライバシー

// Mermaid プレビューに関するよくある質問

// Mermaid プレビューの使い方

サンプルから図の種類を選ぶ

コードを編集してリアルタイム確認

SVG・PNGで保存または埋め込み

// Mermaid プレビューの関連ツール