Mermaid

Mermaid の図（フローチャート、シーケンス、クラス、状態、ガント…）を、フレームワーク非依存の Web Component として描画します。<r-mermaid> は最初の描画時に mermaid ライブラリを遅延読み込みし（使わないアプリは何も負担しません）、図を自分の shadow root に描くので、ページのスタイルから隔離されます。

使いどころ：mermaid の配線を自分でせずに、テキストから起こした図をどのページにも置きたいとき。必要ならコピー／ダウンロード／全画面のツールバーと、パン・ズームのビューアも付きます。

クイックスタート

graph LR; A[Request] --> B[Validate]; B --> C[Store]; C --> D[Respond]

<r-mermaid>graph LR; A[Request] --> B[Validate]; B --> C[Store]</r-mermaid>

import 'ranui'; // あるいは単体のエントリー：
import 'ranui/mermaid';

図のソースは要素のテキスト内容から読まれます。あるいは URI エンコードされた code 属性からでも読めます（構文に < が含まれるとき、たとえば classDiagram の <|-- は HTML の解析を生き延びさせるため code を使ってください）。

el.code = 'classDiagram\n  Dog --|> Animal'; // プロパティのセッターが URI エンコードします

コントロール

どのコントロールも真偽値の属性によるオプトインです。属性のない <r-mermaid> はすっきりした静的な図になります。ツールバーはホバー時に右上へ現れます。

graph TD; A[Start] --> B[Do work]; B --> C[End]

<r-mermaid copy download fullscreen>graph TD; A --> B; B --> C</r-mermaid>

copy：図のソースをクリップボードへコピーします。
download：SVG / PNG / ソース（.mmd）。形式が一つならそのままダウンロードし、複数ならメニューを出します。download="svg" や download="svg png" で絞れます。
fullscreen：ヘッダーのないライトボックス（r-modal）を開き、パンとズームができます（ホイールでズーム、ドラッグでパン、リセットあり）。閉じるのは ✕、背景のクリック、または Esc です。

API リファレンス

属性

属性	型	既定値	説明
`code`	`string`（URI エンコード）	—	図のソース。無いときは要素のテキスト内容にフォールバックします。
`theme`	`'auto' \| 'light' \| 'dark'`	`'auto'`	mermaid のテーマ。`auto` はページ（`.dark` / `[data-ran-theme]`）に追従し、切り替え時に再描画します。
`copy`	boolean	off	ソースをコピーするボタンを表示します。
`download`	boolean / `"svg png source"`	off	ダウンロードボタンを表示します。値で提供する形式を絞れます。
`fullscreen`	boolean	off	全画面ボタンを表示します。
`sheet`	`string`	—	shadow root に注入する追加の CSS。
`label-*`	`string`	英語	コントロールのラベルを上書き：`label-copy`、`label-download`、`label-fullscreen`、`label-zoom-in`、`label-zoom-out`、`label-reset`、`label-diagram`（全画面ダイアログの名前）。

イベント

すべてのイベントはバブリングし、shadow の境界を越えます（composed）。

イベント	`detail`	発生するとき
`render`	`{ ok: true }`	図の描画が終わった
`copied`	`{ kind: 'source' }`	ソースがコピーされた
`download`	`{ format: 'svg' \| 'png' \| 'source' }`	ファイルがダウンロードされた
`error`	`{ message: string }`	図の解析／描画に失敗した
`fullscreenchange`	`{ open: boolean }`	全画面のライトボックスが開閉した

CSS Part

Part	説明
`mermaid`	外側のラッパー。
`diagram`	描画された図のコンテナ。
`toolbar`	ホバーで出るコントロールバー。
`button`	ツールバーの各アイコンボタン。
`error`	エラーメッセージの箱（描画失敗時）。

r-mermaid::part(toolbar) {
  background: var(--surface);
}

要素の上で上書きします（それぞれセマンティックトークン、さらにリテラルへとフォールバックします）： --ran-mermaid-padding、--ran-mermaid-toolbar-background、--ran-mermaid-toolbar-gap、 --ran-mermaid-button-size、--ran-mermaid-button-color、--ran-mermaid-button-hover-background、 --ran-mermaid-error-color。

メモ

遅延読み込み：mermaid（および全画面に使う r-modal）は動的インポートなので、図が描画される／全画面が開かれるときにだけ、別の非同期チャンクとして届きます。
描画の忠実さ：<r-mermaid> は mermaid 自身のレンダーを使うので、すべての図の種類とテーマに対応します。
PNG の書き出し：HTML ラベル（mermaid の htmlLabels）を使う図は <foreignObject> 経由で描画されます。これは canvas を汚染して PNG の書き出しを失敗させることがあり、その場合は error イベントが派発されます。SVG とソースの書き出しは常に動きます。