Excalidraw로 블로그 다이어그램을 자동 생성하는 방법!
Excalidraw를 사용하여 블로그 게시물에 필요한 다이어그램을 손쉽게 관리하고, VSCode 확장 기능을 통해 SVG 자동 생성을 구현함.
GitHub Actions를 활용한 초기 접근 방식의 문제점을 해결하고, 로컬 환경에서 실시간 미리보기가 가능한 VSCode 확장 개발로 개선함.
다크/라이트 모드 지원에 대한 긍정적 평가와 함께, Excalidraw의 다이어그램 관리 편의성에 대한 다양한 의견이 제시됨.
Mermaid, Graphviz 등 다른 다이어그램 도구와의 비교 및 Excalidraw의 확장성에 대한 논의가 이루어짐.
GitHub Actions를 활용한 SVG 자동 생성 파이프라인
저자는 초기 블로그 게시물 작성을 위해 GitHub Actions를 사용하여 Excalidraw 다이어그램을 SVG로 자동 변환하는 파이프라인을 구축했다. 이 파이프라인은 변경된 Excalidraw 파일을 감지하고, `excalirender`를 사용하여 다크/라이트 모드 SVG를 생성하며, 생성된 파일을 Git에 커밋하는 방식으로 작동한다. 하지만, ARM 기반 Mac에서 Docker 이미지 실행 문제와 로컬 환경에서의 실시간 미리보기 불가라는 문제에 직면했다.
VSCode 확장 기능을 통한 로컬 환경 자동화
GitHub Actions의 문제점을 해결하기 위해 저자는 VSCode 확장 기능을 개발하여 Excalidraw 다이어그램의 자동 SVG 생성을 구현했다. 이 확장은 Excalidraw 파일 변경을 감지하고, 각 프레임을 `export_` 접두사로 시작하는 이름으로 지정하여 다크/라이트 모드 SVG를 생성한다. 이를 통해 로컬 환경에서 실시간으로 다이어그램을 확인하고, 개발 생산성(Developer Productivity)을 향상시켰다.
다이어그램 관리 및 유지보수 고려 사항
커뮤니티에서는 다이어그램의 유지보수(Maintenance)와 업데이트(Update)의 어려움에 대한 의견이 제시되었다. 특히, 다이어그램이 코드와 동기화되지 않아 발생하는 문제에 대한 우려가 제기되었다. 저자는 Excalidraw를 사용하면서 겪었던 다이어그램 변경의 불편함을 해결하기 위해 자동화 도구를 개발했으며, 이는 다이어그램 관리의 효율성을 높이는 데 기여했다.
다양한 다이어그램 도구 비교 및 활용
댓글에서는 Mermaid와 Graphviz와 같은 다른 다이어그램 도구와의 비교가 이루어졌다. Mermaid는 코드 기반 다이어그램 생성을 지원하여 버전 관리(Version Control) 및 자동화(Automation)에 유리하다는 장점이 있다. 반면, Excalidraw는 직관적인 인터페이스를 제공하여 시각적인 표현(Visual Representation)에 강점을 가진다. 또한, LLM을 활용하여 Mermaid 다이어그램을 생성하고 Excalidraw에서 편집하는 방식도 제시되었다.
