Mermaid ローカルプレビュー

VS Code 上で Mermaid ダイアグラムを完全ローカルでプレビューする拡張機能です。ダイアグラムのソースやレンダリング結果が外部サーバーへ送信されることはありません。

主な機能

• .mmd、.mermaid ファイルのリアルタイムプレビュー
• Markdown 内でカーソルが置かれている、またはカーソルに最も近い mermaid コードブロックのプレビュー
• 選択範囲のみのプレビュー
• 複数の Mermaid コードブロックを含む Markdown で、現在の図番号をタイトルに表示
• VS Code テーマへの自動追従、およびライト／ダークテーマの固定
• 編集中に構文エラーが発生した場合、最後に正常にレンダリングされた図を保持
• 通常プレビューでのドラッグ移動、ウィンドウに合わせる表示、実際のサイズ表示、Ctrl/Cmd + ホイールによるズーム
• 全画面プレビューでのドラッグ移動、キーボードズーム、フォーカス管理
• SVG、および 1～4 倍の PNG エクスポート
• テーマに応じた PNG 背景色、透過背景、任意の背景色
• Mermaid ランタイムを拡張機能に同梱し、テレメトリやデータ収集を行わないローカル動作

使い方

1. .mmd、.mermaid、または Mermaid コードブロックを含む Markdown ファイルを開きます。
2. Mermaid: プレビューを横に開く コマンドを実行するか、エディタータイトルのプレビューボタンを選択します。
3. 次のキーボードショートカットも利用できます。
   • macOS：Cmd+K V
   • Windows / Linux：Ctrl+K V

Markdown の例：

```mermaid
flowchart TD
    A[開始] --> B{続行しますか？}
    B -->|はい| C[処理を実行]
    B -->|いいえ| D[終了]
```

ドキュメント内に複数の Mermaid コードブロックがある場合は、プレビューしたいコードブロック内へカーソルを移動してください。カーソルがコードブロック外にある場合は、最も近いコードブロックが選択されます。

設定

ローカルインストール

Releases から .vsix をダウンロードし、次のコマンドを実行します。

code --install-extension mermaid-0.1.3.vsix

VS Code の拡張機能画面にある「…」メニューから「VSIX からのインストール...」を選択することもできます。

開発

npm install
npm run compile
npm test
npx vsce package

F5 キーを押すと Extension Development Host が起動し、拡張機能をデバッグできます。

セキュリティとプライバシー

• Mermaid JavaScript は拡張機能のインストールディレクトリから読み込まれます。
• Webview には Content Security Policy と制限されたローカルリソースディレクトリを設定しています。
• Mermaid は securityLevel: strict で動作します。
• Webview から拡張機能プロセスへ送信されるメッセージは、型とサイズを検証します。
• ネットワークリクエスト、テレメトリ、データ収集処理は含まれていません。

現在の制限事項

• 同時に保持できるプレビューパネルは 1 つです。
• PDF、WebP、JPEG のエクスポートには対応していません。
• Mermaid の構文エラーには関連する行番号を表示できますが、エラーからソース行へのジャンプには対応していません。
• 日本語 UI を標準としています。言語切り替え用の VS Code ローカライズリソースは未実装です。
• 外部画像やブラウザーで安全に変換できない HTML ラベルを含む一部の図は、PNG にエクスポートできません。

リンク

• GitHub リポジトリ
• 不具合・機能要望

ライセンス

MIT