블로그 다이어그램 렌더러를 Pele로 바꾸기.

시발점#

이제 막 블로그를 꾸미고 있다. Firefly 템플릿을 적용하고 설정과 코드를 하나씩 살펴보다가, 글에 Mermaid 다이어그램을 넣을 수 있다는 걸 발견했다.

그러자 전에 옵시디언 쪽에서 봤던 Pele가 떠올랐다.

아직 글도 별로 없는데 렌더러부터 바꿀 필요가 있나 싶었지만, 블로그를 손보는 김에 붙여보고 싶었다.

처음에는 Mermaid.js를 교체하면 될 줄 알았다. 그런데 코드를 열어보니 이 블로그 템플릿은 이미 Merman으로 빌드할 때 SVG를 만들고 있었다.

이미 충분히 빠르겠지만, 그냥 생각한 거 바꾸기로 했다.

Pele는 무엇인가#

Pele는 Mermaid 문법을 읽어 SVG를 만드는 렌더러다.

이름은 화산과 불의 여신 펠레에서 따왔다고 한다. 맨 처음 봤을 때, 화산 같기도 사람의 옆모습 같기도 했던 아이콘이 정말 이중적 의미를 담고 있었을 줄은 몰랐다.

아이콘 이쁘지 않나. 되게 잘 만든 아이콘 같은데.

공식 홈페이지는 Pele의 장점을 다음과 같이 소개한다. 아래 수치는 Pele에서 주장하는 Pele와 Mermaid.js의 공식 비교다.

공식 소개의 표현으로는 최대 500배 빠르다고 한다.

뭐 자기네들 기술이 제일 좋다고 하겠으니 저렇게 극단적인 수치가 아닐 수도 있지만, 빠른 건 확실하겠지.

Astro에 Pele 연결하기#

블로그 템플릿에서 제공하는 기존 구조를 유지하면서 다이어그램을 만드는 부분만 바꿨다.

적용한 Pele 버전은 1.8.0이다.

먼저 Pele 자체의 사용법은 짧다. render()에 Mermaid 문법을 전달하면 SVG 문자열을 받을 수 있다. 다음 코드는 Pele가 설치된 프로젝트에서 .mjs 파일로 실행할 수 있다.

1
import { render } from "pele";
2

3
const source = `flowchart LR
4
    A[가] --> B[나] --> C[다]`;
5

6
const { svg } = render(source, {
7
  idPrefix: "example-0",
8
  fontFamily: "system-ui, sans-serif",
9
  autoDirection: false,
10
});
11

12
console.log(svg);

1
import { visit } from "unist-util-visit";
2

3
export function remarkPele() {
4
  return (tree) => {
5
    visit(tree, "code", (node) => {
6
      if (node.lang === "mermaid") {
7
        const code = node.value;
8
        node.type = "pele";
9
        node.data = {
10
          hName: "div",
11
          hProperties: {
12
            className: ["pele-source"],
13
            "data-pele-code": code,
14
          },
15
          hChildren: [{ type: "text", value: code }],
16
        };
17
        node.value = undefined;
18
      }
19
    });
20
  };
21
}

1
const { svg } = render(source, {
2
  idPrefix: `pele-${diagramIndex++}`,
3
  ...options,
4
});
5

6
node.children = [
7
  h(
8
    "div",
9
    { class: `${DIAGRAM_WRAPPER} ${PELE_WRAPPER}` },
10
    fromHtml(svg, { fragment: true }).children,
11
  ),
12
];

가장 마음에 든 변화#

바꾸고 보니 의미없는 변경은 아니었다.

무려 css로 색상을 관리할 수 있게 됐다.

…

사실 theme 기능을 merman에서도 지원은 하고 있었다. 그게 조금 귀찮게 생겼을 뿐이지.

아무튼 좋은게 좋은 거니까.

배경과 노드 색상은 블로그가 이미 쓰는 변수에 연결해서 통일성을 유지하기 쉬워졌다.

꼭 바꿔야 했을까#

사실 꼭 필요한 작업은 아니었다. 이미 Merman으로 빌드할 때 SVG를 만들고 있었고, 블로그에 성능 문제를 느낄 만큼 다이어그램이 많은 것도 아니었다.

속도 때문에 바꿔야 할 이유도 없었다.

이제 블로그 꾸미는 것도, 이쯤 손봤으니 여기에 넣을 글을 써야겠다.

이래놓고 또 꾸미러 갈 수도 있겠지만.