Show GN: pele-animate - Mermaid 다이어그램에 애니메이션과 아이콘을 추가해주는 오픈소스 라이브러리

기술 문서 사이트에서 많이 사용하는 Mermaid 다이어그램에 단계 별 애니메이션 재생과 아이콘 지원을 추가해주는 오픈소스 라이브러리입니다.

마크다운 노트 앱인 옵시디언의 CEO kapano가 기존 Mermaid의 단점을 개선하고자 새로 만들어 공개한 pele 라이브러리를 기반으로, 제가 필요한 추가 기능을 애드온 방식으로 구현했습니다.

[기존 Mermaid 다이어그램의 아쉬운 점]

• 가로로 긴 다이어그램의 경우, 모바일 기기와 같이 폭이 좁은 화면에서는 전체 다이어그램을 작게 축소해 내용을 읽기 어렵습니다.
• 다이어그램 구조가 복잡한 경우 어떤 순서로 진행되는 개념인지 이해하기 어렵습니다.
• 도형으로만 구성된 다이어그램보다 아이콘을 적용하면 더 직관적인 경우가 있습니다.

[kepano의 pele가 개선한 점]

• Mermaid 보다 가볍고 렌더링 시간을 줄였습니다.
• 적응형 레이아웃을 지원해 좁은 화면에서도 축소를 최소화하고 가독성을 높여줍니다.
• Mermaid가 제공하지 않는 줌인/아웃을 지원합니다.

[제가 pele-animate 애드온으로 추가한 기능]

• 다이어그램에 애니메이션을 적용하고 단계 별 재생과 자동 반복 재생 기능을 구현했습니다.
• 오픈소스 아이콘 라이브러리 Tabler Icons의 4천여개 아이콘을 카테고리 별 패키지로 추가했습니다.
• github과 npm에 올리고 상세 문서와 Playground 따라해보기를 제공하는 소개 웹사이트를 만들었습니다.

기존 Mermaid 소스를 수정하지 않아도, Mermaid 패키지를 pele와 pele-animate로 교체하기만 하면 pele의 기능과 기본적인 애니메이션 효과를 적용할 수 있습니다. 애니메이션 순서의 상세 설정이 필요하거나 아이콘을 적용하려면 약간의 코드 수정으로 처리할 수 있습니다.

코딩 에이전트를 위한 가이드 문서와 스킬을 제공해서 기존 기술 문서 사이트에 쉽게 적용할 수 있습니다. 재직 중인 회사의 문서 사이트에 활용하고 있습니다.