(Neo)vim で markdown を編集する際に便利なのが, markdown-preview.nvim です. リアルタイムで markdown を HTML に変換し,ブラウザでプレビューできるため, 技術ドキュメントの執筆やブログの下書きなどに重宝します.

ただし,このプラグインが内部で使用しているライブラリは, 必ずしも最新のものではありません.

例えば, Mermaid を使ってフローチャートやシーケンス図を描画できる機能がありますが, 2025 年 2 月 8 日時点での Mermaid の最新版は 11 であるのに対し, markdown-preview.nvim では 10 のままとなっています.

これにより,mermaid@11 で追加された新機能や拡張構文が利用できません.

そこで,markdown-preview.nvimMermaid を最新版に更新する方法について解説します.

Mermaid のバージョンを更新するには?

結論から言うと, markdown-preview.nvimMermaid の JavaScript コードは app/_static に格納されているようです.

この中に mermaid.min.js があるので,これを最新版に置き換えれば mermaid@11 が利用可能になります.

手動ビルドを試みるも失敗

Mermaid の最新版の JavaScript コードを得るために私が最初に試したのは, 公式リポジトリから Mermaid のソースコードを取得し, 手動でビルドする方法でした.

git clone https://github.com/mermaid-js/mermaid.git
cd mermaid
npm install .
npm run build

しかし,残念なことに npm install . の段階で以下のようなエラーが発生しました.

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: mermaid-monorepo@10.2.4
npm error Could not resolve dependency:
npm error peer cypress@"^4.5.0" from cypress-image-snapshot@4.0.1

どうやら依存関係の不整合によって npm のインストールが失敗しているようです. --force--legacy-peer-deps を試しましたが, 最終的にビルドは成功しませんでした...

なんか,npm でのインストールが一発でうまく行くことってないんですよね.私の場合. パソコン難しい.

解決策:CDN から mermaid.min.js を取得する

手動ビルドがうまくいかないので,別の方法として Mermaid の JavaScript コードを CDN から直接ダウンロードする 方法を選びました.

Mermaidオンラインで CDN を介して使用可能です. つまり,最新の mermaid.min.js を直接取得できるということです.

以下のコマンドで最新版をダウンロードできます.

wget https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js

ダウンロードした mermaid.min.jsapp/_static/mermaid.min.js に上書きすれば,markdown-preview.nvim で最新版の Mermaid を利用できるようになります.

恐らくこれが一番手っ取り早いでしょう.

もちろん私はセキュリティリスクとかの責任は全く負うつもりありませんので, 自己責任でお願いしますね. まぁ公式だし大丈夫と思いますが.

実際どうするか

markdown-preview.nvim に直接コミットしても良いですが, ここではより簡易に, リポジトリを fork してそれを使う方法を提示します.

Step 1. markdown-preview.nvim を Fork する. ご参考までに私が Fork したものは以下にあります: https://github.com/sano-jin/markdown-preview.nvim

Step 2. app/_static/mermaid.min.js を最新化する.

git clone git@github.com:your-github-username/markdown-preview.nvim.git
cd markdown-preview.nvim/app/_static/
wget https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js
git add --all && git commit -m updated && git push

Step 3. (Neo)vim のプラグインとして Fork 版の markdown-preview.nvim をインストール. 私は Lazy を使っているので, 以下のようになります.

{
    "your-github-username/markdown-preview.nvim",
    cmd = { "MarkdownPreviewToggle", "MarkdownPreview", "MarkdownPreviewStop" },
    ft = { "markdown" },
    build = function() vim.fn["mkdp#util#install"]() end,
}

おっと最後に……, (Neo)vim で Lazy を使ってパッケージを管理している場合は, :Lazy update を忘れずに.

:Lazy update

これにより,markdown-preview.nvim のキャッシュが更新され, 変更が反映されます.

まとめ

  • markdown-preview.nvimMermaid を最新版にするには, app/_static/mermaid.min.js を更新する必要がある.
  • Mermaid の最新化は, 恐らく CDN から mermaid.min.js を取得するのが一番手っ取り早い.
  • 本家にコミットしてももちろん良いと思うけど, Fork してしまうのが手っ取り早いかも.

「正しいやり方」ではまぁないと思いますが……, この方法を使えば,最新の Mermaid の機能を markdown-preview.nvim で活用できます. ぜひ試してみてください.