시각적으로 사고하는 편이라 Claude Code가 터미널에서 Mermaid를 그리도록 만들어봤음

난 시각적인 정보를 중시하는 사람이야(이런 말이 실제로 있는지는 모르겠지만, 나를 표현하자면 딱 이거임). 뭘 만들기 전에 일단 눈으로 봐야 직성이 풀려. 서비스끼리 어떻게 통신하는지, 결제 실패하면 어떻게 되는지, 상태는 어디서 변하는지 같은 거 말이야. 그래서 난 항상 설계 단계부터 시작해. 시퀀스 다이어그램, 액티비티 플로우, 상태 머신, 가끔은 C4까지 그려보고 나서야 코딩을 시작하지.

요즘은 CLI에서 Claude를 써서 설계를 해. 완성된 다이어그램은 내 Obsidian 볼트에 저장하는데, 내가 직접 만든 Obsidian용 TUI인 emeraldian으로 터미널에서 바로 확인하지. 근데 이걸 완성하기까지 과정이 진짜 귀찮거든. Claude Code가 mermaid 코드는 기가 막히게 짜주는데, 정작 그걸 보여주질 못해. 수정할 때마다 소스 복사해서 다른 앱 뷰어에 붙여넣고, 확인하고, 다시 돌아와서 수정 요청하고, 이 짓을 무한 반복해야 하니까. 눈에 보이지도 않는 걸 설계하려니 속도가 안 나더라고.

그래서 merman을 만들었어. 터미널에서 mermaid를 실시간으로 렌더링해주는 Claude Code 모드야. 시퀀스 다이어그램 그려달라고 하면 답장에 다이어그램이 바로 튀어나와. 화살표 하나 옮기면 바로 다시 그려주고. 순서도, 시퀀스, 상태, 클래스, ER 다이어그램 다 되고, 막대/선/파이 차트랑 간트 차트까지 다 지원해. 표도 색깔 예쁘게 잘 나오고.

이름은 뭐, 당연한 거 아니겠어? 인어(mermaid)를 제일 잘 보여줄 수 있는 게 인어 왕자(merman)잖아.

- 전체 응답 렌더링에 2ms 정도밖에 안 걸려서 렉 같은 거 없음

- 16가지 컬러 테마 지원, `/merman theme nord` 입력해서 테마 변경 가능

- 대화당 토큰 약 355개 소모(Claude가 그림을 그릴 수 있다는 걸 알려주는 작은 힌트), 끄고 싶으면 끌 수도 있음

- Claude Code 자체 UI는 건드리지 않고, 오직 응답 부분만 수정함

Claude Code 플러그인으로 설치하면 되고, 한 줄이면 끝이야(2.1.311 버전 이상 필요):

claude plugin marketplace add iamrohithrnair/merman && claude plugin install merman@merman

그다음 /reload-plugins 입력하고 /merman demo 치면 얘가 그릴 수 있는 모든 걸 볼 수 있어.

https://github.com/iamrohithrnair/merman (MIT)

참고: C4는 아직 지원 안 돼서 그냥 소스 코드로만 나올 거야. 너도 C4 많이 쓰면 말해줘, 우선순위 올려줄게. 다이어그램이 이상하게 나오는 것도 마찬가지야. 마크다운 보내주면 확인해 볼게.

이건 원래 prismantis를 포크해서 시작한 건데, 그 이후 변경 사항은 대부분 Claude Code가 했어. 난 옆에서 방향 잡고 렌더링 결과물 체크만 했지. 속도, 메모리, 토큰 효율을 최우선으로 생각해서 가볍게 만들었어.