아프니까 개발자다 아프니까 개발자다

코드 위키 도구들이 다이어그램을 많이 쓴다는 얘기는 이전 글에서 했다. "얼마나 많이?"에 답해 본 적은 없었다. 그래서 직접 세 보았다.2026-05 기준 deepwiki.com/facebook/react 위키는 sub-page 34개로 구성되어 있고 그 안에 mermaid 다이어그램 115개가 들어가 있다(페이지당 평균 약 3.4개). expressjs/express 위키는 32 페이지에 221개(페이지당 평균 약 6.9개). DeepWiki는 SPA 방식이라 한 URL에 위키 전체 페이로드가 같이 실려 오는데, 그 페이로드를 그대로 grep해서 ```mermaid 블록을 센 결과다.한 위키 전체에 다이어그램 100~200개라는 게 처음엔 비현실적으로 들리지만, 큰 코드 베이스를 설명할 때 흔한 분량..

들어가며 — "X 버튼이 안 듣는다"는 사용자 보고에서 시작된 디버깅Claude.ai 스타일 Artifact 사이드 패널을 구현했다. 모델 응답에서 HTML/SVG/Mermaid 블록을 자동 추출해 우측 패널에 분리 렌더링한다. 구성은 정규식 한 줄, sandboxed iframe, 탭 UI다. 한 시간 만에 만들었다. 만족스럽게 배포했는데 사용자 보고가 즉각 왔다."오른편에 '아티팩트'가 무조건 나오는데 동작하는 건지 모르겠다. X 버튼이 안 듣는다."처음에는 JavaScript 버그로 의심했다. onclick 핸들러가 제대로 안 붙었나, setAttribute('hidden', '')가 호출은 되는데 효과가 없나. 한 시간을 디버깅하다가 진짜 원인을 발견했다 — HTML5의 [hidden] 속성과 컴..

잃어버린 Visio 파일 하나에서 시작된 프로젝트mermaid는 2014년 스웨덴 개발자 Knut Sveidqvist가 만든 오픈소스다. 계기는 단순하지만 상징적이었다 — 중요한 Visio 파일을 잃어버렸다. 바이너리 .vsdx는 diff가 안 되고, Git에 올려도 변경 이력을 추적할 수 없고, 노트북이 바뀌면 같이 사라진다. 아키텍처가 바뀔 때마다 누군가 GUI를 열어 박스를 다시 그려야 하는 구조였다.Sveidqvist의 통찰은 한 줄이다. "문서가 코드라면 다이어그램도 코드여야 한다." 첫 버전은 flowchart와 sequence 두 종류만 지원했고, 문법은 Markdown처럼 소문자 중심으로 설계했다. 이름은 당시 자녀들이 보던 『인어공주(The Little Mermaid)』에서 따왔다.202..

Javadoc에서 영감 받은 UML 도구PlantUML은 프랑스 개발자 Arnaud Roques가 2009년 4월 17일 SourceForge에 공개한 오픈소스 Java 컴포넌트다. 당시 그는 "Web Sequence Diagrams" 사이트를 보고 "Javadoc처럼 텍스트에서 다이어그램을 자동 생성하자"는 아이디어를 UML 전체로 확장했다.출발점 동기는 세 가지였다. 첫째, Rational Rose 같은 GUI 도구가 코드 변경을 못 따라가서 다이어그램이 낡아버리는 문제. 둘째, Microsoft Word 문서용 다이어그램 자동 생성 수요. 셋째, 위키·코드 주석에 UML을 직접 삽입해 애자일 문화에 녹이는 것. 결과적으로 PlantUML은 mermaid보다 5년 먼저 나온 "Diagram-as-Co..