DTPab

印刷やデザイン、アドビ製アプリやスクリプトなど、雑多な技術ブログ

GitHubとVSCodeでmermaid.js書式のグラフを表示させたい

mermaid.jsというめちゃくちゃ便利なライブラリがあります。特定の書式でテキストを記述すると様々なグラフに変換してくれるんですね。

Mermaid Live Editorというサイトもあって、ここで書いたグラフをPNGやSVGでダウンロードしたり、マークダウン用に画像として埋め込む文字列も生成できたりします。

このmermaid.jsが大好きなので、これをVSCodeのmarkdownプレビューさせたり、それをGitHubにpushしてGitHubでもプレビューさせたいと思ったので調べてみました。
結果的に拡張機能入れるだけだったのでその紹介でおしまいです。mermaid.jsの文法は前掲の公式見てください。

VSCodeでプレビュー

拡張機能入れるだけ。

marketplace.visualstudio.com

GitHub(のreadme.mdで)プレビュー

Chrome拡張があった。

chrome.google.com