Mermaidダイアグラムエディタ

Mermaidダイアグラムエディタは、Mermaidダイアグラムの記述と プレビューをリアルタイムで行えるスプリットペイン環境を提供します。 左側にダイアグラムコードを入力すると、右側にレンダリングされた出力が ライブで更新されます。フローチャート、シーケンス図、ガントチャート、 ER図、クラス図、円グラフなど、すべての主要なMermaidダイアグラムタイプに 対応しています。

テンプレートライブラリが各ダイアグラムタイプの出発点を提供するため、 構文を暗記する必要はありません。テンプレートを選択してカスタマイズし、 結果をSVGまたはPNGとしてエクスポートできます。SVGエクスポートはクリーンで 解像度に依存しないベクターグラフィックスを生成し、ドキュメントやプレゼンテーション に最適です。

Mermaidパーサーが構文の問題を検出すると、エラーメッセージがインラインで 表示されるため、複雑なダイアグラムのデバッグが容易です。ダイアグラムテーマは サイトテーマとは独立してダークとライトを切り替えられます。Mermaidダイアグラムは <Link href={getLocalePath(locale, "/tools/markdown-preview")} className="text-primary underline underline-offset-2"

Markdownドキュメント で広く使用されています — ここでダイアグラムをテストしてから、READMEにコードを 貼り付けてください。エクスポートしたSVGの最適化には <Link href={getLocalePath(locale, "/tools/svg-optimizer")} className="text-primary underline underline-offset-2"

SVGオプティマイザー をご利用ください。

すべてのレンダリングはmermaid.jsライブラリを使用してクライアントサイドで 行われます。ダイアグラムコードがブラウザ外に送信されることはありません。 その他のコードフォーマット作業には、 <Link href={getLocalePath(locale, "/tools/graphql-formatter")} className="text-primary underline underline-offset-2"

GraphQLフォーマッター や <Link href={getLocalePath(locale, "/tools/json-formatter")} className="text-primary underline underline-offset-2"

JSONフォーマッター をご利用ください。

1. ドロップダウンからテンプレートを選択して、事前入力されたダイアグラムから始めるか、エディタに独自のMermaidコードを入力します。
2. プレビューが入力に合わせて自動更新されます（パフォーマンスのためにデバウンスあり）。
3. テーマボタンでダイアグラムテーマをダークとライトに切り替えます。
4. SVGをクリックしてスケーラブルなベクターグラフィックとしてダウンロードするか、PNGでラスター画像としてダウンロードします。
5. 構文が無効な場合、プレビュー下に問題の詳細を含むエラーメッセージが表示されます。
6. Ctrl+Enterで強制的に再レンダリング、Ctrl+Shift+CでSVGマークアップをコピーします。