Mermaid Design

はじめに

mermaid.design は無料のオンライン Mermaid ダイアグラムエディターです。左側に Mermaid 構文を書くと、右側にダイアグラムがリアルタイムでレンダリングされます。すべての処理はブラウザー内で完結します — ダイアグラムがデバイスの外に出ることはありません。

最初のダイアグラム

  1. mermaid.design を開きます — サンプルのフローチャートが読み込まれた状態でエディターが起動します。
  2. 左ペインで Mermaid コードを編集します。例:
flowchart TD
    A[開始] --> B{準備はいい?}
    B -- はい --> C[リリース]
    B -- いいえ --> D[コーディング続行]
  1. 入力に合わせてプレビューが自動的に再レンダリングされます(短いデバウンス付き)。構文が無効な場合は、エラーバナーの後ろに最後に正常にレンダリングされたダイアグラムが表示されたままになり、コードエディターが失敗した行をマークします。

ワークベンチ

エディターは 3 ペイン構成のワークベンチです:

  • コードエディター(左) — Monaco エディター(VS Code と同じエンジン)で、Mermaid 構文ハイライト、インラインのエラーマーカー、フォーマット/コピー/クリアのツールバーを備えています。細いアイコンストリップに折りたたんだり、区切り線をドラッグして幅を調整したりできます。
  • プレビュー(中央) — リアルタイムにレンダリングされるダイアグラム。ドラッグでパン、Ctrl/⌘ + スクロールでズーム、ダブルクリックでフィットします。フローティングツールバーにはズームコントロールとキャンバス背景の切り替え(ドット / 白 / チェッカー)があります。
  • テーマパネル(右) — ワンクリックのプリセット、詳細なテーマ変数、シードカラーからのテーマ生成。以下を参照してください。

狭い画面では、ワークベンチは 1 ペインになり、下部に コード / プレビュー / テーマ のタブバーが表示されます。

レンダリングモード

ナビゲーションバーのセグメントコントロールで、ダイアグラムのレンダリング方法を切り替えられます:

  • 公式 — Mermaid エンジンがレンダリングするそのままの、標準的な Mermaid SVG 出力。
  • ASCII — ダイアグラムをテキストアートに変換し、コードコメント、ドキュメント、ターミナルに貼り付けられます。ASCII レンダリング を参照してください。

モードは URL の一部なので、特定のモードへのリンクをブックマークしたり共有したりできます。

テーマ

すべてのダイアグラムは base テーマと 70 以上の編集可能なテーマ変数でレンダリングされます:

  • プリセット — 11 個の Mermaid 組み込みテーマ(Default、Neutral、Forest、Dark、Base など)に加え、デザイナープリセット。それぞれミニプレビュー付き。
  • テーマ変数 — 検索機能付きで、グループごとに色、枠線、フォントを個別に調整。
  • 生成 — 1 つのシードカラーから、ライトまたはダークの完全なテーマを生成。

作業内容は自動保存されます

エディターはコード、テーマ、レイアウトをブラウザーのローカルストレージに保存します。タブを閉じて後で戻ってきても、ダイアグラムはそのまま残っています。サーバーにアップロードされるものはありません。

次のステップ