Mermaid ダイアグラムレンダラー

Mermaid ダイアグラムレンダラー

Mermaid.js のシンタックスを貼り付けて、リアルタイムでインタラクティブなダイアグラムを確認・コピーまたはダウンロードできます。フローチャート、シーケンス図、ギャンツチャート、ピースチャート、クラス図、ER図、ステート図、ジャーニー図など、Mermaid v11がサポートするすべてのタイプが、ブラウザ上でレンダリングされ、サーバー、アカウント、インストールが不要です。

Mermaidは「ダイアグラムとしてコード」という概念に非常に適しています。ダイアグラムはプロジェクトの他の部分と同じようにテキストとして存在しますが、人間が実際に図を確認するにはレンダーツールが必要です。このツールはそのギャップを埋めます。任意のMermaidスニペットを投入し、テーマを切り替え、結果をSVGまたはPNGとしてエクスポートできます。

使用方法

1. Mermaidコードをエディタに貼り付けます — または フローチャート, シーケンス, ギャンツ, ピースチャート、 または クラス をクリックしてサンプル例をロードします。
2. [表示モード]を選択してください テーマ (デフォルト、ダーク、フォレスト、ニュートラル、ベース) および 背景 (透過、白、ライトグレイ、ダーク) を選択してスライドやドキュメントに合わせます。
3. 入力しながらダイアグラムがリアルタイムで更新されます。構文が間違っている場合、プレビューの下に正確なMermaidエラーを表示します。
4. 完成したら、 SVG をダウンロード でスケーラブルなベクターを取得します。 PNGをダウンロード でレターグラフを取得します。 コピー でSVGソースを取得して埋め込みに使用できます。

機能

• ライブプレビュー — エディット中にダイアグラムが再レンダリングされ、大きなダイアグラムをスムーズに表示するためにデボンス処理が適用されます。
• 主要なMermaidタイプ — フローチャート、シーケンス、ギャンツ、ピース、クラス、ER、ステート、ジャーニー、およびMermaid v11がサポートする他のすべてのシンタックス。
• 5つの内蔵テーマ — デフォルト、ダーク、フォレスト、ニュートラル、ベース、および透過、白、ライト、ダークの予備背景をカスタマイズ可能。
• SVGおよびPNGエクスポート — ページ内でクリアなベクターSVGまたは2倍スケールのPNGをダウンロードできます。
• コピー用のSVGソース — リーダー、ドキュメント、またはウェブページに貼り付けるための原始マーカーを取得できます。
• インラインエラーレポート — Mermaid構文エラーが明確に表示され、数秒で修正できます。
• プライバシー第一 — すべてがブラウザ上で実行されます。ダイアグラムは当社のサーバーに送信されることなく、プライバシーを守られます。