markdownファイルやmmdファイルのmermaid形式の記述をsvgファイルとして生成するactionsを作った
githubのコメントやmdファイルにmermaid形式で記述するとレンダリングされて表示されるが、Architecture Diagramsにcustom iconsを適用したいとき、アイコンがレンダリングされない（?として表示される）問題があった
そのため、iconを読み込んでレンダリングしたファイルとして保持しておきたかった
要するに↓を
https://github.com/uni-3/render-mermaid-svg/blob/main/examples/test.md
↓にしたかった
https://github.com/uni-3/render-mermaid-svg/blob/main/examples/generated/test-1.svg
リポジトリ
こちら
claude codeとactionsの形式を考えて、googleのcoding agentのjulesに実装してもらった
元々は以下記事にてつくったworkflowで用は足せるが、いろいろなリポジトリに設置したくなったとき、長めのスクリプトかくのが面倒だったのでactionsに切り出した
https://blog.uni-3.app/mermaid-cli-render-architecture/
使い方などはリポジトリにあるので割愛、なんとなく概要を説明してみる
input変数
- 入力ファイル群、
input-filesはtj-actions/changed-files@v45で出力されるものを対象にするようにしておいた - 出力先は、デフォルトはmdファイルと同フォルダ内の
generated以下にsvgファイルが生成される。この規則であれば生成されたファイルの上書きが起きづらいと思われる。出力先をどうしても一箇所にまとめたければoutput-dir指定することで有効になる。この辺は一考の余地がありそう - iconPacks指定するのが個人的にメインなので、mmdcコマンドのなかでこれだけ設定できる
最初はmmdcコマンド実行できるものにしようと思ったが、argsとしてoption引数を複数受け取れる、などとするとセキュリティ的に危ないのと、とりあえず自動で生成してコミットするまでさせたかったので余計な機能はなるべく避けるようにした
一応mermaid形式のdiagramは何でもレンダリングできるのでflowchartなんかも生成できる
参考
- 似ている既存のactions
iconPacks未対応なので利用は見送った。構成をおおいに参考にした。感謝