AI 튜토리얼

한 문장의 기술 스택을 아키텍처 다이어그램으로 변환하기

stack-diagram을 AI 에이전트 스킬로 설치하고, 애플리케이션 또는 개발 스택을 자연어로 설명해 공식 기술 로고가 포함된 포터블 HTML, PNG, React 또는 Artifact 다이어그램을 만드는 방법을 알아보세요.

2026년 11월 1일약 9분 소요

stack-diagram이란?

stack-diagram은 기술 스택에 대한 자연어 설명을 아키텍처 다이어그램으로 변환하는 AI 에이전트 스킬입니다. 아이콘을 배치하고 연결선을 직접 그리는 대신, 서비스, 관계, 프로토콜, 배포 흐름을 문장이나 짧은 단락으로 설명하면 됩니다.

예를 들어 다음 프롬프트는 웹 애플리케이션과 API, 데이터 서비스, 배포 파이프라인을 설명합니다.

스택을 다이어그램으로 그려줘: Vercel에서 실행되는 Next.js와 Hono API. Neon의 Postgres, Clerk 인증, Stripe 결제. GitHub Actions가 배포를 담당해.

이 스킬은 Agent Skills 형식을 지원하는 Claude Code, Codex, Cursor 및 기타 에이전트에서 사용할 수 있습니다.

주요 기능

자연어 입력: 다이어그램 문법을 작성하지 않고도 아키텍처를 설명할 수 있습니다.
공식 로고: SVGL, Devicon, gilbarbara/logos, 공식 브랜드 저장소, AWS Architecture Icons 패키지 등의 소스에서 로고를 가져옵니다.
정교한 연결선 라우팅: 선이 라벨을 피해 배치되므로 화살표가 텍스트를 가로지르지 않습니다.
라이트 및 다크 테마: 모든 다이어그램을 두 테마로 렌더링합니다. 로고 타일은 원래 브랜드 색상을 유지하도록 흰색으로 표시됩니다.
다양한 출력 형식: 독립 실행형 HTML 파일, PNG 이미지, 의존성 없는 React 컴포넌트 또는 공유 가능한 Artifact를 생성할 수 있습니다.
이식 가능한 HTML: 글꼴과 로고를 인라인으로 포함하므로 네트워크에 연결하지 않아도 생성된 HTML 파일을 렌더링할 수 있습니다.

요구 사항

스킬을 사용하기 전에 환경에 다음 항목이 제공되는지 확인하세요.

Python 3.9 이상.
로고를 가져오는 동안 사용할 네트워크 액세스.
다이어그램을 PNG 파일로 내보낼 때 필요한 Chromium이 포함된 Playwright.
스킬을 지원하는 AI 코딩 에이전트 또는 애플리케이션.

완성된 HTML 출력물은 오프라인에서 작동하지만, 로고가 스킬에 번들로 포함되지 않고 빌드 시 다운로드되므로 생성 중에는 네트워크 액세스가 필요합니다.

stack-diagram 설치

지원되는 코딩 에이전트에 설치

터미널에서 다음 명령을 실행하세요.

npx skills add caru-ini/stack-diagram

이 명령은 Claude Code, Codex, Cursor를 비롯해 skills 생태계를 지원하는 에이전트에 스킬을 설치합니다.

Claude 앱에 설치

업로드한 스킬을 지원하는 Claude 앱에서는 최신 릴리스를 열고 stack-diagram.zip을 다운로드한 다음 해당 ZIP 파일을 스킬로 업로드하세요.

첫 아키텍처 다이어그램 만들기

설치가 끝나면 에이전트에 스택을 그려 달라고 요청하세요. 유용한 프롬프트에는 주요 기술, 실행 위치, 상호작용 방식이 포함됩니다.

스택을 다이어그램으로 그려줘: Vercel에서 실행되는 Next.js와 Hono API.
Neon의 Postgres, Clerk 인증, Stripe 결제.
GitHub Actions가 배포를 담당해.

이 설명만으로도 에이전트는 프런트엔드, API, 데이터베이스, 인증 제공업체, 결제 제공업체, 배포 워크플로를 표현하는 데 필요한 정보를 얻을 수 있습니다.

관계를 명시적으로 작성하기

더 정확한 결과가 필요하다면 중요한 프로토콜이나 상호작용 유형을 포함하세요. 브라우저가 HTTPS를 통해 애플리케이션에 연결되는지, API가 SQL을 통해 데이터베이스를 조회하는지, 한 서비스가 RPC 호출을 수행하는지 지정할 수 있습니다.

사용자가 HTTPS를 통해 Vercel의 Next.js에 접근하는 흐름을 그려줘.
Next.js는 RPC를 통해 Hono API를 호출해.
API는 SQL을 통해 Neon을 조회하고 Clerk를 세션에 사용해.
GitHub Actions가 애플리케이션을 배포해.

프로젝트는 결과를 렌더링하고 반환하기 전에 다이어그램을 확인하므로 연결선이 라벨을 가로지르는 문제를 줄일 수 있습니다.

다이어그램 개발 도구

stack-diagram은 클라우드 인프라에만 국한되지 않습니다. 모노레포, 로컬 도구, 테스트 러너, 커밋 훅, 지속적 통합, 패키지 퍼블리싱도 시각화할 수 있습니다.

모노레포 도구를 그려줘: Turborepo, Biome, Vitest, Lefthook를 사용하는 pnpm 워크스페이스. GitHub Actions가 CI를 실행하고 npm에 퍼블리시해.

이 유형의 프롬프트는 워크스페이스의 경계, 그 안에서 작동하는 도구, CI와 퍼블리싱을 담당하는 외부 자동화를 지정합니다.

AI 애플리케이션 다이어그램 만들기

AI 애플리케이션 다이어그램에는 웹 프레임워크, 모델 제공업체, 벡터 데이터베이스, 백그라운드 작업, 콘텐츠 소스를 함께 표현할 수 있습니다. 대화형 요청 경로와 예약된 수집 프로세스를 모두 설명하세요.

문서 챗봇을 그려줘: Vercel의 Next.js가 Supabase pgvector를 검색하고 Claude로 답변해. Inngest가 매일 밤 Notion을 동기화해.

여기서 프롬프트는 사용자가 질문하고 답변을 받는 흐름과 매일 밤 실행되는 동기화 프로세스를 구분합니다.

AWS 인프라 다이어그램 만들기

AWS 아키텍처에서는 서비스와 네트워크 경계를 직접 지정하세요. stack-diagram은 AWS의 공식 아키텍처 아이콘을 사용합니다.

AWS에서 실행되는 앱을 그려줘: 퍼블릭 서브넷의 ALB와 S3 앞에 CloudFront를 배치해. Fargate, RDS, ElastiCache는 프라이빗 서브넷에 있어.

이 설명은 라우팅 계층, 정적 스토리지, 로드 밸런서, 퍼블릭 서브넷과 프라이빗 서브넷 간의 분리를 전달합니다.

출력 형식 선택

기본 결과물은 독립 실행형 HTML 파일입니다. 프롬프트에서 지원되는 다른 형식을 직접 요청할 수도 있습니다:

HTML: 저장소, 내부 문서, 위키에 적합합니다. 글꼴과 로고가 하나의 파일에 포함됩니다.
PNG: 프레젠테이션과 문서에 유용합니다. PNG 내보내기에는 Chromium이 포함된 Playwright가 필요합니다.
React 컴포넌트: React 프로젝트에 통합하기 적합한 종속성 없는 컴포넌트입니다.
Artifact: Claude를 통해 게시하고 공유하기에 적합합니다.

다음 스택을 독립 실행형 HTML 파일로 다이어그램화해 주세요:
Vercel의 Next.js가 Hono API를 호출하고, 이 API는 Neon에 데이터를 저장합니다.

PNG 파일과 React 컴포넌트는 동일한 기반 HTML 파일에서 렌더링되므로 출력 형식 간 일관성을 유지하는 데 도움이 됩니다.

라이트 테마와 다크 테마 사용

각 다이어그램은 라이트 테마와 다크 테마로 렌더링됩니다. 공식 로고가 원래 색상을 유지할 수 있도록 기술 타일은 흰색으로 유지되며, 그룹 레이블은 다크 테마에 적합한 브랜드 로고로 전환될 수 있습니다.

저장소나 위키에 결과물을 게시할 때 독자가 서로 다른 인터페이스 색 구성표를 사용할 수 있다면 두 테마를 모두 제공하세요.

고급 프롬프트 작성 팁

트래픽의 방향 설명

제품 목록은 스택에 무엇이 포함되는지 설명하지만, 방향을 나타내는 표현은 작동 방식을 설명합니다. 호출, 쿼리, 제공, 게시, 배포, 동기화와 같은 동사를 사용하세요.

경계와 위치 명시

컴포넌트가 하나의 배포 환경을 공유하는지, 워크스페이스에 속하는지, 퍼블릭 서브넷과 프라이빗 서브넷에 배치되는지를 명시하세요. 이러한 세부 정보는 다이어그램이 관련 컴포넌트를 올바르게 그룹화하는 데 도움이 됩니다.

일정과 자동화 포함

프로세스가 매일 밤, 모든 커밋마다 또는 배포 중에 실행된다면 해당 정보를 포함하세요. 이를 통해 백그라운드 워크플로와 기본 요청 경로를 구분할 수 있습니다.

필요한 결과물 요청

기본 HTML 형식이 필요한 형식이 아니라면 HTML, PNG, React 또는 Artifact 출력을 지정하세요. 공유하기 쉽고 오프라인에서도 사용할 수 있는 결과를 원한다면 독립 실행형 HTML 파일을 요청하세요.

브랜드 에셋은 변경하지 않기

이 프로젝트는 로고의 색을 바꾸거나 다시 그리지 않습니다. 브랜드 이름과 로고는 각 소유자의 상표로 유지되며, 다이어그램에 포함되었다고 해서 보증이나 제휴를 의미하지는 않습니다.

라이선스 고려 사항

프로젝트의 코드와 문서는 MIT 라이선스를 사용합니다. 번들로 제공되는 글꼴은 SIL 오픈 폰트 라이선스 1.1을 사용합니다. 로고는 번들에 포함되지 않으며, 생성 중 지원되는 로고 컬렉션, AWS, Lucide 또는 공식 브랜드 소스와 저장소에서 다운로드됩니다.

결론

stack-diagram은 간결한 아키텍처 설명을 공식 로고, 읽기 쉬운 라우팅, 테마 지원, 다양한 내보내기 옵션을 갖춘 완성도 높은 시각 자료로 빠르게 변환할 수 있는 방법을 제공합니다. 스킬을 설치하고 컴포넌트와 관계를 명확하게 설명한 다음, 문서화 또는 공유 워크플로에 적합한 출력 형식을 요청하세요.