Mermaid 図エディター

動作のしくみ

• Mermaid ライブラリ（バージョン 12）を実行するため、フローチャート、シーケンス図、クラス図、状態図、ER 図、ガントチャート、円グラフ、マインドマップ、タイムラインなど、ライブラリが対応する図の種類はすべて使えます。
• ラベルは埋め込み HTML ではなく SVG テキストとして描画されるため、Figma、Inkscape、ブラウザーのタブのどれで開いても同じ見た目になります。
• Mermaid は strict セキュリティモードで動作します。クリックハンドラーとラベル内の HTML は無効化され、プレビューは画像として表示されるため、貼り付けたコードがスクリプトを実行することはありません。
• Mermaid は大きなライブラリなので、ダウンロードされるのはこのツールを初めて実行したときだけです。

よくある質問

図にパースエラーが表示されるのはなぜですか？

Mermaid はエラーの行と、そこで何を期待していたかを報告します。よくある原因は、括弧・引用符・コロンを含むラベル（二重引用符で囲んで A["Label (v2)"] のようにします）、行き先のない矢印、そして 1 行目の図の種類キーワードの綴り間違いや欠落です。

SVG ではなく PNG で取得できますか？

このツールが出力するのは SVG です。SVG はどのサイズでも鮮明で、ドキュメントサイトが埋め込むのもこの形式です。PNG が必要な場合は、ダウンロードした SVG をこのサイトの SVG → PNG 変換ツールで開けば、指定した解像度でレンダリングできます。

GitHub でも同じ見た目になりますか？

レイアウトは Mermaid によるものなので構造は同じですが、GitHub は独自の Mermaid バージョンと独自のテーマでレンダリングし、そのテーマは閲覧者のライトモード・ダークモードに従います。ごく新しい構文は、GitHub がアップグレードするまで動かないことがあります。

Mermaid のコードを AI に書いてもらえますか？

はい。このサイトの AI Mermaid 図ツールを使えば、自分の API キーで、普通の言葉による説明を Mermaid コードに変換できます。その出力をここに貼り付けて、確認とレンダリングを行ってください。

別の呼び方

• mermaid エディター
• mermaid live editor
• mermaid svg 変換
• mermaid 図 オンライン
• mermaid フローチャート
• mermaid 記法 プレビュー