Drone.IO의 step를 시각화하고 쉽게 이해할 수 있는 도구를 만들었습니다.

왜 그랬어
사적인 일이지만 올해 1월부터 새로운 팀으로 배치돼 다양한 포착 과정에서 드린의 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
한계도 있어요.

총결산
예전Kubbernetes Pod의 시각화에도 느꼈어요,mermaid.js를 통해 브라우저에서 시각화 도구를 만드는 것은 성가가 매우 높은 방법이라고 생각합니다.
주변의 도표 구조의 데이터를 각양각색의 가시화 속에 깊이 파고들면 나는 매우 재미있다고 생각한다.