# 동작 방식

하나의 다이어그램에 두 개의 층이 있습니다.

1. **Pele**는 Mermaid를 파싱하고 다이어그램을 배치해서 SVG를 돌려줍니다. 이 과정은 모두 Pele의 몫이며, pele-animate는 배치, 크기, 문법을 건드리지 않습니다.
2. **pele-animate**는 Pele가 그린 SVG를 읽어 요소가 나타날 순서를 계산하고, 움직임과 단계 재생, 아이콘을 더합니다. Mermaid 소스는 유효한 Mermaid 그대로이므로 GitHub나 Obsidian에서도 평범한 다이어그램으로 보입니다.

## 호출하는 함수

- `mount(el, prepare(src), { icons })`는 Pele의 함수입니다. 글리프는 `icons` 옵션으로 전달하며, 자세한 내용은 [아이콘](./icons.md)에서 다룹니다.
- `watch(el, src)`는 pele-animate의 함수입니다. 컨테이너를 장면(클래스 `pa-scene`)으로 표시하고, Pele가 그 안에 렌더링하는 SVG마다 애니메이션을 적용하며, 크기 변경으로 Pele가 다시 그리면 이를 다시 적용합니다. 인트로는 한 번 재생된 뒤에는 이런 재렌더링에서 건너뜁니다.
- `animate(svg, { source })`는 SVG 하나를 처리합니다. Pele로 직접 렌더링하면서 `watch()`는 쓰고 싶지 않을 때 사용합니다.

## 세 가지 움직임

| 움직임 | 시점 | 설명 |
|---|---|---|
| **인트로** | 다이어그램이 30% 보일 때 한 번 | 노드가 단계별로 나타나고, 각 엣지가 출발점에서 그려지며, 레이블이 서서히 보입니다. 긴 다이어그램은 단계 간격을 줄여서 인트로가 3초 안팎에 끝나도록 합니다. |
| **토큰** | 다이어그램에 마우스를 올리거나 포커스를 맞춘 동안 | 작은 점이 엣지를 따라 차례로 이동합니다. |
| **단계 모드** | 클릭 또는 Enter | 같은 단계를 한 번에 하나씩 넘겨 봅니다. [단계 순서](./step-order.md)를 참고하시기 바랍니다. |

기본 상태는 언제나 완성된 그림이며, 모든 움직임은 `prefers-reduced-motion`을 따릅니다.

## 순서는 어디서 정해지는가

순서는 **단계**의 목록입니다. 플로차트의 단계는 기본적으로 아무 노드도 가리키지 않는 노드에서 시작하는 너비 우선 레벨이고, 시퀀스 다이어그램의 단계는 액터가 먼저, 그다음 메시지가 순서대로입니다. `%% pa:` 주석을 쓰면 이 기본값을 덮어씁니다. `animate()`가 실행된 뒤에는 `svg.paSteps`에 단계마다 하나씩 배열이 담기며, 단계 모드도 이 배열을 사용합니다.

## Pele에 의존하는 부분

pele-animate는 Pele SVG의 클래스 이름(`.pele-node`, `.pele-edge` 등 몇 가지)과 `data-id` 속성을 기준으로 요소를 선택합니다. Pele를 피어 의존성으로 두었기 때문에 버전은 직접 관리하실 수 있습니다. 자세한 내용은 [호환성](./compatibility.md)을 참고하시기 바랍니다.