Mermaid 図レンダラー

Mermaid図（フロー、シーケンス、ガント）をブラウザ内でSVGにレンダリングします。

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

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

Mermaid 図レンダラー について

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

機能

Mermaid 図レンダラー の使い方

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

例

入力

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

出力

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

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

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

よくある質問

Mermaid ライブエディターとは何ですか?
Mermaid コードをリアルタイムで描画された図に変換するブラウザ内ツールです。フローチャートやシーケンス図などをソースの横でプレビューし、SVG としてエクスポートできます。
Mermaid ライブエディターはどの図タイプに対応していますか?
フローチャート・シーケンス図・ガントチャート・クラス図・状態図を含む標準的な Mermaid 構文を描画します。GitHub や多くのドキュメントツールで使われるのと同じ構文です。
Mermaid の図を画像としてエクスポートするには?
図が描画されたらダウンロードをクリックして SVG ファイルとして保存し、ドキュメントに貼り付けたり、任意のベクターエディターで開いたりできます。
なぜ私の Mermaid 図に構文エラーが表示されるのですか?
レンダラーは Mermaid コードを検証し、パーサーのメッセージをインラインで表示します。多くのエラーは図タイプの宣言漏れ、または括弧や矢印の不一致から生じます。
描画された図はダークモードに合いますか?
はい。Mermaid ライブエディターはライトまたはダークのどちらで表示しているかを検出し、合った Mermaid テーマを自動的に適用します。
私の Mermaid 図のコードはプライベートに保たれますか?
はい。Mermaid のソースはブラウザ内のローカルで描画され、端末から外に出ることはないため、サーバーにアップロードされることもありません。

関連ツール

すべての ArrayKit ツール