Mermaidダイアグラムエディタ
テキストで図を描けるMermaid記法をリアルタイムプレビュー。PNG/SVG出力対応
テキスト形式で図を描けるMermaid記法をリアルタイムにプレビューし、PNG/SVG画像として保存できます。 フローチャート、シーケンス図、クラス図など様々な図形に対応しています。
Mermaidコード入力
101 / 50,000 文字プレビュー
💡 Mermaid記法の雑学・Tips
📝 Mermaidは「人魚」という意味
Mermaid記法の名前の由来は英語の「mermaid（人魚）」です。開発者のKnut Sveidqvistが、シンプルで美しい図を簡単に作れるツールを目指して2014年に開発しました。マークダウンのように書きやすく、GitHubやNotionなどでも広く採用されています。
🌍 GitHubで標準サポート
2022年、GitHubがMermaid記法を公式サポートしたことで、README.mdやIssue、Pull Requestのコメント内で直接図を描けるようになりました。これにより、ドキュメントの可読性が大幅に向上し、多くの開発者がMermaidを使い始めました。
⚡ AIと組み合わせて効率化
ChatGPTやGeminiなどのAIに「この業務フローをMermaid記法で書いて」と指示すると、テキストから自動的にMermaidコードを生成してくれます。複雑な図も短時間で作成でき、手動で描くよりも圧倒的に効率的です。
🔄 図の種類が豊富
Mermaidはフローチャートだけでなく、シーケンス図、クラス図、ER図、ガントチャート、円グラフ、Gitグラフ、マインドマップなど10種類以上の図形に対応しています。1つの記法で様々な用途に使えるため、学習コストを抑えつつ幅広いシーンで活用できます。
📚 公式ドキュメントが充実
Mermaidの公式サイト（mermaid.js.org）では、すべての図形タイプのサンプルコードと詳細な説明が公開されています。ライブエディタも提供されており、ブラウザ上で試しながら学習できるため、初心者でも簡単に習得できます。