Mermaid.js ビジュアルエディター & ライブダイアグラムジェネレーター

Mermaid.js ビジュアルエディター — ライブ Mermaid プレビューとエクスポート

Mermaid ビジュアルエディターは、Mermaid ダイアグラム（フローチャート、シーケンス図、状態機械など）のための軽量なブラウザベースのエディターです。Mermaid コードを記述または貼り付け、レンダリングされたダイアグラムのライブプレビューを確認（Mermaid.js の読み込みが許可されている場合）、Markdown、GitHub、Notion、または Mermaid をサポートする任意のビューアで使用するためのソーステキストをコピーできます。

このツールを使用する理由

• シングルワークスペース: 複数のタブやツールを切り替えることなく、Mermaid 構文を下書きおよび微調整できます。
• 即時フィードバック: ダイアグラムコードを調整し、入力しながらプレビューが更新されるので、構文やレイアウトの問題を素早く修正できます。
• コピー可能な出力: ドキュメント、README、Wiki、ノートアプリに直接貼り付けられるクリーンな Mermaid テキストをエクスポートできます。
• 内蔵リファレンス: graph LR、矢印、エッジラベルなどのクイックチートシートをエディターの横に配置できます。

主な機能

• コードエディターエリア: 専用のテキストエリアで Mermaid ソース (graph LR、graph TD、sequenceDiagram、classDiagram など) を編集できます。
• ライブ Mermaid プレビュー: ページが Mermaid.js を読み込むことができる場合、プレビューパネルはダイアグラムを SVG としてレンダリングし、視覚的に構造を確認できます。
• コードコピーボタン: 現在の Mermaid テキストをワンクリックでコピーし、GitHub、Notion、または mermaid.live に貼り付ける準備ができます。
• 便利なデフォルト: ツールはシンプルなサンプルグラフから開始するので、有効な Mermaid 構文をすぐに確認し、ニーズに合わせて変更できます。

使い方

エディターに Mermaid コードを入力または貼り付けます。このツールはあなたのテキストを保存し、Mermaid.js が利用可能な場合は、その横でライブダイアグラムプレビューをレンダリングします。いつでもコードをコピーをクリックして、生の Mermaid ソースをクリップボードに配置し、好みの Markdown やドキュメント環境で再利用できます。

特定の環境が外部スクリプトをブロックする場合でも、このエディターはクリーンな Mermaid コードのスクラッチパッド兼コピーヘルパーとして機能します。ここでダイアグラム定義を記述し、Mermaid 対応のビューアに貼り付けてレンダリングします。

Mermaid ビジュアルエディターを試す

デフォルトの例（小さな意思決定フロー）から始めるか、独自の Mermaid ダイアグラムを貼り付けます。ノードラベル、矢印、方向 (LR、TD など) を微調整し、プレビューの更新を確認し、最終的なコードをドキュメント、Wiki、または Mermaid ライブエディターにコピーしてください。