스스로 설명하는 Mermaid 다이어그램

Pele로 그린 Mermaid 다이어그램을 독자가 작성자가 정한 순서대로 한 단계씩 따라갈 수 있으며, 4,000여 개의 아이콘을 사용할 수 있습니다.

다이어그램을 클릭하거나 포커스를 맞추고 Enter 키를 누르면 단계별로 진행됩니다.

diagram.md

flowchart LR  %% pa: 1=M 2=M>O 3=O>I 4=I>R  M@{ icon: "file-code", form: "square", h: 88, label: "Mermaid 코드" }  O@{ icon: "list-numbers", form: "square", h: 88, label: "순서가 정해진 단계" }  I@{ icon: "palette", form: "square", h: 88, label: "아이콘이 있는 장면" }  R@{ icon: "player-play", form: "square", h: 88, label: "독자가 따라가며 읽기" }  M -->|순서 고정| O  O -->|아이콘 추가| I  I -->|클릭해서 진행| R

순서는 직접 정합니다

주석 한 줄, %% pa: 1=M 2=M>O 3=O>I 4=I>R로 단계를 고정합니다. 주석이 없으면 엣지의 순서를 따릅니다. 단계 순서

독자가 한 단계씩 따라갑니다

이전, 재생, 다음 버튼과 Space, 방향키를 지원하며, 완성된 그림이 기본 상태입니다. 동작 방식

아이콘은 넉넉하게

36개 카테고리에 선형 아이콘 4,368개가 있으며, 가져온 카테고리만 불러오고 선 두께도 조절할 수 있습니다. 아이콘

설치

npm i pele-animate pele
pnpm add pele-animate pele
yarn add pele-animate pele
bun add pele-animate pele

설치한 뒤에는 첫 다이어그램 그리기로 이어가시면 됩니다. 브라우저에서 실행되므로 Vite, Astro, SvelteKit, Nuxt, 일반 HTML에서 모두 쓸 수 있으며, 자세한 방법은 레시피를 참고하시기 바랍니다.

같은 다이어그램, 네 가지 방식

왼쪽에서 오른쪽으로 흐르는 3단계 다이어그램을 폭이 좁은 패널 네 곳에 그렸습니다. Mermaid는 레이아웃을 그대로 두고 축소하기 때문에 글자를 읽기 어려워집니다. Pele는 폭에 맞춰 레이아웃을 다시 계산하고, pele-animate는 여기에 단계 재생을 더합니다. 마지막 두 패널은 스스로 반복 재생되며, 클릭하면 단계별로 진행됩니다.

Mermaid.js 고정 레이아웃, 축소

Pele 폭에 맞춰 레이아웃 조정

pele-animate 자동 재생

pele-animate 자동 재생과 아이콘

어디에 쓰는가

	Mermaid 렌더링	레이아웃	단계 순서와 재생	아이콘
Mermaid.js	가능, 모든 다이어그램 유형	고정, 폭에 맞춰 축소하므로 글자도 작아짐	없음	내장 아이콘은 없으며, Iconify 같은 아이콘 팩을 직접 등록
Pele	가능, 가볍고 동기 방식	컨테이너 폭에 맞춰 조정	없음	동일: 내장 아이콘 없음, 직접 연결
pele-animate	Pele 사용	Pele와 동일하게 조정	있음	4,368개 내장, 직접 추가도 가능

pele-animate는 플로차트와 시퀀스 다이어그램을 지원하며, 레이아웃, 크기, 문법은 Pele를 그대로 따릅니다. 테마 패키지가 아니라 비공식 애드온입니다.

코딩 에이전트를 위해

패키지에는 프로젝트에 pele-animate를 연결하고 브라우저에서 결과를 확인하는 스킬이 들어 있으며, 모든 문서 페이지는 Markdown으로도 제공됩니다 (llms.txt, llms-full.txt). 자세한 내용은 코딩 에이전트용 가이드를 참고하시기 바랍니다.