Ascreit Mermaid Markdown Preview
VS Code / Cursor の標準Markdown Previewで、MermaidをGitHubに近い見た目で表示するための拡張です。
Install from Marketplace
Markdownファイルを普通に開き、エディタ右上の Preview ボタンまたは標準コマンド Markdown: Open Preview を実行すると、この拡張が標準プレビューへCSSとスクリプトを追加します。
できること
- Mermaid code block を標準Markdown Preview内でGitHub風に表示
- 大きなMermaid図をプレビュー幅に収めて表示
- 図の右上ボタンから拡大モーダルを開き、ズーム、スクロール、Macトラックパッドのピンチ操作で確認
- MarkdownソースとPreviewをエディタ右上の
Preview / Markdown ボタンで切り替え
使い方
- Markdownファイルを開く
- エディタ右上の
Preview ボタンを押す
- Mermaid図を大きく見たい場合は、図の右上にある拡大ボタンを押す
プレビューから元のMarkdownへ戻る場合は、プレビュータブ右上の Markdown ボタンを押します。
コマンドパレットから開く場合は、以下でも同じです。
Markdown: Open Preview
Markdown: Open Preview to the Side
Mermaidは、通常のMarkdownと同じように fenced code block で書きます。
```mermaid
flowchart TD
A[開始] --> B[処理]
B --> C[終了]
```
インストール
Marketplaceからインストールできます。
Install from Marketplace
コマンドパレットからインストールする場合は、Extensions: Install Extensions を開いて以下を検索してください。
Ascreit Mermaid Markdown Preview
拡張IDで検索する場合は以下です。
ascreit.vscode-github-markdown-preview
| |
