🧜‍♀️

mermaidをお手軽画像変換

cimadai / しまだい / 嶋田大輔

2024/12/17に公開

こんにちは！株式会社コミュニティオのしまだい(@cimadai)です。

最近はmixi2を初めて昔を懐かしんだり、サンシャイン牧場が無いことを悲しんだりしています。

皆さん普段からフローチャートやシーケンス図をサクッと書くのにmermaidをよく使っていますよね？
僕もよく使っています。

ZennやNotionなど対応している環境ではそのままmermaidのコードを貼ればいいのですが、非対応ツールにペロッと貼り付けるときには画像にしたいときがあります。

そんな時にmermaid-cliがとっても便利なので小ネタではありますが紹介します。

mermaid-cliの使い方

こんな感じのシーケンス図を画像にしていきたいと思います。

sequenceDiagram
    participant 浦島太郎
    participant 子どもたち
    participant 亀
    participant 乙姫
    子どもたち->>亀: いじめる
    浦島太郎->>子どもたち: いじめを止める
    浦島太郎->>亀: 海へ返す
    亀->>乙姫: 顛末の報告
    乙姫->>浦島太郎: 竜宮城へ招待
    rect  rgb(191, 223, 255, .1)
    note right of 浦島太郎: ＠竜宮城
    浦島太郎->>浦島太郎: 亀に乗って竜宮城へ
    loop 竜宮城での生活
        乙姫->>浦島太郎: 豪勢な料理
        浦島太郎->>乙姫: 楽しい時間を過ごす
    end
    浦島太郎->>乙姫: 故郷へ帰りたい
    乙姫->>浦島太郎: 玉手箱を渡す
    浦島太郎->>浦島太郎: 亀に乗って地上へ
    end
    浦島太郎->>浦島太郎: 玉手箱を開ける
    Note right of 浦島太郎: 中には白い煙が
    浦島太郎-x浦島太郎: 鶴になる

まずはmermaid-cliをインストールします。

npm install -g @mermaid-js/mermaid-cli

そして、上のmermaidコードをsequence.mmdというファイルに保存して、以下のコマンドを実行します。

mmdc -i sequence.mmd -o sequence.png

以上！

サクっと画像に変換できました。

おわり

基本的にはmermaid対応の環境が多くなっているので特に困らないのですが、ちょっと画像で共有したい、というときにキャプチャしないでいいので気軽に使えるかなと思います。

コミュニティオテックブログPublication

株式会社コミュニティオのテックブログです！よろしくお願いします！

mermaid-cliの使い方

おわり

Discussion