저는 그림으로 생각하기 때문에, Claude Code에게 터미널에서 mermaid를 그리도록 가르쳤습니다

저는 시각적인 사람입니다(실제로 그런 것이 존재하는지는 모르겠지만, 저 자신을 설명하는 방식입니다). 무언가를 구축하기 전에, 서비스들이 어떻게 통신하는지, 결제 실패 시 무슨 일이 발생하는지, 상태가 어디서 변경되는지를 먼저 봐야 합니다. 그래서 디자인 단계가 항상 저에게는 가장 중요하며, 순서 다이어그램(sequence diagrams), 활동 흐름도(activity flows), 상태 기계(state machines) 그리고 가끔 C4 모델을 사용합니다. 코드를 작성하기 전에 반드시 이 과정을 거칩니다. 요즘 저는 Claude를 사용하여 CLI(Command Line Interface)에서 이러한 디자인 작업을 합니다. 완성된 다이어그램은 제가 사용하는 Obsidian 볼트에 저장되며, 저는 또 다른 TUI(Text User Interface)인 emeraldian으로 터미널에서 이를 탐색합니다. 하지만 완성하는 과정이 까다롭습니다. Claude Code는 멋진 mermaid 코드를 작성하지만, 그것을 사용자에게 보여줄 수는 없습니다. 모든 수정 사항은 소스 코드를 복사하여 다른 앱의 뷰어에 붙여넣고 확인한 다음, 돌아와서 변경을 요청하고, 다시 이 과정을 반복해야 합니다. 볼 수 없는 디자인으로 반복 작업을 하기는 어렵습니다.

그래서 저는 merman이라는 Claude Code 모드를 만들었습니다. 이 모드는 mermaid를 터미널에서 실시간으로 렌더링합니다. 순서 다이어그램을 요청하면 실제 다이어그램이 답변에 나타납니다. 화살표를 움직이면 다시 그려집니다. 플로우차트(Flowcharts), 순서도(sequence diagrams), 상태도(state diagrams), 클래스 다이어그램, ER 다이어그램 모두 작동하며, 막대 그래프(bar charts), 선 그래프(line charts), 파이 차트(pie charts) 및 간트 차트(gantt charts)도 가능합니다. 표 역시 제대로 색상이 입혀져 나옵니다.

이름에 관해서는, 이보다 더 잘 mermaid를 과시할 사람이 없다고 느꼈기 때문에 적절하다고 생각했습니다. - 전체 답변은 약 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의 포크(fork)로 시작했으며, 이후 대부분의 변경 사항은 제가 방향을 제시하고 모든 렌더링을 확인하면서 Claude Code가 수행했습니다. 초점은 속도(speed), 메모리(memory), 토큰(tokens) 측면에서 가볍게 유지하는 것이었습니다. 이것이 유용하다고 느끼신다면, 레포지토리(repo)에 별점 하나를 주시면 정말 감사하겠습니다. 이는 다른 사람들이 이 것을 발견하는 데도 도움이 됩니다. 지원해 주셔서 감사합니다! /u/100xbuilder가 제출했습니다 [link] [comments]