ライブラリの実行結果をREADMEに貼り付けるにあたり、png等の貼り付けだと画質が微妙になりがちです。
そこでsvgで出力できるツールを調べてみて、ほしいものが見つからなかったのでさくっと作ってみました。
概要
こんな感じで、背景・ウインドウ枠付きの綺麗なSVGが生成できます。（コマンドにはoh-my-logoを使わさせていただきました）
動画も吐き出せます。
従来の方法/問題点
コンソール出力をSVGに変換する方法としては、asciinemaとsvg-termを組み合わせる方法が一般的です。
svg-term --out demo.svg --width 80 --height 24 --no-cursor --command "(command)"しかし、個人的に
asciinemaとsvg-term(npm/node)の依存があるのが面倒asciinemaはWSLでしか動かない(Windowsで手軽に生成できない)dotnet tool installで導入したい- コンソールの出力をそのまま使いたいことは少なく、適切に切り取りたい
- コマンドが長い！
という点がちょっと気にいりませんでした。そこで自作してみました（AIが99%ぐらいやりました）。
作ったツール
その名もconsole2svgです。
npmまたはdotnet toolで手軽にインストールできます。
# npm
npm install -g console2svg
# dotnet
dotnet tool install -g ConsoleToSvg静的バイナリも配布しているので、そちらをダウンロードして使うこともできます。
使い方
以下のように--の後ろにコマンドを指定するだけです。
console2svg -- dotnetそのまま実行すると幅80、高さ24のSVGが生成されます。変更したいときは-wと-hで指定します。
また、よくあるmac風のwindowをつけることもできます。
console2svg -w 120 -h 16 -d macos -- dotnet
出力が長い場合、そのうちの一部を切り取って使いたいこともあるかと思います。その場合、crop-top/crop-bottomオプションで切り取りを指定できます。指定方法もいくつかあり、ch(行数or文字), px(ピクセル), テキスト指定(指定したテキストが出てくるまで)から選べます。
例えばdotnet --infoの出力は非常に長いので、HostおよびSDKsの情報だけ切り取ってみます。
この際、sdkの情報をピンポイントで切り取るのは難しいので、その下にいる.NET runtimes installedの行を基準にして、そこから2行上に切り取ることにします。
console2svg -w 60 -h 16 --window macos --crop-top "Host" --crop-bottom ".NET runtimes installed:-2" -- dotnet --info
--backgroundオプションで背景色をグラデーションにしたり、画像を指定することもできます。
# グラデーション
console2svg -w 100 -h 10 -c -d macos-pc --background "#004060" "#0080c0" --opacity 0.8 -o ./assets/cmd-bg2.svg -- dotnet --version
# 画像
console2svg -w 100 -h 10 -c -d macos-pc --background ./assets/bg.png --opacity 0.8 -o ./assets/cmd-bg3.svg -- dotnet --version
何が嬉しいのか
- SVGなので拡大してもきれい！
- 背景やウインドウ枠をつけることで、見栄えが良くなる(そのままドキュメントサイト等に使える！)
- 動画も吐き出せるので、動いている様子も見せられる(マニュアルに最適！)
- 全てコマンドで完結するので、CI等に組み込んで自動生成できる！
といったメリットがあります。
とくにドキュメント等の画像だと、現物のソースコードと画像とで乖離しがち（それでいて差異があると不親切！）なので、CIで自動生成できるのは便利だと思います。
感想
1日でできました。AIすごい。最近人間の存在価値をよく考えるようになってきました
自分用のツールですが、比較的汎用的に使えるように作ったつもりなので、もし興味があれば使ってみてください！
もし気に入ったならstarをお願いします！