Emacs上でUMLの編集は、plantuml-modeを使用していた。
しかし、plantuml-modeの編集中のインデントが芳しくなく、代替を検討。
最近はやりのmermaidをmermaid-modeで使用してみることにした。
Ubuntu 24.04LTSのEamcsにmermaid-modeを設定する中で、graph化にTipsが必要になったので、それをメモとして残す。
ソフトウェア
-
mermaid-mode
Emacs上でのmermaidの編集モードをサポート。
MELPAからインストールする。
デフォルトで以下の設定が有効となるため、追加設定は不要。-
モード関連付けの拡張子
.mmd -
キーマップ
;; C-c C-c to compile to an image ;; C-c C-f to compile file to an image ;; C-c C-r to compile region to an image ;; C-c C-b to compile buffer to an image ;; C-c C-o to open in the live editor ;; C-c C-d to open the official doc
-
-
mermaid-cli
Emacsからmermaidのgraphが参照可能となる。
Tips
Tips#1
mermaid-cliを使用するには、nodejsのパッケージが必要。
そして、mermaid-cliが要求するnodejsのバージョンは、18.19または、20.0以上。
Ubuntu 24.04LTSのnodejsは18.19.1でありサポート範囲。
-
Ubuntuのバージョンの確認
taku@inaho:~$ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 24.04.3 LTS Release: 24.04 Codename: noble taku@inaho:~$ -
Uubuntuが配布しているnodejsのバージョン情報
taku@inaho:~$ apt-cache show nodejs | head Package: nodejs Architecture: amd64 Version: 18.19.1+dfsg-6ubuntu5 Multi-Arch: allowed Priority: extra Section: universe/web Origin: Ubuntu Maintainer: Ubuntu Developers <ubuntu-devel-discuss@lists.ubuntu.com> Original-Maintainer: Debian Javascript Maintainers <pkg-javascript-devel@alioth-lists.debian.net> Bugs: https://bugs.launchpad.net/ubuntu/+filebug taku@inaho:~$
ただし、nodejs視点で見ると、18.19はEOL。
そこで、nodejsを最新化するために、nodejs環境の管理ツールnodenvをインストールする。
その後、 nodenv install -l で表示されるバージョンから適切なものを選択して新しめのnodejsをインストールする。
nodenvのインストールの詳細は、nodenvを参照されたい。
Tips#2
mermaid-modeからのmermaidのgraph化には、mermaid-cliが提供するmmdcコマンドへのパスが通っている必要がある。
nodenv下でmermaid-cliをインストールした場合に、 mmdcコマンドがPATH上から見えない(which mmdc がエラーとなる)時は、 nodenv rehash を実行してnodenvのshimsを更新する。
Tips#3
Emacsでmermaidのgraph化しようとすると、chromeのセキュリティにより以下のエラーが発生する。
Generating single mermaid chart
Error: Failed to launch the browser process!
[1026/132002.040771:FATAL:zygote_host_impl_linux.cc(128)] No usable sandbox! If you are running on Ubuntu 23.10+ or another Linux distro that has disabled unprivileged user namespaces with AppArmor, see https://chromium.googlesource.com/chromium/src/+/main/docs/security/apparmor-userns-restrictions.md. Otherwise see https://chromium.googlesource.com/chromium/src/+/main/docs/linux/suid_sandbox_development.md for more information on developing with the (older) SUID sandbox. If you want to live dangerously and need an immediate workaround, you can try using --no-sandbox.
この問題は、mermaid-cliのKnownIssue#1で対処方法が掲載されている。
ただ、この対象方法は mmdc コマンドのperpeteer用の外部設定ファイルによる回避方法となる。Emacsの場合は、mermaid-modeの内部から実行する mmdc コマンドへの適用する必要があり、mermaid-modeのelispの改造が必要となる。
私自身、elispの知見が浅いため、今回はmermaid-modeのelispの改造ではなく、mermaid本体のperpeteerのデフォルト設定を変更することにした。
-
修正ファイル
.nodenv/versions/$(nodenv version | awk '{print $1}')/lib/node_modules/@mermaid-js/mermaid-cli/src/index.js -
修正内容
Index: node_modules/@mermaid-js/mermaid-cli/src/index.js =================================================================== --- node_modules.orig/@mermaid-js/mermaid-cli/src/index.js +++ node_modules/@mermaid-js/mermaid-cli/src/index.js @@ -195,7 +195,8 @@ async function cli () { * but still works. In Puppeteer v22, it uses the `chrome-headless-shell` package, * which is much faster than the regular headless mode. */ - headless: 'shell' + headless: 'shell', + args: ["--no-sandbox"] }) if (puppeteerConfigFile) { checkConfigFile(puppeteerConfigFile)