Mermaidエディタとは、テキストで書いた図の定義（Mermaidコード）をリアルタイムに描画し、画像として書き出せるツールの総称です。ブラウザで動くオンラインエディタ、VSCodeの拡張機能、モバイルアプリ、GUIでドラッグ操作できるツールがあり、作業環境と編集スタイルを軸に選ぶのが基本です。
Mermaidの記法はA –> Bのように関係性をテキストで書くだけでフローチャートやシーケンス図を描けるのが特徴で、GitHub・Notion・GitLabなど主要プラットフォームがそのままの記法に対応しています。だからこそ、どのエディタを選ぶかで記法の学習コストも仕上がりの効率も大きく変わります。
この記事では、代表的なMermaidエディタ6選の比較から、Mermaid Live Editorの基本操作、VSCodeでの編集環境の構築、AIを使った図の作成方法までを紹介します。
なお、Mermaidで描いた図は、置き場所を決めないと作った本人しかたどり着けなくなります。図と説明をまとめて残して検索できるNotePMのようなツールも、運用の前提として考えておいてください。
目次
Mermaidエディタとは？ 仕組みと対応する図の種類
Mermaidの記法は、GitHub・Notion・GitLab・Zennといった多くのプラットフォームがそのまま解釈して図を表示するため、書いたコードを1つ用意すれば複数の環境で使い回せます。エディタで整えた図を、ドキュメントにそのまま埋め込めるということです。
Mermaidが対応する主要な図の種類は次のとおりです。自分が描きたい図が含まれているかを、まずここで確認してください。
| 図の種類 | 主な用途 |
| フローチャート | 業務フロー、処理の分岐、判断の流れ |
| シーケンス図 | システム間のやり取り、API通信の順序 |
| クラス図 | オブジェクト指向の設計、クラスの関係 |
| ER図 | データベースのテーブル構造と関連 |
| 状態遷移図（ステート図） | 画面遷移、ステータスの変化 |
| ガントチャート | プロジェクトのスケジュール管理 |
| 円グラフ | 構成比の可視化 |
| ユーザージャーニー図 | 顧客体験の流れの整理 |
| Gitグラフ | ブランチとコミットの履歴 |
| マインドマップ | アイデアや情報の階層整理 |
フローチャートやシーケンス図だけでなく、ER図やガントチャートまで1つの記法でカバーできます。個別のツールをどう選ぶかは、次の章で環境別に見ていきます。
どのMermaidエディタを使う？ 用途別おすすめ6選
Mermaidエディタは大きく4つのカテゴリに分かれます。ブラウザ上でコードを入力するオンラインエディタ、VSCodeのMarkdownワークフローに統合するVSCode拡張機能、外出先でもオフライン編集できるモバイルアプリ、そしてドラッグ&ドロップで図を組み立てるGUIエディタです。作業環境と編集スタイルの組み合わせで選んでください。
なお、draw.ioやPlantUMLからMermaidへの乗り換えを検討している場合は、「Markdownファイルと図を一体管理できるか」「既存の図データを移行する手間に見合うか」を軸に判断するとよいでしょう。Typora・Joplinなどのマークダウンエディタにも組み込みのMermaid対応機能があるため、選択肢の一つとして確認しておくと参考になります。
| ツール名 | カテゴリ | 主な特徴 | 料金 |
| Mermaid Live Editor | オンラインエディタ | 公式提供。リアルタイムプレビュー・PNG/SVGエクスポート・Gist共有 | 無料 |
| ProcessOn | オンラインエディタ | AI生成・画像認識・PNG/JPG/SVG/PDFエクスポート・高解像度対応 | 基本無料（有料プランあり） |
| ラッコキーワード Mermaid記法エディタ | オンラインエディタ（国産） | ログイン不要・日本語UI・PNG出力・Markdown形式コピー | 無料 |
| Mermaid Graphical Editor | VSCode拡張機能 | Markdownファイル内でGUI編集・コードと双方向同期 | 無料 |
| MarkChart | モバイルアプリ（iOS/iPadOS/macOS） | オフライン対応・ビジュアルエディタ・PDF/PNG/SVGエクスポート | 基本無料（Pro ¥1,800買い切り） |
| Gen2Maid-Editor | GUIエディタ（OSS） | ドラッグ&ドロップ編集・AI生成コードの後処理に特化・MITライセンス | 無料 |
1. Mermaid Live Editor（公式のオンラインエディタ）
| 運営会社 | Mermaid（OSS コミュニティ / Knut Sveidqvist ほか） |
| サービス種別 | オンラインMermaidエディタ |
| 主な利用者層 | Mermaidを学習中のエンジニア・技術ドキュメント作成者・コードを手書きする上級者 |
| 主な機能 | リアルタイムプレビュー・コード補完・PNG/SVG/Markdownエクスポート・Gistへの保存と共有・テーマ切り替え（default/dark/forest/neutral）・設定パネルでのレンダリング調整 |
| 料金 | 無料 |
Mermaid Live Editorは、Mermaid.jsの公式チームが提供する無料のオンラインエディタです。ブラウザ上でMermaidコードを入力すると、右ペインにリアルタイムでプレビューが表示されます。
最もアクセスしやすい公式ツールとして、まずここから試すのが定石です。PNG・SVG・Markdownの3形式でエクスポートでき、GitHubのGistへ保存して共有URLを発行する機能も備えています。テーマはdefault/dark/forest/neutralの4種類から切り替えられ、コード補完と設定パネルによるレンダリング調整も搭載しているため、記法を覚えながら図の仕上がりを確認したい場面に適しています。
ただし外部のオンラインサービスなので、機密情報を含むコードはローカル環境での編集を検討してください。
2. ProcessOn（AI補助付き多機能エディタ）
| 運営会社 | ProcessOn |
| サービス種別 | AI補助付きオンライン作図・Mermaidエディタ |
| 主な利用者層 | AIを活用してMermaid図を素早く生成したいエンジニア・デザイナー・ビジネスユーザー |
| 主な機能 | AIによるMermaidコード自動生成・画像認識による図の変換・PNG/JPG/SVG/PDFエクスポート（高解像度対応）・12種類のテンプレート・手描き風を含む複数テーマ・多言語インターフェース |
| 料金 | 基本無料（有料プランあり） |
ProcessOnは、AIによるMermaidコード自動生成と画像認識による図変換を搭載したオンラインエディタです。テキスト入力からコードを生成するだけでなく、既存の図や手書きスケッチを画像として読み込んでMermaid図に変換できる点は、他のオンラインエディタにはない機能です。
エクスポートはPNG・JPG・SVG・PDFの4形式に対応しており、高解像度出力も選択できるため、プレゼンテーション資料や印刷物への転用にも対応できます。12種類のテンプレートと手描き風を含む複数テーマも備え、多言語インターフェースに対応しているので、英語UIへの抵抗がある場合にも使いやすい構成です。
3. ラッコキーワード Mermaid記法エディタ（ログイン不要の国産ツール）
| 運営会社 | ラッコ株式会社 |
| サービス種別 | 国産オンラインMermaidエディタ |
| 主な利用者層 | 手軽にMermaid図を試したい日本語ユーザー・GitHubやNotionにMermaidコードを貼り付けたいエンジニア |
| 主な機能 | ログイン不要でブラウザから即利用・PNG画像のワンクリックダウンロード・フローチャート/シーケンス図/ガントチャートなど主要図のテンプレート・日本語UI・Markdown形式のコードコピー |
| 料金 | 無料 |
ラッコキーワード Mermaid記法エディタは、アカウント登録なしでブラウザから即座に使えるシンプルな国産ツールです。PNG画像のダウンロードまでワンクリックで無料完結するため、「とりあえず図を1枚作りたい」という場面に最も素早く応えられます。
日本語UIで操作できるので、英語サービスに慣れていないユーザーでも直感的に扱えます。フローチャート・シーケンス図・ガントチャートなど主要図のテンプレートをワンクリックで呼び出せるほか、Markdown形式でのコードコピーにも対応しており、GitHubのコードブロックやNotionへそのまま貼り付けられるのも実務上の利点です。
ラッコキーワード Mermaid記法エディタ公式サイトはこちら
4. Mermaid Graphical Editor（VSCodeでGUI編集できる拡張機能）
| 運営会社 | corschenzi（個人開発） |
| サービス種別 | VSCode拡張機能（MermaidのGUIエディタ） |
| 主な利用者層 | VSCodeでMarkdownドキュメントを管理しているエンジニア・記法を覚えずにMermaid図を編集したい開発者 |
| 主な機能 | MarkdownファイルへのGUI直接編集・コードとGUIの双方向リアルタイム同期・フローチャート/シーケンス図/クラス図/ER図/ステート図のGUI編集対応 |
| 料金 | 無料 |
Mermaid Graphical Editorは、VSCodeのMarkdownファイル内でMermaid図をGUI操作で直接編集できる拡張機能です。ビジュアルエディタとMermaidコードが双方向にリアルタイム同期するため、コードを手書きせずにノードや接続線を配置でき、変更内容はすぐにコードへ反映されます。
Draw.ioとの大きな違いは、Markdownファイルの外に別ファイルを作らずに完結する点です。図の管理にエクスポート作業が不要なので、ドキュメントリポジトリをMarkdownで運用しているプロジェクトとの相性が良好です。GUI編集が対応するのはフローチャート・シーケンス図・クラス図・ER図・ステート図の5種類で、これ以外の図種はコードを直接手書きすることで対応できます。
インストール手順とGUI操作の詳細は後続のVSCode設定章で解説します。
Mermaid Graphical Editor公式サイトはこちら
5. MarkChart（iPhone・iPadで使えるネイティブアプリ）
| 運営会社 | Alexandre Colucci |
| サービス種別 | iOS/iPadOS/macOSネイティブMermaidエディタ |
| 主な利用者層 | iPhone・iPadでMermaid図を編集したいエンジニア・オフライン環境や機密情報を扱う場面でMermaidを使いたいユーザー |
| 主な機能 | オフライン編集・リアルタイムプレビュー・ビジュアルエディタによるノード/接続線カスタマイズ・PDF/PNG/SVG書き出し |
| 料金 | 基本無料（MarkChart Pro ¥1,800の買い切り） |
MarkChartは、iOS・iPadOS・macOS向けのネイティブMermaidエディタです。インターネット接続なしで図の編集とプレビューが完結するオフライン対応が最大の特徴で、機密情報を含むコードを外部のオンラインサービスに送れない場面でも安心して使えます。
ビジュアルエディタでノードや接続線を直接カスタマイズでき、PDF・PNG・SVGの3形式で書き出せます。基本機能は無料で利用でき、MarkChart Pro（¥1,800の買い切り）に移行すると全機能を制限なく使えます。モバイル端末でMermaid図をオフライン編集できるネイティブアプリは選択肢が少なく、実用的な候補の一つです。
6. Gen2Maid-Editor（ドラッグ&ドロップのOSSツール）
| 運営会社 | 日本AIコンサルティング（J-AIC） |
| サービス種別 | GUIドラッグ&ドロップ型OSSウェブMermaidエディタ |
| 主な利用者層 | AIが生成したMermaidコードを視覚的に後処理・微調整したいエンジニア・OSSのMermaidGUIツールを探している開発者 |
| 主な機能 | ドラッグ&ドロップによる視覚編集・ビジュアルエディタとMermaidコードのリアルタイム同期・フローチャート対応（シーケンス図・クラス図は開発中） |
| 料金 | 無料（MITライセンスOSS） |
Gen2Maid-Editorは、J-AICが開発したドラッグ&ドロップ操作でMermaid図を視覚編集できるOSSのウェブツールです。MITライセンスでソースコードが公開されており、無料で利用できます。ビジュアルエディタとMermaidコードがリアルタイムに同期する設計で、ChatGPTやClaudeが生成したMermaidコードをそのまま貼り付けて微調整するユースケースに適しています。
現時点ではフローチャートのGUI編集に対応しており、シーケンス図やクラス図への対応は開発中の段階です。フローチャート以外の図種を扱う場合はコードを直接編集することになりますが、AI生成コードの確認・修正ツールとして限定的に使う分には十分な機能を備えています。
Mermaid Live Editorで図を作成・画像に書き出す手順
Mermaid Live Editorは、コードの入力からテーマ調整・画像書き出しまでブラウザで完結します。次の順に進めてください。
- コードを入力してリアルタイムプレビューで確認する
- テンプレートとテーマで見た目を整える
- PNG・SVGで画像を書き出す
1. コードを入力してリアルタイムプレビューで確認する
画面は左右2つのペインに分かれています。左がコードエディタ、右がプレビューです。左にMermaidコードを入力すると、右のプレビューに即座に図が描画されます。
試しに、次の3行を左のペインに入力してみてください。
- graph TD と書いて図の種類と方向（TDは上から下）を指定する
- 改行して A–>B と書く
- さらに改行して B–>C と書く
入力し終えると、右側にA→B→Cとつながる縦向きのフローチャートが表示されます。矢印記法を1行足すたびに図が伸びていくので、コードと図の対応をその場で確かめられます。入力中はシンタックスハイライトで記法が色分けされ、誤りがあればエラー通知が出るため、どこを直せばよいかがすぐ分かります。
2. テンプレートとテーマで見た目を整える
ゼロからコードを書くのが不安なら、テンプレートから始めます。テンプレートを選択するとサンプルコードが左のペインに挿入されるので、記法を覚えていなくてもその内容を書き換えるだけで図を作れます。画面上部のドロップダウンから、フローチャートやシーケンス図など作りたい図種を選んでください。
配色は設定パネルからテーマを切り替えて調整します。default・dark・forest・neutralの4種類があり、通常のドキュメントにはdefault、暗い背景のスライドにはdark、落ち着いた資料にはneutralというように、貼り付け先の雰囲気に合わせて選ぶと図が浮きません。
3. PNG・SVGで画像を書き出す
図が完成したら、画面上の「Actions」メニューから画像を書き出します。PNG・SVG・Markdownのいずれかを選んで保存すれば、ダウンロードまたはコピーできます。Web掲載や資料への貼り付けにはPNG、拡大しても劣化させたくない用途にはSVGが適しています。
同じメニューからMarkdown形式でコードをコピーすることもできます。コピーしたコードをGitHubのREADMEやNotionのページに貼り付ければ、そのまま図として表示されます。ファイルを別途アップロードせずに図を共有できる方法です。
1点注意したいのは、SVGをそのままPowerPointに貼るとフォントが崩れることがある点です。スライドで確実に同じ見た目を保ちたい場合は、SVGではなくPNGで書き出して貼り付けると、フォントの再現に悩まされずに済みます。
VSCodeでMermaidを編集・プレビューする方法
VSCodeでは拡張機能を導入することで、Markdownファイル内にMermaid図を直接埋め込み、コードとGUIの両方で編集できる環境が整います。プレビュー用のMarkdown Preview Mermaid Supportと、GUI編集用のMermaid Graphical Editorの2つを導入する前提で、次の順に進めます。
- プレビュー用とGUI編集用の拡張機能をインストールする
- MarkdownにMermaidコードを埋め込んでプレビューする
- Mermaid Graphical EditorでGUI操作する
1. プレビュー用とGUI編集用の拡張機能をインストールする
まず拡張機能を入れます。VSCodeの操作は次のとおりです。
- 左側のアクティビティバーから拡張機能アイコン（四角が組み合わさったマーク）を開く
- 検索欄に「Markdown Preview Mermaid Support」と入力してインストールする
- 続けて検索欄に「Mermaid Graphical Editor」と入力してインストールする
Markdown Preview Mermaid SupportはプレビューでMermaid図を表示するための拡張、Mermaid Graphical EditorはGUIで図を編集するための拡張です。GUI編集が不要であれば、前者のプレビュー拡張だけで十分です。
2. MarkdownにMermaidコードを埋め込んでプレビューする
Markdown Preview Mermaid Supportをインストールすると、VSCodeのMarkdownプレビューでMermaid図が描画されるようになります。図はMarkdownファイルのコードブロックとして埋め込みます。
拡張子が .md のファイルを開き、次のように書いてください。三連バッククォートのあとに mermaid と記述し、その中にMermaidコードを書いて、最後を三連バッククォートで閉じます。
- 1行目に “`mermaid と入力する
- 2行目以降に graph TD や A–>B といったMermaidコードを書く
- 最後の行に “` と入力してブロックを閉じる
入力したら、Ctrl+Shift+V（macOSは Cmd+Shift+V）でMarkdownプレビューを開きます。コードブロックの位置に図が表示されます。この mermaid コードブロックの記法はGitHub・GitLab・Zennなど多くのプラットフォームで共通して使えるため、Markdownファイル1つで図入りのドキュメントをそのまま共有できます。
3. Mermaid Graphical EditorでGUI操作する
コードを書かずにマウスで図を組みたいときは、Mermaid Graphical EditorのGUI編集を使います。プレビューだけでは足りず、図形を直接動かして調整したい場合の手段です。
操作は次の流れで行います。
- Mermaidコードブロックの近くに表示される「MermaidEditor」ボタンをクリックし、GUIエディタを開く
- ノードを追加するときは、図形を選んで「+」ボタンを押す
- ノード同士をつなぐときは「→」ボタンを押し、始点と終点のノードを選ぶ
- ノード内のテキストは、対象を選んで直接編集する
GUIで操作した結果は、その場でMermaidコードに反映されます。逆にコードを手で編集すればGUIの図にも同期されるため、大枠をマウスで作ってから細部をコードで詰める、といった使い分けができます。
AIでMermaid図を効率よく作るワークフロー
ChatGPT・Claude・GeminiなどのLLM（大規模言語モデル）にMermaidコードを生成させ、エディタで確認・修正するワークフローを使えば、記法を暗記しなくても実務レベルの図を短時間で仕上げられます。
1. LLMにMermaidコードを生成させるプロンプトの書き方
プロンプトは、図の種類・入力データ・出力形式の3要素で組み立てます。どんな図が欲しいのか、何をもとに描くのか、どの形式で返してほしいのかを明示すると、そのまま使えるコードが返ってきます。
たとえば次のように指示します。
- 「以下の業務フローをMermaid記法のフローチャートにしてください」と書き、続けて手順の箇条書きを貼る
- 「次のシステム間のやり取りをMermaid記法のシーケンス図にしてください」と書き、通信の順序を貼る
箇条書きの業務手順やマニュアルの文章を、整形せずそのままAIに渡してもMermaidコードに変換できます。記法への変換作業をAIに任せられるため、複雑な図でコードが書けずPowerPointに戻ってしまう状況を避けられます。
2. 生成コードをエディタに貼り付けて修正する
AIが出力したコードは、そのまま完成品とは限りません。コピーしてMermaid Live EditorやVSCodeに貼り付け、プレビューで図の形を確認してから細部を整えます。
よくある修正は次のようなものです。
- ノード名が英語で返ってきたら日本語に書き換える
- 余分な矢印や重複したノードを削除する
- レイアウトが横長で見づらいときは graph TD（上から下）や graph LR（左から右）で方向を変える
VSCodeで作業するなら、GitHub Copilotを併用するとコードの自動補完も使えます。AIによる生成から手直しまでをエディタ内で完結させられるため、ブラウザとの行き来もなくなります。
AIにMermaidコードを生成させるワークフローを社内で使う場合、入力したデータの扱いを情報システム部門から確認されることがあります。NotePMのAI機能はAWSのAmazon Bedrockを利用し、入力したデータはAIの学習に使用されません。あわせてSSO／SAML認証、2段階認証、IPアドレス制限、アクセスログ・監査ログ、ファイルのダウンロード制限に対応し、ISO27001（ISMS）認証を取得しているため、情報システム部門の確認事項に機能と認証で答えられます。導入可否を判断する段階で要件を照らし合わせたい方は、NotePMのサービスサイトで対応状況を確認してみてください。
まとめ
Mermaidエディタは、ブラウザ・VSCode・モバイルという作業環境と、コード入力・GUI操作・AI生成という編集スタイルの組み合わせで最適解が変わります。
迷ったら、まずMermaid Live Editorをブラウザで開いて試すのが確実です。インストールもログインもいらず、コードとプレビューの対応をその場で確認できるので、記法の感覚をつかめます。継続して使うと決めたら、VSCode拡張に移ってドキュメントと図を一元管理し、複雑な図はAIにコードを生成させてエディタで修正する流れを加えると効率が上がります。
テキストで書いた図をそのままGitHubやNotionに埋め込め、必要に応じてPNGやSVGで書き出せる点がMermaidの強みです。エンジニアリングの文脈でも非エンジニアとの共有でも活用できます。オフラインや機密情報を扱う場面ではMarkChart、AI生成コードの微調整にはGen2Maid-Editorというように、状況に応じて手元のツールを増やしていけば、図表制作のフローを無理なく実務に組み込めます。
図が価値を持つのは、必要な人が必要なときに開けるときです。NotePMなら、図を含むドキュメントをそのまま蓄積し、AIが中身まで検索して要約で答えます。設計や手順の図を組織で共有したい場合は、30日間の無料トライアルで運用イメージを確かめてみてください。