Stats
Actions
Tags
From visual-generator
Catalogs 24 layout types shared by visual-generator skill, detailing core ideas, ASCII structures, visualization principles, specs, and fit cases for diagram creation.
How this skill is triggered — by the user, by Claude, or both
Slash command
/visual-generator:layout-typesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
모든 `visual-generator` 스킬이 공유하는 24종 레이아웃 정의입니다. 각 레이아웃은 **핵심 아이디어**, **ASCII 시각 구성**, **시각화 원칙**, **권장 사양**, **적합/부적합 케이스**를 포함합니다.
모든 visual-generator 스킬이 공유하는 24종 레이아웃 정의입니다. 각 레이아웃은 핵심 아이디어, ASCII 시각 구성, 시각화 원칙, 권장 사양, 적합/부적합 케이스를 포함합니다.
입력에서 출력으로 단계적 변화/이동을 보여줍니다. 단계 간 연결이 곧 메시지입니다.
[입력] -> [변환 1] -> [변환 2] -> [출력]
| | | |
데이터 처리 검증 결과
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 단계(노드) | 입력/변환/출력 블록 | 3-5개 |
| 연결(화살표) | 단계 간 방향성 | 단계-1개 |
| 단계 라벨 | 단계명/역할 | 단계당 1개 |
| 보조 라벨 | 예시/짧은 설명 | 단계당 0-1개 |
전체는 여러 레이어/구성요소의 결합으로 이루어집니다. "무엇이 무엇 위에/안에 있는가"를 보여줍니다.
┌──────────────────────────┐
│ 응용/서비스 │
├──────────────────────────┤
│ 로직/엔진 │
├──────────────────────────┤
│ 데이터/인프라 │
└──────────────────────────┘
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 레이어 | 상하 스택 또는 내외 구조 | 3-4개 |
| 레이어 라벨 | 레이어 명칭 | 레이어당 1개 |
| 하위 항목 | 레이어 내부 구성요소 | 레이어당 2-4개 |
| 연결 표시 | 의존/데이터 흐름 | 0-3개 |
여러 요소가 **관계(연결)**로 의미를 형성합니다. "누가 누구와 연결되는가"가 핵심입니다.
[A]-----[B]
| \ |
| \ |
[C]-----[D]
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 노드 | 개체/기관/모듈 | 4-8개 |
| 연결선 | 관계/상호작용 | 4-12개 |
| 관계 라벨 | 관계명/데이터명 | 연결선의 0-1개 |
| 범례 | 선/색 의미 설명 | 0-1개 |
두 상태/두 선택지를 동일한 프레임에서 비교합니다. 차이가 메시지를 만듭니다.
┌───────────────┐ VS ┌───────────────┐
│ A (현재) │ │ B (목표) │
│ - 항목 1 │ │ - 항목 1 │
│ - 항목 2 │ │ - 항목 2 │
└───────────────┘ └───────────────┘
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 비교 패널 | A/B 영역 | 2개 |
| 비교 항목 | 패널 내 bullet | 패널당 2-3개 |
| 강조 포인트 | 핵심 변화 | 1-2개 |
| 연결 표시 | 변화/전환 표시 | 0-2개 |
버전/단계가 점진적으로 성숙하는 모습을 보여줍니다. "개선의 누적"을 전달합니다.
[단계 1] -> [단계 2] -> [단계 3]
(소형) (중형) (대형)
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 단계 | 버전/성숙 단계 | 3-4개 |
| 단계 라벨 | 단계명 | 단계당 1개 |
| 개선 포인트 | 핵심 추가사항 | 단계당 1-2개 |
| 전환 표시 | 화살표/라인 | 단계-1개 |
하나의 **핵심(허브)**이 주변 요소를 끌어안거나 연결합니다. "중심의 역할"을 강조합니다.
[주변 A]
|
[주변 B] -- [중심] -- [주변 C]
|
[주변 D]
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 중심 노드 | 코어 개념 | 1개 |
| 주변 노드 | 기능/응용/요소 | 4-8개 |
| 연결선 | 중심-주변 | 주변 수 만큼 |
| 보조 라벨 | 설명/예시 | 주변의 0-1개 |
프로세스가 반복되며, 끝이 다시 시작으로 이어집니다. 피드백이 메시지입니다.
[A] -> [B] -> [C]
^ |
|------------|
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 단계 | 순환 단계 | 4-6개 |
| 방향 표시 | 화살표/곡선 | 단계 수 만큼 |
| 중심 라벨 | 순환 목적/코어 | 0-1개 |
| 외부 입력/출력 | 순환 밖 요인 | 0-2개 |
항목을 카테고리로 분류해 정리합니다. "어떤 항목이 어느 그룹인가"가 핵심입니다.
[그룹 A] [그룹 B] [그룹 C]
- a1 - b1 - c1
- a2 - b2 - c2
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 그룹 | 카테고리 컬럼/박스 | 3-4개 |
| 항목 | 각 그룹 구성 항목 | 그룹당 2-5개 |
| 그룹 제목 | 그룹명 | 그룹당 1개 |
| 분류 기준 | 기준/정의 | 1개 |
핵심에서 외곽으로 범위/영향/포함 관계가 확장됩니다. "거리=관계"를 사용합니다.
┌───────────────────────┐ 외곽(범위/응용)
│ ┌─────────────────┐ │
│ │ ┌───────────┐ │ │
│ │ │ 핵심 │ │ │
│ │ └───────────┘ │ │
│ └─────────────────┘ │
└───────────────────────┘
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 레이어 | 동심 레이어/박스 | 3-4개 |
| 레이어 라벨 | 레이어 정의 | 레이어당 1개 |
| 레이어 항목 | 포함 요소 | 레이어당 1-4개 |
| 강조 레이어 | 핵심 범위 | 1개 |
여러 주체가 동일한 시간축에서 각자의 역할을 수행합니다. "역할 분담 + 순서"를 동시에 보여줍니다.
단계 1 단계 2 단계 3
[주체 A] ──●───────────●────────────●──
[주체 B] ─────●────────────●───────────
[주체 C] ─────────●────────────●───────
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 레인 | 주체/역할 행 | 3-4개 |
| 단계 컬럼 | 시간 구간 | 3-5개 |
| 이벤트 노드 | 레인 내 활동 | 6-12개 |
| 핸드오프 | 레인 간 전달 | 0-4개 |
두 축으로 요소를 배치해 우선순위/포지셔닝을 명확히 합니다. 위치가 의미입니다.
Y(높음)
|
(B) | (D)
------------+------------- X(높음)
(A) | (C)
|
Y(낮음)
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 축 | X축/Y축 | 2개 |
| 사분면 라벨 | 영역 의미 | 0-4개 |
| 요소(점/카드) | 배치 대상 | 6-12개 |
| 범례 | 색/군집 의미 | 0-1개 |
많은 후보가 단계별로 선별/전환되며 줄어듭니다. 축소의 이유가 핵심입니다.
┌───────────────────────┐ 후보(많음)
└───────────┬───────────┘
│
┌─────▼─────┐ 중간
└─────┬─────┘
│
┌──▼──┐ 결과(적음)
└─────┘
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 단계 | 퍼널 구간 | 3-5개 |
| 단계 라벨 | 구간명 | 단계당 1개 |
| 전환 표시 | 감소/필터 | 단계-1개 |
| 보조 수치 | 규모/비율 | 단계당 0-1개 |
중앙 허브에서 주요 노드로 연결되고, 각 주요 노드에서 세부 노드가 파생됩니다. "1단 허브 + 2단 분기" 구조입니다.
(a1) (a2)
\ /
[A]
\
[허브]
/
[B]
/ \
(b1) (b2)
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 허브 | 중앙 코어 | 1개 |
| 주요 노드 | 1차 카테고리 | 4-6개 |
| 세부 노드 | 2차 항목 | 8-15개 |
| 연결선 | 허브/분기 연결 | 12-24개 |
상단은 메인 메시지(개념/이미지), 하단은 **구체 흐름(단계)**으로 구성합니다. 큰 맥락 후 세부로 내려갑니다.
┌─────────────────────────────┐
│ 메인 개념/비주얼 │
└─────────────────────────────┘
[단계 1] -> [단계 2] -> [단계 3]
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 상단 메인 영역 | 대표 이미지/키 메시지 | 1개 |
| 하단 단계 | 프로세스 노드 | 3-4개 |
| 연결 표시 | 상단→하단, 단계 간 | 3-6개 |
| 보조 설명 | 짧은 캡션/근거 | 0-2개 |
동일한 카드들이 그리드로 배치되어 기능/사례/항목을 빠르게 스캔합니다.
┌───────┐ ┌───────┐ ┌───────┐
│ 카드1 │ │ 카드2 │ │ 카드3 │
│ 태그 │ │ 태그 │ │ 태그 │
└───────┘ └───────┘ └───────┘
┌───────┐ ┌───────┐ ┌───────┐
│ 카드4 │ │ 카드5 │ │ 카드6 │
│ 태그 │ │ 태그 │ │ 태그 │
└───────┘ └───────┘ └───────┘
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 카드 | 항목 단위 | 6-9개 |
| 카드 제목 | 항목명 | 카드당 1개 |
| 태그/키워드 | 분류/특징 | 카드당 1-2개 |
| 아이콘 | 빠른 인지 요소 | 카드당 0-1개 |
상단 목표에서 하단 기반까지 우선순위/가치 체계/단계 구조를 피라미드로 표현합니다.
┌──────────┐
│ 최상위 │
┌──┴──────────┴──┐
│ 상위 목표 │
┌────┴─────────────────┴────┐
│ 기반/인프라 │
└───────────────────────────┘
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 층(레이어) | 피라미드 단 | 3-5개 |
| 층 라벨 | 단의 의미 | 층당 1-3개 |
| 보조 아이콘 | 의미 강화 | 층당 0-2개 |
| 방향 표시 | 상향 목표감(선택) | 0-1개 |
완성품(코어)을 중심에 두고 구성요소를 분해해 모듈 구성과 조립 관계를 직관적으로 보여줍니다.
[모듈 A] .......
.
[모듈 B] ...[본체/코어]... [모듈 C]
.
[모듈 D] .......
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 코어(본체) | 중앙 대상 | 1개 |
| 모듈 | 분해 구성요소 | 4-8개 |
| 연결 점선 | 장착/연결 표시 | 모듈 수 만큼 |
| 모듈 설명 | 1줄 설명 | 모듈당 0-1개 |
시간이 좌→우로 흐르며 단계/연도별 마일스톤을 배치합니다. "언제 무엇을 하는가"가 핵심입니다.
시간 -> | 단계 1 | 단계 2 | 단계 3 |
●---●---●---●---●
M1 M2 M3 M4 M5
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 구간(단계) | 연도/분기/단계 | 3-7개 |
| 마일스톤 | 주요 이벤트 | 5-10개 |
| 트랙(선택) | 병렬 라인 | 0-3개 |
| 범례/주석 | 기준/가정 | 0-2개 |
상단은 조직도처럼 책임/거버넌스를, 하단은 네트워크처럼 협력/연계를 동시에 보여줍니다.
[총괄]
/ | \
[과제1] [과제2] [과제3]
| | |
(A)....(B)....(C)....(D)
(하단은 협력/연계 점선)
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 상단 노드 | 총괄/주관 | 1-2개 |
| 중간 노드 | 과제/부문 | 3-6개 |
| 하단 노드 | 참여기관/파트너 | 5-12개 |
| 협력 연결 | 하단 연계 | 4-10개 |
서로 다른 크기의 카드/타일이 모듈형 그리드로 배치되어, 한 화면에서 여러 정보를 우선순위로 보여줍니다.
┌───────────────────┬───────────┐
│ Hero 타일(대형) │ 타일(중형) │
├───────────┬───────┼───────────┤
│ 타일(중형)│타일(소형)│타일(소형)│
├───────────┴───────┼───────────┤
│ 타일(중형) │ 타일(중형) │
└───────────────────┴───────────┘
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| Hero 타일 | 핵심 메시지/대표 이미지 | 1개 |
| 보조 타일 | 기능/지표/근거 | 4-8개 |
| 타일 내 요소 | 아이콘/키워드 | 타일당 2-4개 |
| 그룹 라벨 | 묶음의 의미 | 0-2개 |
흐름의 **굵기(두께)**가 비중/규모를 의미합니다. "어디에서 어디로 얼마나 이동하는가"를 보여줍니다.
[원천 A] ========> [중간 X] ======> [결과 1]
[원천 B] ====> [중간 X] ==> [결과 2]
[원천 C] ==> [중간 Y] ======> [결과 3]
(굵기: 상대 비중)
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 원천 노드 | 입력 카테고리 | 2-5개 |
| 중간 노드 | 합류/분기 지점 | 1-3개 |
| 결과 노드 | 출력 카테고리 | 2-6개 |
| 흐름 링크 | 연결 흐름 | 6-14개 |
시선이 자연스럽게 좌상→우상→좌하→우하로 이동하도록 배치해, 읽기 흐름을 설계합니다.
(1) 제목/핵심 ─────────────── (2) 키 메시지/수치
\
\
(3) 설명/근거 ─────────────── (4) 결론/요청/CTA
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 앵커 영역 | 4코너 핵심 블록 | 4개 |
| 중심 비주얼 | 흐름을 잇는 이미지/도형 | 0-1개 |
| 연결 리드 | 시선 유도 라인/화살표 | 0-2개 |
| 키 텍스트 | 각 영역 핵심 문구 | 영역당 1-2개 |
중심 주제에서 방사형으로 가지를 뻗어 아이디어 탐색/주제 확장을 시각화합니다.
[가지 A]
|
[가지 B] --- [중심 주제] --- [가지 C]
|
[가지 D]
(각 가지에 하위 항목)
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 중심 노드 | 주제/핵심 개념 | 1개 |
| 1차 가지 | 큰 범주 | 4-7개 |
| 2차 항목 | 세부 아이디어 | 가지당 2-4개 |
| 연결선 | 중심-가지/가지-항목 | 12-28개 |
여러 항목의 **누적 구성(합)**과 각 항목의 기여를 한 번에 보여줍니다. 진행/구성 비중을 전달합니다.
[전체] |====A====|===B===|==C==|
(누적 구성: A + B + C)
단계별(선택):
1단계 |==A==|=B=|
2단계 |===A===|==B==|=C=|
3단계 |====A====|===B===|==C==|
| 요소 | 설명 | 권장 수량 |
|---|---|---|
| 누적 막대 | 합을 보여주는 막대 | 1-4개 |
| 구성 항목 | 스택 세그먼트 | 3-6개 |
| 범례 | 항목 색/의미 | 1개 |
| 보조 수치 | 비중/값(선택) | 항목당 0-1개 |
npx claudepluginhub orientpine/honeypot --plugin visual-generatorGenerates professional diagrams (flowcharts, architecture diagrams, comparisons, mind maps, timelines) as draw.io XML files from concepts or documents.
Creates technical and product diagrams (architecture, flowchart, sequence, etc.) as standalone HTML files with inline SVG. Includes style guide setup and 14 diagram types.
Generates Excalidraw diagram JSON files that argue visually, not just display information. Use for workflows, architectures, or concepts.