동작 방식
하나의 다이어그램에 두 개의 층이 있습니다.
- Pele는 Mermaid를 파싱하고 다이어그램을 배치해서 SVG를 돌려줍니다. 이 과정은 모두 Pele의 몫이며, pele-animate는 배치, 크기, 문법을 건드리지 않습니다.
- pele-animate는 Pele가 그린 SVG를 읽어 요소가 나타날 순서를 계산하고, 움직임과 단계 재생, 아이콘을 더합니다. Mermaid 소스는 유효한 Mermaid 그대로이므로 GitHub나 Obsidian에서도 평범한 다이어그램으로 보입니다.
호출하는 함수
mount(el, prepare(src), { icons })는 Pele의 함수입니다. 글리프는icons옵션으로 전달하며, 자세한 내용은 아이콘에서 다룹니다.watch(el, src)는 pele-animate의 함수입니다. 컨테이너를 장면(클래스pa-scene)으로 표시하고, Pele가 그 안에 렌더링하는 SVG마다 애니메이션을 적용하며, 크기 변경으로 Pele가 다시 그리면 이를 다시 적용합니다. 인트로는 한 번 재생된 뒤에는 이런 재렌더링에서 건너뜁니다.animate(svg, { source })는 SVG 하나를 처리합니다. Pele로 직접 렌더링하면서watch()는 쓰고 싶지 않을 때 사용합니다.
세 가지 움직임
| 움직임 | 시점 | 설명 |
|---|---|---|
| 인트로 | 다이어그램이 30% 보일 때 한 번 | 노드가 단계별로 나타나고, 각 엣지가 출발점에서 그려지며, 레이블이 서서히 보입니다. 긴 다이어그램은 단계 간격을 줄여서 인트로가 3초 안팎에 끝나도록 합니다. |
| 토큰 | 다이어그램에 마우스를 올리거나 포커스를 맞춘 동안 | 작은 점이 엣지를 따라 차례로 이동합니다. |
| 단계 모드 | 클릭 또는 Enter | 같은 단계를 한 번에 하나씩 넘겨 봅니다. 단계 순서를 참고하시기 바랍니다. |
기본 상태는 언제나 완성된 그림이며, 모든 움직임은 prefers-reduced-motion을 따릅니다.
순서는 어디서 정해지는가
순서는 단계의 목록입니다. 플로차트의 단계는 기본적으로 아무 노드도 가리키지 않는 노드에서 시작하는 너비 우선 레벨이고, 시퀀스 다이어그램의 단계는 액터가 먼저, 그다음 메시지가 순서대로입니다. %% pa: 주석을 쓰면 이 기본값을 덮어씁니다. animate()가 실행된 뒤에는 svg.paSteps에 단계마다 하나씩 배열이 담기며, 단계 모드도 이 배열을 사용합니다.
Pele에 의존하는 부분
pele-animate는 Pele SVG의 클래스 이름(.pele-node, .pele-edge 등 몇 가지)과 data-id 속성을 기준으로 요소를 선택합니다. Pele를 피어 의존성으로 두었기 때문에 버전은 직접 관리하실 수 있습니다. 자세한 내용은 호환성을 참고하시기 바랍니다.