Codex와 Claude Code에서 Mermaid 도표를 브랜드 스타일로 다시 만드는 방법
diagram-design은 Claude Code와 Codex 안에서 편집형 도표를 만드는 플러그인입니다.
정적 HTML과 SVG로 결과가 나와 별도 빌드 없이 브라우저에서 확인할 수 있습니다.
개발자는 격리된 프로젝트에 먼저 설치해 머메이드 도표 한 장으로 결과를 확인하세요.
AI에게 시스템 구조나 업무 흐름을 그려 달라고 하면 내용은 맞는데 결과물이 어딘가 익숙한 경우가 많습니다. 비슷한 둥근 상자와 선이 반복되고, 회사 문서의 색이나 글꼴과도 잘 맞지 않습니다. 결국 전달용 자료를 만들기 위해 다시 그리는 시간이 붙습니다.
오늘AI 편집부가 diagram-design을 고른 이유는 화려한 데모보다 이 재작업을 줄일 가능성 때문입니다. 공식 GitHub 저장소에 따르면 이 플러그인은 Claude Code와 Codex에서 도표를 만들며, 흐름도와 타임라인을 포함한 스물일곱 가지 형식을 제공합니다. 개발자가 이미 쓰는 코딩 에이전트 안에서 구조 설명과 시각 자료 제작을 이어 갈 수 있다는 점이 핵심입니다.
결과물을 바로 열어볼 수 있다
출력은 정적 HTML과 SVG 파일입니다. 별도의 빌드 과정이나 외부 이미지 의존성이 없어서 브라우저에서 곧바로 결과를 확인할 수 있습니다. 도표를 만든 다음 또 다른 도구로 옮겨야만 형태를 볼 수 있는 흐름과는 차이가 납니다. 자료용 그림을 빠르게 비교할 때 이 단순함이 실용적입니다.
새 도표만 만드는 도구도 아닙니다. 기존 Mermaid나 draw.io 소스를 원하는 크기와 상세도에 맞춰 다시 그릴 수 있습니다. 이미 구조가 검토된 도표라면 내용을 처음부터 설명하기보다, 시각 표현만 바꾸는 출발점으로 쓸 수 있습니다. 웹사이트의 색과 글꼴을 읽어 스타일 가이드에 반영한다는 기능도 제공됩니다.
다만 여기서 일반 직장인과 개발자의 판단은 갈립니다. CLI에서 플러그인을 설치하고 프로젝트 파일을 다루는 도구이므로 비개발자에게 오늘 바로 따라 할 행동으로 권하기는 어렵습니다. 일반 직장인은 이런 제작 방식이 있다는 정도만 알아두면 됩니다. 실제 설치와 결과 검증은 개발자 역할입니다.
전체 도입보다 한 장 비교가 먼저
공식 저장소에는 Codex용 마켓플레이스 추가와 플러그인 설치 명령이 공개돼 있습니다. 설치법이 있다는 사실과 팀 문서에 바로 써도 된다는 판단은 같지 않습니다. 브랜드 스타일이 얼마나 잘 맞는지, 기존 도표의 의미가 재제작 과정에서 흐려지지 않는지는 실제 결과물을 보고 판단해야 합니다.
그래서 판정은 좁게 잡았습니다. 개발자라면 다이어그램 디자인으로 기존 도표 한 장을 다시 만들어 볼 만합니다. 개발자는 격리된 프로젝트에 먼저 설치해 머메이드 도표 한 장으로 결과를 확인하세요. 익숙한 입력 하나를 기준으로 삼으면 모양뿐 아니라 수정 편의와 재사용 가능성도 차분히 비교할 수 있습니다. 팀 전체의 제작 방식을 바꾸는 결정은 그다음 문제입니다.
출처
- diagram-design 공식 GitHub 저장소: https://github.com/cathrynlavery/diagram-design
이 글은 자체 리서치 파이프라인의 자료 조사를 바탕으로 작성했습니다.