Mermaidグラフエディター
Mermaidのフローチャートやシーケンス図などをローカルで編集し、厳格な安全モードでプレビューできます。SVG または PNG をダウンロードできます。
ブラウザー内でローカル処理
このページは公開ディレクトリのチェックに合格しています。JavaScript を有効にすると、すべての機能を使用できます。
使用ガイド
Mermaid 図表エディターの使い方
図表のソースコードは現在のブラウザ内でのみ解析・レンダリングされ、アップロードされません。レンダラーは厳格なセキュリティモードを使用します。
グラフのソースコードを入力
128 KiB以下のMermaidコードを貼り付け、デフォルト、中立、フォレスト、ダークのいずれかのテーマを選択してください。
レンダリングして修正
「レンダリング」をクリックして分離されたプレビューを確認できます。構文エラーがある場合は、修正に戻れるよう、位置や解析情報が表示されます。
グラフをダウンロード
ラベルと連結を確認したら、安全にクリーンアップされた SVG または PNG をエクスポートします。
制限事項と注意点
- 現在サイトに固定されているバージョンのMermaid構文にのみ対応しています。実験的な機能、古い構文、サードパーティ製の拡張機能には互換性がない場合があります。
- 厳格な安全モードでは、HTMLタグ、クリックコールバック、外部リンク、自 customスクリプトが制限され、一部の高度なインタラクションは表示されません。
- ソースコード、文の数、字句トークン、チェーンノード、接続線の数、およびレンダリング後の SVG には、すべて安全上限があります。PNG のエクスポートにもキャンバスサイズの制限があります。
よくある質問
click コマンドが実行されないのはなぜですか？
このツールは厳格なセキュリティモードを有効にし、リンクのコールバックやスクリプトを実行しません。ローカルプレビューの安全性を維持するためです。
SVG と PNG のどちらを選べばよいですか？
SVG は引き続き編集やロスレスズームを行うのに適しています。PNG は SVG に対応していないドキュメントやソーシャルプラットフォームに適しています。
グラフは自動保存されますか？
いいえ。ソースコードは現在のページのメモリ内にのみ保存されます。離れる前にコピーまたはダウンロードしてください。