mermaid live editorをLAN内に立てる

0. はじめる前に

mermaid-live-editorの本家リポジトリに説明があるので、その通りに行えば、難なくサーバを立てることができます。ぜひ、そちらをはじめにご覧下さい。

1. はじめに

分かりやすい記述をテキストで書くだけで作図が可能なmermaid。vscodeにアドインを入れると簡単に編集し確認できます。しかし、pcにそういったアプリを入れてない同僚にmermaidソースを共有しするにはどうしたら良いでしょうか？例えば、変換後のSVGやPNGファイルを共有するのも1つです。しかし、その後の変更が簡単ではありません。
そこで、解決策の1つに、LAN内にmermaid live editorを立ち上げるという選択肢が挙がるのではないでしょうか。

2. 立ち上げ手順

立ち上げ方は、githubに書いてあります。その通りに行うだけです。
ここでは、そこに記載されてある内容を少しかみ砕いて記載したいと思います。

2.1. 準備するもの

社内に置くため、サーバ化できるマシンを準備します。OSはubuntuを想定しています。

• LANに接続されたubuntuサーバ等
• ファイアーウォールがあれば、ポート3000もしくは8000を開放
• （できれば）サーバは固定IPアドレス
• 仮想マシンでもok

2.2. dockerを利用

dockerの場合は一瞬で解決します。
サーバとなるマシンの端末から自分自身のIPアドレスを確認する次のコマンドを入力します。

ip add

出力結果からIPアドレスを確認しメモしましょう。後で利用します。

例えば、次のように表示されるうち、2: enp0s3で始まる部分の2行下に inet 192.168.1.3/24とあります。
192.168.1.3 がこのマシンのIPアドレスです。

1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
    link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
    inet 127.0.0.1/8 scope host lo
       valid_lft forever preferred_lft forever
    inet6 ::1/128 scope host 
       valid_lft forever preferred_lft forever
2: enp0s3: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000
    link/ether 08:00:12:30:60:02 brd ff:ff:ff:ff:ff:ff
    inet 192.168.1.3/24 brd 192.168.1.255 scope global enp0s3
       valid_lft forever preferred_lft forever
    inet6 fe80::a00:27ff:fe50:6108/64 scope link 
       valid_lft forever preferred_lft forever

次に、dockerのコマンドを打ち込み実行しましょう。

docker run --publish 8000:80 ghcr.io/mermaid-js/mermaid-live-editor

ここで、エラーが出る場合、エラーメッセージをよく読んで対処しましょう。例えば、仮想マシンがインターネットに接続できない状況とか、docker自体が入ってないなどです。

正常に起動すると、プログラムが走ったままになります。プロンプトは返ってきませんが、安心してください。

次に、クライアントとなるpcでwebブラウザを立ち上げます。
先ほどメモしたIPアドレスとその直後に:8000をブラウザのアドレス欄に入れます。

例

http://192.168.1.3:8000

少し時間はかかりますが、画面が出れば成功です。

停止する場合は、ctrl + c で止めます。(別ターミナルからkillコマンドでもよい）

参考： https://dev.classmethod.jp/articles/mermaid-live-editor/

2.3. ビルドして利用

自身でビルドしたものを使いたい場合もあるかと思います。
これについてもgithubに記載されていますのでその通りに実行するだけです。

次の流れになります。

• 準備
  • voltaをインストール（一般ユーザ権限でOK）
  • voltaでnodeをインストール
  • voltaでyarnをインストール
• ビルドと実行
  • gitでソースコードをクローン
  • yarnでビルド
  • 実行

2.3.1. ビルドの前準備

voltaをインストールするには、https://volta.sh/ に記載されているシェルスクリプトを実行します。いずれも一般ユーザで大丈夫です。

curl https://get.volta.sh | bash

その後、voltaでnodeとyarnをインストールします。

volta install node
volta install yarn

実行時に備えて、自身のIPアドレスをメモしておきます。

ip add

前節を参考にIPアドレスをメモしましょう。

2.3.2. ビルドと実行

はじめにソースコードを取得します。
適当にgithub用フォルダを作りましょう。例えば、mygitというフォルダを作ります。

mkdir mygit
cd mygit

本来は、 https://github.com/mermaid-js/mermaid-live-editor から取得すべきなのですが、私の場合はビルドでエラーが出てしまいました。
どうも最新版だと問題が起きるようで、過去のソースであれば、エラーが出ないようでした。
そこで、2年前にフォークしている方のを持ってきます。

git clone https://github.com/sidharthv96/mermaid-live-editor.git

フォルダに入ります。

cd mermaid-live-editor

ビルドを開始します。10分はかかると思った方が良いでしょう。

yarn install

そして、起動です。

yarn dev -- --open --host さっきメモしたIPアドレス

例

yarn dev -- --open --host 192.168.1.3

すると、次のような文字が表示されます。
network http://192.168.1.3:3000
このアドレスの通りに、PCのブラウザに入力します。

例

http://192.168.1.3:3000

少し時間はかかりますが、画面が出れば成功です。

停止する場合は、ctrl + c で止めます。（別ターミナルからkillコマンドでもよい）

3. おわりに

mermaid live editorを自分のサーバで立ち上げる方法を紹介しました。
セキュリティが気になる場合、こういった形でLAN内に構築するのも良いかもしれません。
なお、自分でビルドする場合は、古いものをビルドすると、画面が少々古いものになりますが、svgファイルなどに保存はできます。