Mermaid（マーメイド）は、なんでもテキストでサクッと図を作れる便利ライブラリ。
……とはいえ、「コードで書いて」と言われると大半の人が「やめとこ」ってなりますよね。そこで今回は、「マウスで直感的に操作できる！しかも無料」という、普通の人間にも優しいMermaid対応エディタを、
・インストール不要のWebアプリ
・VSCode（エンジニア向け）拡張
の2軸で徹底比較してみました。
ラフな手書き風やUMLっぽいカッチリ図など、いろんなスタイルも紹介します。
「クリックして、見て、即使える」が正義！余計な知識いりません。
1. ブラウザですぐ使える！Webアプリ系
Mermaid Live Editor（公式）
- 公式の安心感。とりあえずここから始めとけ感がすごい
- 左にテキスト入力、右に即プレビュー。作った図はPNG/SVGで保存もOK
- ほぼ全部のMermaid図が描ける。サンプル豊富で初心者にも優しい
向いてる人：
- 「本家じゃないと不安」「図の種類、全部使いたい」
- とりあえず触ってみて損はしないです。
注意：GUIで図を組み立てるドラッグ＆ドロップはないので、結局“ちょいコード”の壁は超えられません。
Mermaid Flow（ドラッグ＆ドロップ！）
- コード書かなくていい。全部マウスでポチポチ作れる
（Visual -> diagram選択 -> 出てきた図をカンバスに移動させるとキャプチャみたいになる✨️） - 今のところ「フローチャート専用」だけど、これが超楽ちん。矢印つなげるだけで自動でコードができる
- しかも“手書き風（ラフ）”にもワンタッチで切り替えOK
👉️ https://www.mermaidflow.app/
向いてる人：
- 「頭の中のイメージをそのまま図にしたい」
- 「とにかくめんどくさい作業をしたくない」
注意：フローチャート以外（UMLとか）は有料じゃないと使えません。
エクスポート（画像保存）も無料だと制限あり。でも、コードは出せるので他のサービスで絵にできます。
2. VSCode派も安心！拡張＆デスクトップ系
画像準備中
Mermaid Chart（公式VSCode拡張）
- VSCode使いなら、とりあえず入れとけの鉄板
- コード入力しつつ、リアルタイムで美しいプレビュー
- クラウド連携で“ドラッグ＆ドロップ編集”やAIアシストも使える（要ログイン）
👉️ https://www.mermaidchart.com/
向いてる人：
- 「開発ドキュメントも図もまとめてVSCode管理したい」
- 「色んな図の最新機能を追いたい人」
注意：クラウド機能使うならアカウント要ります。VSCode前提なので、一般人にはハードル高し。
Mermaid Graphical Editor（Astah提供）
画像準備中
- VSCodeでもChromeでも使える、めずらしく“日本発”な拡張
- マウス操作だけで主要な図（フロー、シーケンス、クラス、ER等）がサクサク描ける
- Mermaidコードの読み込み・編集も両対応で、既存図の微修正にも便利
👉️ https://ja.astahblog.com/2022/11/01/mermaid/
向いてる人：
- 「コードとか書きたくない！」
- 「MarkdownやChromeだけで完結したい」
注意：GUIで作れる図は限定的。細かいレイアウト調整などは結局手動でコードを書く必要あり。
その他「実はMermaid描ける」エディタたち
Obsidian、Joplin、Zettlrなど、Markdownエディタ系もMermaidプレビュー対応が増えてます（クリックして図を編集する系ではない）。
「メモついでに図を挿入したい」くらいなら充分アリです。
まとめ：どれ使えばいいか？
- 何も考えずとりあえず描きたい！→ Mermaid Flow（無料・ドラッグ対応。まずココ）
- フロー図以外も使いたい、しかも“全部本家”→ Mermaid Live Editor（公式。小難しい図も網羅）
- VSCode族で、最新機能やAIにも興味あり→ Mermaid Chart（公式拡張。色々できて最強）
- 「日本語で手軽に」＋「Chromeしか使わん」→ Mermaid Graphical Editor（Astah）
普通の図をちょっと描きたい人も、意識高い開発者も、自分のレベル・やる気・面倒くささに合わせて選んでください。
追記：
どのツールも「これ一つで全て解決！」ってほどではありません。
どうせ途中で「やっぱりパワポでいいや…」って言い出す人が続出するので、とりあえず気になったものは触ってみてください！
コメントを残す