Mermaid図無料WebGUIエディタを厳選！「手書き風もあるよ」

Mermaid（マーメイド）は、なんでもテキストでサクッと図を作れる便利ライブラリ。

……とはいえ、「コードで書いて」と言われると大半の人が「やめとこ」ってなりますよね。そこで今回は、「マウスで直感的に操作できる！しかも無料」という、普通の人間にも優しいMermaid対応エディタを、

・インストール不要のWebアプリ

・VSCode（エンジニア向け）拡張

の2軸で徹底比較してみました。

ラフな手書き風やUMLっぽいカッチリ図など、いろんなスタイルも紹介します。

「クリックして、見て、即使える」が正義！余計な知識いりません。

1. ブラウザですぐ使える！Webアプリ系

向いてる人：

「本家じゃないと不安」「図の種類、全部使いたい」

とりあえず触ってみて損はしないです。

注意：GUIで図を組み立てるドラッグ＆ドロップはないので、結局“ちょいコード”の壁は超えられません。

コード書かなくていい。全部マウスでポチポチ作れる
（Visual -> diagram選択 -> 出てきた図をカンバスに移動させるとキャプチャみたいになる✨️）
今のところ「フローチャート専用」だけど、これが超楽ちん。矢印つなげるだけで自動でコードができる
しかも“手書き風（ラフ）”にもワンタッチで切り替えOK

向いてる人：

「頭の中のイメージをそのまま図にしたい」

「とにかくめんどくさい作業をしたくない」

注意：フローチャート以外（UMLとか）は有料じゃないと使えません。

エクスポート（画像保存）も無料だと制限あり。でも、コードは出せるので他のサービスで絵にできます。

向いてる人：

「開発ドキュメントも図もまとめてVSCode管理したい」

「色んな図の最新機能を追いたい人」

```mermaid
graph TD
  A["人間"] -->|操作| B(システム)
  B --> C{判定}
  C -- Yes --> D[成功]
  C -- No --> E[失敗]
```

向いてる人：

「コードとか書きたくない！」

「MarkdownやChromeだけで完結したい」

注意：GUIで作れる図は限定的。細かいレイアウト調整などは結局手動でコードを書く必要あり。

Obsidian、Joplin、Zettlrなど、Markdownエディタ系もMermaidプレビュー対応が増えてます（クリックして図を編集する系ではない）。

「メモついでに図を挿入したい」くらいなら充分アリです。

普通の図をちょっと描きたい人も、意識高い開発者も、自分のレベル・やる気・面倒くささに合わせて選んでください。

追記：

どのツールも「これ一つで全て解決！」ってほどではありません。

どうせ途中で「やっぱりパワポでいいや…」って言い出す人が続出するので、とりあえず気になったものは触ってみてください！