monolithic kernel

mermaid-rs-renderer でブラウザ依存なしで Mermaid をレンダリングする

mermaid-rs-renderder (mmdr) という Rust で書かれたスタンドアロンの Mermaid のレンダラーを使うことで、ブラウザ依存なしで Mermaid の図をレンダリングできる。Mermaid の公式の実装では Puppeteer や Playwright が必須で、静的サイトの構築やサーバサイドレンダリングにおいては実行環境の構築に躓きやすくなるため、ブラウザ依存がなくなるのはうれしい。

mmdr は Rust で書かれているので、Rust のアプリケーションであればライブラリとして組み込むこともできるが、そうでない場合は CLI のコマンドで使うことになる。

このブログに組み込んでいる Mermaid のレンダリング機能の場合は、以下のようなコードで mermaid-cli から簡単に置き換えられた。

Mermaid.astro
import * as child_process from "node:child_process"


const renderSVG = async (mermaidContent: string): Promise<string> => {
  return await new Promise<string>((resolve, reject) => {
    const child = child_process.execFile("mmdr", ["-e", "svg"], (error, stdout) => {
      if (error != null) {
        reject(new Error("Failed to render mermaid diagram", { cause: error }))
      } else {
        resolve(stdout)
      }
    })
    const stdin = child.stdin
    if (stdin == null) {
      reject(new Error("Failed to write to mmdr process"))
      return
    }
    stdin.write(mermaidContent)
    stdin.end()
  })
}


// ...

mmdr のインストールには mise を用いている。

mise.toml
[tools]
"github:1jehuang/mermaid-rs-renderer" = "0.2.0"

これも結構実行環境を選ぶ要素になってしまう気はしつつ、自分の場合は GitHub Actions なのでまあいいかなと。npm にパッケージがあるとうれしい。

npm にパッケージがあってブラウザ不要という意味だと、beautiful-mermaid がよさそうかもとも思った。ただ、こちらは文法の互換性がそこまで高くないようで、図を修正しないとエラーになってしまったので、今回は mmdr を選んだ。

Related articles