Mermaid ライブエディター: 図を SVG に描画

フローチャート・シーケンス図・ガント図を入力に合わせて即座に SVG に描画する Mermaid ライブエディター。

Mermaid コードはブラウザ内のローカルで描画され、サーバーにアップロードされることはありません。

開発・運営：Udit Agarwal

エクスポートした図を縮小したいですか? SVG Optimizer を試してください。

Mermaid 図レンダラー について

この mermaid ライブエディターは、プレーンな Mermaid コードを入力に合わせて描画された図に変え、貼り付けた瞬間に描画が始まります。フローチャート、シーケンス図、ガントチャート、クラス図、状態図を入力すると、ソースの横に SVG が即座に表示されます。ドキュメント、README ファイル、設計ノートに図を保つ開発者、テクニカルライター、アーキテクトが、図を手早くプレビューしてエクスポートできるよう作られています。mermaid 図レンダラーは、表示に合わせてライトとダークのテーマを自動検出し、構文エラーをインラインで報告して素早く修正でき、結果をクリーンな SVG としてダウンロードできます。すべてはブラウザ内のローカルで処理されるため、図のソースが端末から外に出ることも、サーバーにアップロードされることもありません。

機能

• 入力に合わせて Mermaid コードを SVG にライブ描画
• フローチャート・シーケンス・ガント・クラス・状態など多数の図タイプに対応
• インラインの構文エラーメッセージでコードの問題箇所を特定
• 現在の表示に合わせてライトとダークのテーマを自動検出
• 描画した図をクリーンな SVG ファイルとしてダウンロード
• 厳格なセキュリティモードで描画時に図の内容をサニタイズ
• すべてブラウザ内で動作するため、サーバーにアップロードされることはありません

Mermaid 図レンダラー の使い方

1. 入力欄に Mermaid コードを貼り付けるか入力します。
2. 出力パネルで図が自動的に描画されるのを確認します。
3. インラインの構文エラーメッセージが出たら修正します。
4. ブラウザやアプリのテーマを切り替えてライトまたはダークの見た目をプレビューします。
5. ダウンロードをクリックして結果を diagram.svg として保存します。

例

入力

graph TD
  A[開始] --> B{動く?}
  B -->|はい| C[リリース]
  B -->|いいえ| D[修正]
  D --> B

出力

描画された SVG フローチャート: 「開始」ボックスから「動く?」判定のひし形へ流れ、「はい」分岐は「リリース」を指し、「いいえ」分岐は「修正」を指し、「修正」は判定へループバックします。

ダウンロード可能な SVG に描画されたシンプルなフローチャート。

よくあるエラーとトラブルシューティング

• 図の代わりにパースエラーや「Syntax error in text」が表示される。 — 最初の行が有効な図タイプ（例: graph TD、sequenceDiagram、gantt）を宣言しているか、矢印と括弧の対応が取れているかを確認してください。
• 丸括弧や引用符などの特殊文字を含むノードラベルが描画を壊す。 — ラベルテキストをダブルクォートで囲んでください。例えば A["My (label)"] とすると、Mermaid が文字をリテラルとして扱います。
• 図は描画されるが、背景に対して色がおかしく見える。 — レンダラーはライトまたはダークのテーマを自動的に追従します。合った見た目にするにはアプリのテーマを切り替えてください。
• インデントやタブがフローチャートで予期しないレイアウトを起こす。 — インデントには一貫したスペースを使い、各ノードやリンクを 1 行ずつにしてください。

よくある質問

Mermaid ライブエディターとは何ですか?

Mermaid コードをリアルタイムで描画された図に変換するブラウザ内ツールです。フローチャートやシーケンス図などをソースの横でプレビューし、SVG としてエクスポートできます。

Mermaid ライブエディターはどの図タイプに対応していますか?

フローチャート・シーケンス図・ガントチャート・クラス図・状態図を含む標準的な Mermaid 構文を描画します。GitHub や多くのドキュメントツールで使われるのと同じ構文です。

Mermaid の図を画像としてエクスポートするには?

図が描画されたらダウンロードをクリックして SVG ファイルとして保存し、ドキュメントに貼り付けたり、任意のベクターエディターで開いたりできます。

なぜ私の Mermaid 図に構文エラーが表示されるのですか?

レンダラーは Mermaid コードを検証し、パーサーのメッセージをインラインで表示します。多くのエラーは図タイプの宣言漏れ、または括弧や矢印の不一致から生じます。

描画された図はダークモードに合いますか?

はい。Mermaid ライブエディターはライトまたはダークのどちらで表示しているかを検出し、合った Mermaid テーマを自動的に適用します。

私の Mermaid 図のコードはプライベートに保たれますか?

はい。Mermaid のソースはブラウザ内のローカルで描画され、端末から外に出ることはないため、サーバーにアップロードされることもありません。

関連ツール

• JSON フォーマッター — JSONの整形・圧縮・検証を行い、エラー箇所も表示します。
• YAML ↔ JSON — YAMLをJSONに、またその逆に変換します。
• Markdown プレビュー — MarkdownをHTMLにレンダリングし、ライブプレビューします。
• MDX 変換ツール — MDXをテキストとしてレンダリングし、HTML → MDX 変換やMDXリテラルへのエスケープを行います。
• SVG オプティマイザー — SVGを圧縮: コメント、メタデータ、エディタの残骸を削除し、空白をまとめます。
• XML フォーマッター — XMLの整形・圧縮・検証を行い、XML ↔ JSON を変換します。
• GraphQL フォーマッター — GraphQLのクエリやスキーマを整形・圧縮し、構文を検証してオペレーションを抽出します。
• JSON からコード — JSONから Go、Rust、Python、Java、Kotlin、C#、TypeScript の型を生成します。

コードフォーマッターの他のツール

• SVG オプティマイザー — SVGを圧縮: コメント、メタデータ、エディタの残骸を削除し、空白をまとめます。
• MongoDB クエリ整形ツール — MongoDB のクエリや find() 文をブラウザ内で整形・インデントします。
• MongoDB 集計整形ツール — MongoDB の集計パイプラインをブラウザ内で整形・インデントします。
• MongoDB エクスプローラー — MongoDB のドキュメントやコレクションのサンプルを調べ、フィールドのスキーマと型を推測します。
• OpenAPI / Swagger フォーマッター — OpenAPI / Swagger 仕様（JSON または YAML）を整形・検証し、パスと操作の数を数えます。
• CSS単位変換ツール — px・rem・em・pt・% をリアルタイムに相互変換します。
• glob to regex 変換ツール — globパターンをJavaScriptのregexに変換し、パスでテストできます。
• HTML to Markdown 変換ツール — HTMLをきれいで読みやすいMarkdownに変換します。
• TOML 整形・変換ツール — TOMLを整形・検証し、JSONと相互変換します。
• logfmt to JSON コンバーター — logfmt の key=value ログを JSON に、また JSON から logfmt に変換します。
• dotenv から JSON への変換 — .env ファイルを JSON オブジェクトに、JSON を .env に相互変換できます。
• CSV から Markdown テーブルへの変換 — CSV や TSV を GitHub 形式の Markdown テーブルに変換できます。

コードフォーマッターのツールをすべて見る (32) · すべてのツール