Mermaid 다이어그램, 이제 예쁘게 그릴 수 있어요 — Pretty Fish 소개

개발자의 오랜 고민: 다이어그램 그리기

개발하다 보면 시스템 구조나 흐름을 그림으로 그려야 할 때가 정말 많죠. 동료에게 설명할 때, 문서를 쓸 때, PR에 아키텍처 변경 사항을 남길 때. 그래서 많은 분들이 Mermaid라는 도구를 쓰고 있는데요. Mermaid는 코드처럼 텍스트를 작성하면 자동으로 다이어그램을 만들어주는 라이브러리예요. GitHub 마크다운에서도 지원하고, Notion이나 Obsidian 같은 도구에서도 쓸 수 있어서 접근성이 아주 좋거든요.

그런데 문제가 하나 있어요. Mermaid로 생성된 다이어그램이... 솔직히 좀 못생겼다는 거예요. 기본 스타일이 투박하고, 노드 위치를 세밀하게 제어하기가 어렵고, 복잡한 다이어그램이 되면 선이 겹치면서 알아보기 힘들어지는 경우가 많았죠. 그래서 결국 Figma나 draw.io 같은 GUI 도구로 넘어가게 되는데, 이러면 "코드로 관리한다"는 Mermaid의 장점을 잃어버리게 돼요.

Pretty Fish는 바로 이 지점을 파고든 새로운 Mermaid 다이어그램 에디터예요.

Pretty Fish가 뭘 다르게 하는가

Pretty Fish는 Mermaid 문법을 그대로 사용하면서, 결과물의 비주얼을 확 끌어올린 웹 기반 에디터예요. 핵심 아이디어는 간단해요. 기존 Mermaid 렌더러가 만들어주는 투박한 기본 스타일 대신, 모던하고 깔끔한 렌더링 엔진을 자체적으로 제공한다는 거죠.

이게 뭐냐면, 기존 Mermaid 에디터(mermaid.live 같은)에서는 코드를 작성하면 Mermaid.js가 기본으로 제공하는 스타일 그대로 SVG를 뱉어주거든요. 폰트도 단조롭고, 색상도 밋밋하고, 레이아웃 알고리즘도 때때로 이상한 결과를 내놓아요. Pretty Fish는 같은 Mermaid 문법을 입력받되, 렌더링 단계에서 훨씬 세련된 비주얼을 적용해요. 노드 간의 간격, 곡선의 부드러움, 색상 팔레트, 폰트 등이 전부 디자인 감각이 녹아든 상태로 나오는 거예요.

실제로 써보면 같은 Mermaid 코드인데 결과물의 품질 차이가 꽤 크다는 걸 느낄 수 있어요. 특히 플로우차트(flowchart)나 시퀀스 다이어그램(sequence diagram)처럼 자주 쓰는 유형에서 차이가 뚜렷하죠. 기술 블로그나 발표 자료에 넣어도 부끄럽지 않은 수준의 다이어그램을 코드만으로 만들 수 있다는 게 가장 큰 매력이에요.

기존 도구들과 비교하면

다이어그램 도구 생태계를 한번 정리해볼게요. 크게 두 부류가 있거든요.

첫 번째는 코드 기반 도구예요. Mermaid, PlantUML, D2, Graphviz 같은 것들이 여기 해당해요. 텍스트로 작성하니까 Git으로 버전 관리가 되고, 자동화 파이프라인에 넣기도 좋죠. 다만 비주얼 커스터마이징에 한계가 있고, 레이아웃을 세밀하게 제어하기 어려워요.

두 번째는 GUI 기반 도구예요. Figma, draw.io(diagrams.net), Excalidraw, Lucidchart 같은 것들이죠. 원하는 대로 예쁘게 그릴 수 있지만, 코드로 관리가 안 되고, 수정할 때마다 직접 마우스로 이리저리 움직여야 해요.

Pretty Fish는 이 두 세계의 장점을 합치려는 시도예요. Mermaid라는 코드 기반 문법을 유지하면서도 GUI 도구에 가까운 비주얼 품질을 제공하려는 거죠. 비슷한 포지셔닝을 가진 도구로는 D2가 있어요. D2도 "코드로 작성하되 예쁜 다이어그램"을 목표로 하는데, D2는 자체 문법을 사용하는 반면 Pretty Fish는 이미 널리 쓰이는 Mermaid 문법을 그대로 채택했다는 점에서 진입 장벽이 훨씬 낮아요.

한국 개발자에게 어떤 의미가 있을까

실무에서 바로 활용할 수 있는 포인트가 몇 가지 있어요.

우선 기술 문서 작성할 때 유용해요. 사내 위키나 README에 들어가는 아키텍처 다이어그램을 Mermaid로 작성하고 있다면, Pretty Fish로 렌더링해서 이미지를 뽑아 쓰면 문서의 품질이 올라가죠. 특히 외부에 공개되는 오픈소스 프로젝트 문서라면 시각적 완성도가 프로젝트의 신뢰도에도 영향을 미치거든요.

발표 자료를 만들 때도 좋아요. 사내 세미나나 밋업에서 시스템 구조를 설명할 때, draw.io에서 30분 씩 시간 들여 그리던 다이어그램을 Mermaid 코드 몇 줄로 빠르게 만들 수 있으면 준비 시간이 확 줄어들죠.

그리고 Mermaid 문법 자체를 아직 안 써보셨다면, 이번 기회에 한번 배워보시는 것도 좋겠어요. 진입 장벽이 낮고, GitHub에서 바로 렌더링되니까 별도 도구 설치 없이도 쓸 수 있어서 가성비가 정말 좋은 스킬이거든요.

마무리

"코드로 다이어그램을 그리되, 예쁘게 그리고 싶다"는 소박하지만 오래된 바람을 Pretty Fish가 잘 잡아낸 것 같아요. Mermaid 문법을 이미 알고 있다면 진입 비용 제로로 시도해볼 수 있으니, 한번 써보고 기존 도구와 결과물을 비교해 보세요.

여러분은 다이어그램 그릴 때 어떤 도구를 주로 쓰시나요? 코드 기반 도구와 GUI 기반 도구 중 어떤 쪽을 선호하시는지 궁금해요.