인라인 SVG 아이콘, CSS 그리드 중첩 컨테이너 레이아웃, SVG 경로 연결 오버레이 및 색상으로 구분된 연결 범례가 포함된 독립형 HTML 아티팩트로 상세한 계층 아키텍처 다이어그램을 생성합니다. 사용자가 아키텍처 다이어그램, 인프라 다이어그램, 시스템 토폴로지 다이어그램, 네트워크 다이어그램, 클라우드 아키텍처 시각적 개체, 배포 다이어그램, 통합 흐름 다이어그램 또는 시스템 구성 요소의 시각적 표현, 해당 포함 계층 구조 및 상호 연결과 관련된 요청을 생성하도록 요청할 때 사용합니다. "아키텍처 다이어그램", "인프라 다이어그램", "시스템 다이어그램", "토폴로지", "배포 다이어그램", "네트워크 다이어그램", "통합 아키텍처"와 같은 용어에서 트리거되거나 사용자가 시스템 설명을 제공하고 시각적 개체/다이어그램을 요청할 때 트리거됩니다.
명령줄에서 architecture-diagram AI 스킬을 개발 환경에 빠르게 설치
출처: mathews-tom/praxis-skills.
Produces self-contained .html files: inline SVG icons, CSS Grid nested zones, JS-driven SVG connection overlay with color-coded semantic line types and arrowhead markers. Zero external dependencies.
When the user doesn't specify flow semantics, default all connections to default type and omit the legend.
| assets/template.html missing | File deleted or skill directory incomplete | Regenerate from skill defaults: reconstruct the CSS/JS skeleton using the structure documented in this SKILL.md and the reference files |
인라인 SVG 아이콘, CSS 그리드 중첩 컨테이너 레이아웃, SVG 경로 연결 오버레이 및 색상으로 구분된 연결 범례가 포함된 독립형 HTML 아티팩트로 상세한 계층 아키텍처 다이어그램을 생성합니다. 사용자가 아키텍처 다이어그램, 인프라 다이어그램, 시스템 토폴로지 다이어그램, 네트워크 다이어그램, 클라우드 아키텍처 시각적 개체, 배포 다이어그램, 통합 흐름 다이어그램 또는 시스템 구성 요소의 시각적 표현, 해당 포함 계층 구조 및 상호 연결과 관련된 요청을 생성하도록 요청할 때 사용합니다. "아키텍처 다이어그램", "인프라 다이어그램", "시스템 다이어그램", "토폴로지", "배포 다이어그램", "네트워크 다이어그램", "통합 아키텍처"와 같은 용어에서 트리거되거나 사용자가 시스템 설명을 제공하고 시각적 개체/다이어그램을 요청할 때 트리거됩니다. 출처: mathews-tom/praxis-skills.
AI/검색 인용용 안정적인 필드와 명령어.
npx skills add https://github.com/mathews-tom/praxis-skills --skill architecture-diagram인라인 SVG 아이콘, CSS 그리드 중첩 컨테이너 레이아웃, SVG 경로 연결 오버레이 및 색상으로 구분된 연결 범례가 포함된 독립형 HTML 아티팩트로 상세한 계층 아키텍처 다이어그램을 생성합니다. 사용자가 아키텍처 다이어그램, 인프라 다이어그램, 시스템 토폴로지 다이어그램, 네트워크 다이어그램, 클라우드 아키텍처 시각적 개체, 배포 다이어그램, 통합 흐름 다이어그램 또는 시스템 구성 요소의 시각적 표현, 해당 포함 계층 구조 및 상호 연결과 관련된 요청을 생성하도록 요청할 때 사용합니다. "아키텍처 다이어그램", "인프라 다이어그램", "시스템 다이어그램", "토폴로지", "배포 다이어그램", "네트워크 다이어그램", "통합 아키텍처"와 같은 용어에서 트리거되거나 사용자가 시스템 설명을 제공하고 시각적 개체/다이어그램을 요청할 때 트리거됩니다. 출처: mathews-tom/praxis-skills.
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/mathews-tom/praxis-skills --skill architecture-diagram 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code, Cursor, OpenClaw에서 사용할 수 있습니다
https://github.com/mathews-tom/praxis-skills