空白のエディターから始める必要はありません。mermaid.design には既製のダイアグラムテンプレートのギャラリーが組み込まれています — 開いて、コードを調整して、自分のものにしましょう。
ギャラリーを開く
ナビゲーションバーの テンプレート をクリックすると、現在のレンダリングモード用のギャラリーが開きます:
/templates— 公式(SVG)エンジンとアクティブなテーマでレンダリングされたテンプレート/ascii/templates— 同じテンプレートを ASCII アートとしてレンダリング
各ギャラリーカードは現在のテーマでライブレンダリングされるため、見た目がそのままエディターに反映されます。
テンプレートを探す
ギャラリーには、フローチャート、シーケンス図、クラス図、ステート図、ER 図、ガントチャート、円グラフ、Git グラフ、マインドマップ、ユーザージャーニーなどが含まれています。
上部のフィルターチップでダイアグラムタイプ別にリストを絞り込めます。テンプレートが現在のレンダリングモードでサポートされていない場合(たとえば、一部のダイアグラムタイプはまだ ASCII でレンダリングできません)、自動的に非表示になり、何件のテンプレートが除外されたかを示す通知が表示されます。
テンプレートを適用する
- テンプレートカードをクリックします。
- 上書き確認ダイアログを確認します — テンプレートを適用すると、現在エディターにあるコードが置き換えられます。この操作は元に戻せません。
- テンプレートのコードが読み込まれ、レンダリングされた状態でエディターに戻ります。
ギャラリーからは、ナビゲーションバーの エディターへ をクリックすると、何も適用せずにエディターに戻れます。
ヒント
- まずテンプレートを適用してからテーマを切り替えると、テンプレートがテーマ変数を即座に反映します。
- テンプレートは Mermaid 構文を学ぶのに最適です。開いてコードを編集し、プレビューの変化を観察しましょう。