diagram-design: URL만 던지면 60초 만에 브랜드 매칭 다이어그램

AI 코딩 에이전트에서 다이어그램을 요청하면 보통 둥근 모서리의 범용 박스들이 나열된 결과물이 돌아온다. 이 도구는 이를 해결하기 위해 38종의 편집 디자인(Editorial) 다이어그램 타입을 제공한다. 그림자나 불필요한 장식 없이, 읽는 사람이 가장 먼저 봐야 할 1~2개 요소에만 강조 색을 사용하는 절제된 시각 언어를 적용한다.

아키텍처, 플로우차트, 시퀀스, 상태 머신, ER 다이어그램, 타임라인, 산키, 워들리 맵 등 다양한 유형을 지원한다. 각 다이어그램은 최소한의 라이트/다크 모드와 풀 에디토리얼 버전의 세 가지 정적 변형으로 제공되며, 브라우저에서 바로 열 수 있는 자체 포함 HTML과 SVG 파일로 출력된다. 빌드 단계나 외부 이미지 의존성 없이 즉시 사용 가능하다.

Figma에서 30분간 색상을 고르거나 수작업으로 정렬할 필요가 없다. 웹사이트 URL만 제공하면 에이전트가 해당 사이트의 팔레트와 폰트 스택을 추출해 다이어그램의 종이, 잉크, 강조색, 링크 색 등 의미론적 역할에 매핑한다. 이 과정을 통해 브랜드 아이덴티티와 일치하는 다이어그램을 60초 안에 생성할 수 있다.

Claude Code, Codex, Factory Droid, Pi 등 주요 AI 개발 도구에서 플러그인 형태로 동작한다. 기존 Mermaid나 draw.io 소스를 입력받아 지정된 형식과 상세 수준으로 재그리핑하는 기능도 지원한다. 복잡한 시스템 구조나 프로세스를 문서화할 때, 디자인 품질을 유지하면서 빠르게 시각 자료를 생산해야 하는 개발자나 기술 작가에게 적합하다.