Mermaid ノーコードビルダー

Mermaid 図をノーコードで作成｜フローチャート・ER図・シーケンス図対応

Mermaid（マーメイド）は、シンプルなテキスト記法でフローチャート・シーケンス図・ER図などを生成できるオープンソースライブラリです。 GitHubやNotionなど多くのツールに採用されており、図をコードと同様にバージョン管理できるのが強みです。
ただし実際に書きはじめると「ノード形状は [] か {} か」「矢印は --> か ->> か」など記法の習得が壁になります。
このツールは10種類の図をフォーム入力だけで直感的に作成できます。Mermaidコードを直接入力するモードも搭載。生成されたMermaidテキストはそのままGitHub・Notion・はてなブログ等に貼り付け可能です。

使い方

タブから図の種類を選ぶ

左パネルのフォームにノード・接続を入力

「図を生成」→ 右にプレビュー表示

「Mermaidコード」タブでテキストをコピーまたはSVG/PNGでダウンロード

📄 記法不要・フォーム入力のみ ✅ 10種類の図＋直接入力対応 ⬇️ SVG / PNG ダウンロード 📋 Mermaidテキストをコピー 💾 下書き保存・読込

🔒

外部リソースの利用について： プレビュー表示は通常ブラウザ内で描画しますが、そのためにJavaScriptライブラリを外部CDN（jsDelivr）から読み込みます。 SVG/PNGのダウンロードや描画失敗時のフォールバック処理では、外部レンダリングサービス mermaid.ink を利用する場合があります。 機密情報・個人情報を含む内容の入力はお控えください。 完全オフライン環境では正常に動作しない場合があります。なお、安全設定（securityLevel: strict）を有効にしているため、ラベル内のHTML風装飾表現は反映されない場合があります。

テキスト直接入力

Mermaidコードを直接入力

記法を直接書いてプレビュー生成できます。下のテンプレートを挿入することもできます。

フローシーケンスクラス状態 ER ガント円グラフジャーニーアーキテクチャ業務フロー

基本設定

タイトル（任意）フロー方向

ノード（処理・判断ボックス）

ノードIDは半角英数のみ使用可。重複IDはエラーになります。

エッジ（矢印・接続）

from/toにはノードIDを入力します。存在しないIDを指定するとエラーになります。

基本設定

タイトル（任意）

参加者（Participant）

メッセージ

基本設定

タイトル（任意）

クラス定義

クラス間の関係

基本設定

タイトル（任意）

状態遷移

「[*]」は開始・終了状態として予約されています。

基本設定

タイトル（任意）

エンティティ（テーブル）

リレーション

基本設定

タイトル（任意）日付フォーマット軸表示フォーマット（任意）

セクション・タスク

セクションとタスクを交互に追加します。タスクは直前のセクションに属します。

基本設定

タイトル数値を図内に表示する（showData）

データ項目

ラベルと数値を入力します。合計が100になるよう調整する必要はありません。

基本設定

タイトル

セクション・タスク

セクション（フェーズ）と各タスク（体験）を追加します。スコアは1〜5で満足度を表します。

基本設定

タイトル（任意）

グループ（Layer / Zone）

サービス（コンポーネント）

接続（Edge）

基本設定

タイトルフロー方向

担当者 / 部門（Swimlane）

プロセス間の接続

⚠️ SVG/PNG出力には外部リソースを利用する場合があります

📊 左パネルで内容を入力・編集して
「▶ 図を生成」または「▶ プレビュー生成」
を押すとここにプレビューが表示されます

（まだ図が生成されていません）

既存テンプレート

おすすめテンプレート

新規追加テンプレート

Mermaidとは？図の種類と使い分け

Mermaidはテキスト記法（DSL）で図を描くオープンソースのJavaScriptライブラリです。GitHubのMarkdownでネイティブサポートされているほか、Notion・GitLab・DocBase・Confluenceなど多くのドキュメントツールで利用できます。図をコードと同様にバージョン管理でき、チーム間で同期しやすいのが最大の特徴です。

図の種類と主な用途

図の種類	主な用途	代表的な使い場面
🔀 フローチャート	処理の流れ・分岐を可視化	業務フロー、アルゴリズム設計
↔️ シーケンス図	オブジェクト間のメッセージ交換	API設計、システム間連携
🗄️ ER図	データベースの構造・関係	DB設計、テーブル定義書
🏗️ クラス図	クラス・属性・継承関係	オブジェクト設計、UML
🔄 状態遷移図	状態の変化とトリガー	ワークフロー、UIの状態管理
📅 ガントチャート	スケジュール・進捗管理	プロジェクト計画、タスク管理
🥧 円グラフ	割合・構成比の可視化	レポート、データ分析資料
🗺️ カスタマージャーニー	体験の満足度・フェーズ可視化	UX設計、マーケティング分析
🏛️ アーキテクチャ図	システム構成・コンポーネント関係	インフラ設計、マイクロサービス構成図
📊 業務フロー図	部門横断の業務プロセス可視化	BPM、スイムレーン形式の業務フロー

よくある質問（FAQ）

Mermaidとは何ですか？

Mermaidは、テキスト記法でフローチャートやER図・シーケンス図などを描画できるオープンソースのJavaScriptライブラリです。GitHubのMarkdownに組み込まれており、graph TD などの簡単なテキストから視覚的な図を自動生成します。専用の描画ツールを使わずに、ドキュメントに図を埋め込める点が特長です。

コードが書けなくても使えますか？

はい、このツールはMermaid記法を知らない方でも使えるように設計されています。「フローチャート」「ER図」などのタブからフォームを選び、ノード名や接続を入力するだけで自動的にMermaidコードが生成されます。コードが気になる方は「Mermaidコード」タブで生成結果を確認・学習することもできます。

作った図は画像として保存できますか？

はい、SVGおよびPNG形式でダウンロードできます。プレビュータブ上部の「⬇ SVG」「⬇ PNG」ボタンをクリックすると保存されます。SVGはベクター形式のため拡大縮小しても劣化せず、PNG形式は一般的な画像として扱えます。

フローチャート以外に何が作れますか？

このツールは10種類の図（フローチャート・シーケンス図・クラス図・状態遷移図・ER図・ガントチャート・円グラフ・カスタマージャーニー・アーキテクチャ図・業務フロー図）に加え、Mermaidコードを直接入力できる「直接入力モード」にも対応しています。上部のタブから切り替えてください。

はてなブログやドキュメント作成にも使えますか？

「Mermaidコード」タブに表示されるテキストをコピーして、GitHubのMarkdown・Notion・DocBase・Zenn・はてなブログ（Mermaid対応テーマ）などに貼り付けると図として表示されます。また、画像としてダウンロードすれば任意のツールやスライド資料にも使用できます。

下書きは保存できますか？

はい。「💾 下書き保存」ボタンで現在の図種・入力フォームの値・リスト項目・生成済みコードをまとめてブラウザのlocalStorageに保存できます。「📂 下書き読込」で保存時の図種とフォーム状態を復元し、すぐに再生成できる状態に戻ります。ただしブラウザのキャッシュ削除や異なるブラウザ間では引き継ぎできません。

このツールはインターネット接続が必要ですか？

このツールは、初回のプレビュー表示時にMermaidライブラリを外部CDN（jsDelivr）から読み込むため、通常はインターネット接続が必要です。また、PNG出力や描画失敗時のフォールバック処理では外部レンダリングサービス（mermaid.ink）を利用する場合があります。一方、フォーム入力・下書き保存などの一部操作はローカルで行えます。SVG出力も、ブラウザ内描画が成功している場合は外部通信なしで保存できることがあります。機密情報・個人情報を含む内容は入力しないでください。完全オフライン環境では正常に動作しない場合があります。