Mermaid図生成ツール
高速でプライベートなMermaidライブエディタ。任意のMermaid図を貼り付けると即座にレンダリングが見えます — フローチャート、シーケンス図、ER図、クラス図、ガントチャート、マインドマップ全て1つの場所で。
1行に1ステップ。2スペース字下げすると上の行の下に分岐します。
Mermaidとは?
Mermaidはオープンソースの「図コード」言語です。短いテキスト記述を書くとMermaidが図を描画します。これはGitHub、GitLab、Obsidianおよび多くのドキュメントプラットフォームがネイティブにレンダリングする同じ構文なので、Mermaid図はとても移植性があります — それをサポートする場所に貼り付けると自動的に描画されます。
このエディタはブラウザで公式Mermaidレンダラーを実行します。サポートされている図の種類を入力または貼り付けると、ゼロセットアップ、サーバーに送信なしでライブレンダリングされます。
エディタからドキュメントへ
埋め込み用のベクトルSVG、スライド用のPNG、またはGitHub READMEに自動的にレンダリングされるMarkdownの```mermaid ブロックのコピーをエクスポート。編集可能に保つべき図については、ソースをリポジトリに保つ。いつでもここで再度開きます。
マーメイド記法とGitHub README
マーメイド記法(Mermaid)は、図を「コードとして書く」ための記法です。短いテキストを書くだけでフローチャート、シーケンス図、ER 図、クラス図、ガントチャートなどが描画でき、GitHub・GitLab・Obsidian など多くのツールがそのまま表示に対応しています。だからこそ Mermaid 図はどこに貼っても同じように描画される、移植性の高いドキュメント資産になります。
GitHub の README では、```mermaid のコードブロックに記法を書くだけで図が自動でレンダリングされます。このページの書き出しメニューから Markdown ブロックをコピーして貼り付ければ、画像ファイルを管理しなくても Mermaid 図がそのまま README に表示されます。図はコードなので Pull Request の差分でレビューでき、コードと一緒にバージョン管理できます。
よくある質問
これは無料のオンラインMermaidエディタですか?
はい — Mermaidを貼り付けると、登録なし、透かしなしで無料でブラウザでライブレンダリングされます。SVG/PNGをエクスポートするか、ソースをコピーできます。
どのMermaid図の種類がサポートされていますか?
フローチャート、シーケンス図、ER図、クラス図、状態図、ガントチャート、マインドマップ、円グラフ — 完全なMermaidレンダラーがロードされます。
Mermaidコードはアップロードされていますか?
いいえ。Mermaidエンジンは公開CDNから1回ロードされ、その後すべてローカルでレンダリングされます。図テキストはデバイスから外に出ません。
Mermaid図をGitHub READMEに埋め込むにはどうしますか?
エクスポートメニューからMarkdownブロックをコピーしてREADMEに貼り付けます。GitHubは```mermaid コードブロックを自動的にレンダリングします — 画像は不要です。
このエディタはどのMermaidバージョンですか?
エディタは公開CDNからMermaid 11をロードするため、何もインストールせずに現在の構文と図タイプを取得できます。
マーメイド記法(Mermaid 図)の書き方はどこで確認できますか?
このページ右側のチートシートに、主要な図の種類(flowchart / sequenceDiagram / erDiagram / classDiagram / gantt / mindmap など)の書き出し方をまとめています。先頭の宣言を変えるだけで図の種類が切り替わるので、例を読み込んで編集しながらマーメイド記法を覚えるのがおすすめです。入力した Mermaid 図はその場で描画されます。