macOSでmermaid.jsを使えるようにする

インストール

ターミナルで次を実行してインストールします。

$ brew install yarn
$ yarn global add mermaid
$ yarn global add mermaid.cli

これでインストール完了。以下のようなヘルプを確認してみましょう。

$ mmdc --help
Usage: mmdc [options]

Options:
  -V, --version                                   output the version number
  -t, --theme [theme]                             Theme of the chart, could be default, forest, dark or neutral. Optional. Default: default (default: "default")
  -w, --width [width]                             Width of the page. Optional. Default: 800 (default: "800")
  -H, --height [height]                           Height of the page. Optional. Default: 600 (default: "600")
  -i, --input <input>                             Input mermaid file. Required.
  -o, --output [output]                           Output file. It should be either svg, png or pdf. Optional. Default: input + ".svg"
  -b, --backgroundColor [backgroundColor]         Background color. Example: transparent, red, '#F0F0F0'. Optional. Default: white
  -c, --configFile [configFile]                   JSON configuration file for mermaid. Optional
  -C, --cssFile [cssFile]                         CSS file for the page. Optional
  -p --puppeteerConfigFile [puppeteerConfigFile]  JSON configuration file for puppeteer. Optional
  -h, --help                                      output usage information

VSCodeで図を書いてみる

エディターとしてVSCodeを使っているのでVSCodeでどうやって図を作成するのか簡単にメモしておきます。（mac, VSCode使っていない人すみません）

Mermaid Previewという拡張機能をインストールしておきます。これで図を横に表示させながらファイルを作成することができます。（Mermaid Markdown Syntax Highlightingという拡張機能も入れてシンタックスハイライトさせたかったのですが、Mermaid Previewが有効になっていると機能しないみたいです？）

例として次のファイルtest.mmdを作成して保存します。拡張子は.mermaidでもOKらしい。

VSCodeでcommand + shift + Pでコマンドパレットを開き、mermaidなどと検索して> Preview Mermaidを選択すると、画面右にプレビューが表示されます。

エクスポート

保存したtest.mmdをPNGにエクスポートしてみます。ターミナルに戻って

$ mmdc --input test.mmd --output test.png --backgroundColor transparent

などと実行すれば、背景が透過されたtest.pngを出力できます。コマンドのオプションなどは$ mmdc --helpで参照してみてください。テーマなども変更できるらしいです。出力できたPNGがこちら。