なぜ作ったか
私事ですが、この1月から新しいチームに配属され、様々なキャッチアップをしていく中で、Droneのstepを読み解くためにYAMLファイルと睨めっこするのが辛かったので、図示してみたところ思った以上にいい感じになったので、ツール化することにしました。
できたもの
こちらです↓
https://inajob.github.io/drone-steps-visualizer/
利用できそうな技術
昔作ったPod Manifest Visualizerを少し改造すればすぐに作れそう？ と思い思いっきり流用しています。
原理
.drone.ymlを読み込んで、stepsの子要素を調べnameとdepends_onを収集し、mermaid.js記法を生成し、レンダリングしています。
whenの条件をシリアライズしてsubgraphのタイトルにすることで、同じ条件で起動するstepをわかりやすくしています。
制限
-
pipeline間のdepends_onを図示できていません。(mermaid.jsはsubgraphに矢印をつけることができないため)
スクリーンショット
ブラウザで動作します。JavaScriptのみで動作しているので、サーバ側のロジックは不要です。
試しに図示してみる
世の中でDroneを使った有名なプロダクトが何か知らないので、適当に検索して探します。
oliver006/redis_exporter
わかりやすくなりました。
go-gitea/gitea
わかりやすくなりました。
grafana/grafana
限界もあります・・
まとめ
以前のKubernetesのPodの可視化でも感じましたが、mermaid.jsによるブラウザでの可視化ツール作成は、コスパの良い手法のように思います。
身近なグラフ構造のデータを突っ込んで色々と可視化してみると面白いと思います。