Mermaid を書けば、図がすぐに現れる。
集中できるエディターと、Mermaid のすべての図種をカバーする充実したリファレンス。フローチャート、シーケンス、クラス、ステート、ER、ガント、円、ジャーニー、マインドマップ、タイムライン、Git、C4。ログイン不要、つまずくところなし。
すべての Mermaid 図に、しっかりしたドキュメントを
各図種に専用ページ──構文、落とし穴、厳選テンプレート、そしてワンクリックの「エディターで開く」。
すべて見る →テキストで考える人のために作られたエディター
すべての操作はキーボード優先。すべての出力は持ち運べる。すべての図種にインラインのドキュメント。
分割画面のライブプレビュー
左で書けば、右側 で 30ms 以内に図が更新。エラーは該当行をピンポイントで示します。
12 種類すべての図に対応
フローチャート、シーケンス、クラス、ステート、ER、ガント、円、ジャーニー、マインドマップ、タイムライン、Git、C4 ― プラグインは不要です。
ピクセルまで綺麗な書き出し
SVG、PNG @1×/2×/3×、PDF、そしてどの Markdown レンダラーにも貼れる埋め込みコード。
テーマをカスタマイズ
配色・フォント・線をそのまま持ち込めます。手描き風を含む 6 種類のビルトインテーマつき。
共有できる URL
図は URL の中。アカウントもバックエンドも不要。リンクがそのままドキュメントになります。
UI は 8 言語へ拡張中
現在は English・简体中文・日本語に対応。한국어・Español・Français・Deutsch・Português も近日提供予定。
実際に使われている場面
図の種類を選んで、そのまま書きはじめる
各ガイドはチュートリアルとリファレンスを兼ねた 1 ページ構成。ログイン 不要、余計な装飾もなし。
チームのドキュメント作法にそのまま馴染む Mermaid エディター。
ソフトウェアエンジニア、プロダクトマネージャー、テクニカルライター、教育者──diagram-as-code を使う理由はそれぞれ違います。MERMAIDEDITOR はその 4 つすべてに応えるオンライン Mermaid エディターです。ブラウザで Mermaid ライブエディターを開き、Mermaid 構文を書けば、ミリ秒で綺麗な SVG のフローチャート、シーケンス図、ER 図、ガントチャートが手に入ります。
ソフトウェアエンジニア向け
C4 図でマイクロサービスのアーキテクチャを記述し、OAuth2 のシーケンス図を素早く描き、ER 図でデータベーススキーマをモデリング。Mermaid フローチャートをコードと並べて git にコミットできます。
プロダクトマネージャー向け
Mermaid ガントチャートで四半期ロードマップを引き、オンボーディング体験をマップ化し、仕様書を離れずユーザーフローを描く──すべての図はテキストなので、レビューは普通のプルリクで完結します。
テクニカルライター向け
古びていくスクリーンショットを、製品と一緒に更新される diagram-as-code に置き換える。Mermaid の Markdown 構文は MkDocs、Docusaurus、GitBook、その他あらゆる静的サイトジェネレーターにそのまま埋め込めます。
教育者・学生向け
状態機械、有限オートマトン、UML クラス図、データベースモデリングを、無料のオンライン図エディターで教えられます。ログイン不要、オフラインでも動き、配布資料用に綺麗な SVG と PDF を書き出せます。
ワンクリックでコピーできる Mermaid の例。
どのスニペットもすぐ使える Mermaid テンプレートです。コードをコピーして Mermaid エディターに貼り付け、ラベルを書き換え、SVG か PNG で書き出すだけ──アカウントは要りません。
Mermaid は、ドキュメントが置かれているあらゆる場所でレンダリングされます。
Mermaid 構文は diagram-as-code の共通語。MERMAIDEDITOR で描いた図は、チームが既に使っているプラットフォームにそのまま収まります──プラグインも変換ツールも、ビルドし直しも要りません。
白紙の状態から出荷可能な図まで、3 ステップ。
diagram-as-code のワークフローは、Mermaid フローチャート、シーケンス図、UML クラス図、ER 図、どれを描く場合でも同じです。
Mermaid 構文を書く
左のペインで Mermaid Markdown を入力します。オートコンプリート、シンタックスハイライト、インラインのエラーヒントが、レンダリングが壊れる前にタイポを捕まえます。
ライブでレンダ リングを確認
右のペインは 30ms 以内に更新されます。テーマを切り替え、向きを変え、レンダラーを差し替える──キーを打つたびにすぐ視覚的なフィードバックが返ってきます。
書き出すか、埋め込む
SVG、PNG、PDF でダウンロード。Mermaid の Markdown ブロックをコピー。仕様書、README、Notion に共有用 URL を貼り付ける。あなたの図はもう diagram-as-code です。
なぜチームは diagram-as-code に移行するのか。
この 20 年間、ソフトウェアチームは Visio、OmniGraffle、draw.io、Lucidchart でアーキテクチャをドキュメント化してきました。それらのツールでも、それなりに用は足ります──プルリクで図をレビューしたい、2 つのバージョンを diff したい、サービス名が変わったので 50 枚の図を一斉に更新したい、と思うその瞬間までは。ドラッグ&ドロップのダイアグラムエディターは、変化し続けるシステムにとって行き止まりです。
Mermaid はバージョン管理の問題を片付けてくれます。Mermaid のフローチャートはプレーンテキスト。Mermaid のシーケンス図もプレーンテキスト。クラス図、ER 図、ステート図、ガントチャート、円グラフ、ユーザージャーニー、マインドマップ 、タイムライン、Git グラフ、C4 コンテキスト図──すべてプレーンテキストです。プレーンテキストは綺麗に diff できる。綺麗にレビューできる。コントリビューター 100 人、図 1000 枚にスケールしても、誰も迷子になりません。
MERMAIDEDITOR は、そのワークフローを軸に作られたオンライン Mermaid エディターです。左で Mermaid Markdown を書き、右で図をレンダリングし、SVG や PNG で書き出し、Mermaid コードブロックをそのまま README にコピーして出荷する。ログインなし。トラッキングなし。2 枚目を描き終わる前に「チームプラン」を売り込まれることもありません。
公式の Mermaid ライブエディターを使ったことがあるなら、すぐに馴染めるはずです。MERMAIDEDITOR はそこに、日々の仕事で本当に効くものを足しました──充実したチートシート、厳選された 240 以上のテンプレート、各図種ごとの Mermaid 例ライブラリ、3 つの UI 言語（さらに 5 言語をロードマップに）、ダークモード、キーボード優先のナビゲーション、オフライン対応、そしてパワーユーザー向けの集中できる三分割レイアウト。
乗り換える前にチームが必ず聞く質問。
Mermaid を、書いた本人のように語れるようになる。
ドキュメント、チートシート、図種ガイドで出会う用語のクイックリファレンス。
Mermaid エディターを開く。図を描く。ドキュメントを出荷する。
個人はずっと無料。共同編集、AI 生成、履歴管理が必要なチームには Pro。