텍스트로 그린 다이어그램, 이제 예쁘게 뽑을 수 있어요
개발 문서를 쓰다 보면 흐름도나 시퀀스 다이어그램 하나 넣고 싶을 때가 많죠. 이때 많이 쓰는 게 '머메이드(Mermaid)'인데요, 그림판으로 직접 그리는 대신 텍스트 몇 줄로 다이어그램을 만들어 주는 도구예요. 예를 들어 A --> B 라고 적으면 A에서 B로 가는 화살표가 그려지는 식이죠. 깃허브 README나 노션에서도 바로 렌더링돼서 개발자들이 정말 많이 써요.
그런데 머메이드를 좀 써본 분들은 공통된 불만이 하나 있어요. 바로 '모양이 다 똑같고 투박하다'는 거예요. 기본 테마가 몇 개 없고, 색이나 폰트, 모서리 둥글기 같은 걸 내 취향이나 회사 브랜드에 맞게 바꾸려면 설정이 꽤 까다롭거든요. 발표 자료에 넣으려면 '이거 좀 더 깔끔했으면...' 싶은 순간이 많았어요.
Pele가 풀어주는 지점
여기서 등장한 게 'Pele'(pele.run)예요. 핵심은 '머메이드 다이어그램을 테마를 입힐 수 있는 SVG로 뽑아준다'는 거예요. SVG가 뭐냐면, 픽셀로 된 일반 이미지(PNG)와 달리 수학적으로 그려지는 벡터 이미지라서 아무리 확대해도 안 깨지고, 색이나 선을 나중에 코드로 수정하기도 좋아요. 즉 Pele를 쓰면 머메이드의 '텍스트로 쓱 그린다'는 편리함은 그대로 두면서, 결과물은 내가 원하는 스타일로 깔끔하게 입혀서 받을 수 있는 거죠.
이게 왜 반가우냐면, 다이어그램을 '내용 따로, 꾸미기 따로' 관리할 수 있게 되기 때문이에요. 다이어그램의 구조(무엇이 무엇과 연결되는지)는 텍스트로 두고, 보이는 모양(테마)은 나중에 갈아끼우면 되니까요. 라이트 모드와 다크 모드 두 벌을 따로 그릴 필요 없이, 테마만 바꿔서 두 버전을 뽑을 수 있다는 뜻이기도 해요.
비슷한 도구들과 비교하면
다이어그램을 코드로 그리는 도구는 Pele 말고도 많아요. 오래된 강자 'PlantUML', 손그림 느낌의 'Excalidraw', 그리고 요즘 테마가 예쁘기로 소문난 'D2' 같은 것들이죠. 특히 D2는 '예쁜 테마'를 앞세워서 머메이드의 투박함을 파고든 도구인데, Pele의 접근은 조금 달라요. 완전히 새로운 문법을 배우라는 게 아니라, 이미 다들 쓰고 있는 '머메이드 문법 그대로' 두고 결과물만 예쁘게 만들어 준다는 점이 강점이에요. 새 도구 배우는 비용 없이 기존에 써둔 다이어그램 자산을 그대로 살릴 수 있는 거죠.
한국 개발자에게
기술 블로그를 운영하거나, 사내 위키·API 문서를 관리하거나, 컨퍼런스 발표 자료를 자주 만드는 분이라면 바로 와닿을 거예요. 특히 회사 브랜드 컬러에 맞춰 다이어그램을 통일하고 싶을 때, 매번 손으로 색을 지정하는 대신 테마를 한 번 정해두고 재활용할 수 있으니 품이 확 줄어요. 깃허브 README의 다이어그램이 다크 모드에서 글씨가 안 보이게 깨지던 경험이 있는 분들께도 좋은 대안이 될 것 같아요.
한 줄 정리하면, Pele는 '머메이드의 편함은 두고 모양만 예쁘게' 해결해 주는 도구예요. 여러분은 문서용 다이어그램, 지금 어떤 도구로 그리고 계세요?
🔗 출처: Hacker News