AI 기반 전문 다이어그램 자동 생성 도구
cathrynlavery/diagram-design
GitHub복잡한 기술 아키텍처, 데이터 흐름, 프로세스 등을 전문적인 수준의 다이어그램으로 자동 생성해주는 도구입니다. 아키텍처, 플로우차트, 상태 기계 등 30가지가 넘는 다양한 유형을 지원합니다.
복잡한 기술 개념을 전문적인 다이어그램으로 자동 생성하여, 문서 작성자가 시간과 노력을 절약하고 일관성 있는 비주얼 콘텐츠를 만들 수 있게 도와줘요.
- 단순히 예쁜 그림이 아닌 시맨틱 패턴과 레이아웃을 분리하여 동작 원리를 명확하게 표현하는 것이 특징입니다. draw.io나 Mermaid 같은 기존 소스도 원하는 형식으로 재구성할 수 있습니다.
- 기술 문서 작성자가 디자인 툴 사용에 드는 시간과 노력을 대폭 줄여주며, 독자에게 전문적이고 브랜드 일관성이 높은 비주얼 콘텐츠를 제공합니다.
- 기본 출력은 외부 의존성이나 빌드 과정이 필요 없는 정적(Static) HTML 형식을 유지하여 호환성이 높습니다. 순차적인 설명이 필요한 경우에만 선택적으로 애니메이션을 추가할 수 있습니다.
이 도구는 아키텍처 스케치, 플로우차트, 상태 기계 등 복잡한 기술 개념을 시각화하는 다양한 편집 다이어그램 유형을 제공합니다. Claude Code, Codex와 같은 호스트 및 기술과 호환되며, 자체 포함된 HTML 및 SVG 형식으로 출력되어 전문적인 수준의 비주얼 콘텐츠를 생성할 수 있습니다.
기술적 접근 방식 측면에서, 이 도구는 시맨틱 패턴을 활용하여 동작 원리를 레이아웃과 분리합니다. 기본 출력은 외부 의존성이나 빌드 과정이 필요 없는 정적 HTML 형식을 유지하며, 순차적인 설명이 필요한 경우에만 선택적으로 애니메이션 기능을 사용할 수 있습니다.
다양한 전문 다이어그램 유형을 지원하는데, 아키텍처 외에도 Sankey, Fishbone, Wardley map 등 10가지 이상의 레이아웃 문법을 제공합니다. 또한 사용자의 웹사이트를 분석하여 브랜드에 맞는 스타일로 60초 만에 적용하는 기능도 갖추고 있습니다.
용어 풀이
- LLM
- 방대한 글을 학습해 문장을 이해하고 만들어 내는 AI 모델. ChatGPT, Claude, Gemini가 여기에 속해요.
- 에이전트
- 목표를 받으면 스스로 계획을 세우고 도구를 써서 여러 단계의 작업을 해내는 AI.
어떤 종류의 복잡한 다이어그램을 만들 수 있나요?
아키텍처 스케치, 플로우차트, 상태 기계 같은 기본적인 유형 외에도 Sankey, Fishbone, Wardley map 등 10가지 이상의 레이아웃 문법을 지원해요.
다이어그램의 출력 형식은 어떤가요?
기본적으로 외부 의존성이나 빌드 과정이 필요 없는 정적 HTML 형식을 유지해요. 순차적인 설명이 필요한 경우에만 애니메이션 기능을 선택적으로 사용할 수 있어요.
제 웹사이트의 브랜드 스타일에 맞출 수도 있나요?
네, 사용자의 웹사이트를 분석하여 해당 브랜드에 맞는 스타일로 다이어그램을 적용하는 기능도 갖추고 있어요.