KubernetesのPodのmanifestを図示するツールを作った

これは何？

Kubernetesのマニフェストはすべてyamlで記載します。
慣れればyamlを見ただけで、どんなマニフェストかがすぐにわかるのですが、慣れないうちは何が何だかわかりません。
そこで、マニフェストを少しでも読みやすくするためのツールを作ってみました。

マニフェストの例

複雑なPodのmanifestとして https://kubernetes.io/docs/concepts/storage/volumes/#using-subpath で紹介されているsubpathの例を示します。

慣れた人が見るとコンテナが2つあり、ボリュームが1つ、それぞれのコンテナがマウントしているようだな、ということがわかります。
しかし、いきなりこのマニフェストを見せられると、面食らってしまう人もいるでしょう。

pod.yaml

apiVersion: v1
kind: Pod
metadata:
  name: my-lamp-site
spec:
    containers:
    - name: mysql
      image: mysql
      env:
      - name: MYSQL_ROOT_PASSWORD
        value: "rootpasswd"
      volumeMounts:
      - mountPath: /var/lib/mysql
        name: site-data
        subPath: mysql
    - name: php
      image: php:7.0-apache
      volumeMounts:
      - mountPath: /var/www/html
        name: site-data
        subPath: html
    volumes:
    - name: site-data
      persistentVolumeClaim:
        claimName: my-lamp-site-data

可視化の例

今回作成したツールで先ほどのマニフェストを可視化してみます。

どうでしょう？
2つコンテナがあり、ボリュームを共有していることが一目瞭然ではないでしょうか？
このように、マニフェストから図をパッと生成できるツールを作りました。

利用技術

すべてブラウザで上のJavaScriptで動作しています。

• mermaid.js
  • https://mermaidjs.github.io/
  • JavaScriptで書かれたフローチャートを書くためのDSLとその描画ライブラリ
• js-yaml
  • http://nodeca.github.io/js-yaml/
  • JavaScriptで書かれたyamlパーサ

あとはいい感じにyamlから要素を取り出してフローチャートを記述するだけです。
mermaid.jsのフローチャートを書くためのDSLで無理やりPodを図示しています。
initContainers, containers, volumesをmermaid.jsのsubgraphで表現し、その中の要素をフローチャートのタスクとして記述しています。
yamlではパッと理解しづらいVolumesとvolumeMountの関係を矢印で表現できるようにしました。

試してみたい！と思った方へ

https://inajob.github.io/pod-manifest-visualizer/ で公開しているのでいろいろ試してみてください！

まとめ

今回作成したPodの可視化ツールで、少しでもマニフェストが読みやすくなれば幸いです。
ソースコードも公開しているので、ぜひいろいろカスタマイズしてみてください。