개발도구 도구
AI 기반 웹사이트용 전문 다이어그램 생성 도구
cathrynlavery/diagram-design
GitHub웹사이트에 최적화된 전문 다이어그램 제작 도구로, 아키텍처, 플로우차트, 산키 등 39가지의 시각적 유형을 제공합니다.
세 줄 요약
- 단순한 이미지 나열이 아닌, 동작(Semantic Pattern)과 레이아웃을 분리하여 표현함으로써 복잡한 시스템 구조를 유연하고 명확하게 설명할 수 있습니다.
- 디자인 툴 사용에 드는 시간과 어려움을 줄여주며, 웹사이트의 브랜드에 맞는 전문적이고 일관된 비주얼 구현이 가능합니다.
- 기본 출력은 정적인 HTML/SVG 형태이며, 순서가 중요한 경우 선택적 애니메이션을 지원하는 AI 코딩 스킬 플러그인입니다.
이 도구는 Claude Code, Codex 등 다양한 호스트와 호환되는 39가지의 편집용 다이어그램 유형을 제공합니다. 모든 다이어그램은 자체 포함된 HTML과 SVG로 구성되어 있으며, 그림자나 Mermaid 같은 일반적인 요소를 사용하지 않습니다. 특히 시맨틱 패턴이 레이아웃과 분리되어 있어, 큐나 정책 추적 등 다양한 구조를 타입 수를 늘리지 않고도 표현할 수 있습니다.
시스템은 동작(behavior)을 레이아웃과 분리하는 시맨틱 패턴을 도입했습니다. 이를 통해 순서가 중요한 설명의 경우 선택적 애니메이션이 가능하며, 기본 출력은 정적인 HTML 형태를 유지합니다. 또한, 이 스킬은 draw.io, Mermaid 또는 Excalidraw 같은 기존 소스를 사용자가 지정한 형식, 크기 및 상세 수준으로 다시 그리는 기능도 지원합니다.
제공되는 39가지 비주얼 타입에는 아키텍처, 플로우차트, 시퀀스 다이어그램 외에도 타임라인, 스윔레인, 계층 구조(Tree), 데이터 흐름 등 다양한 전문적인 시각화 유형이 포함됩니다. 모든 비주얼 타입은 최소한의 라이트, 최소한의 다크, 그리고 전체 편집본 세 가지 정적 변형으로 배포되며, 별도의 빌드 단계나 외부 이미지 의존성 없이 브라우저에서 직접 열 수 있습니다.