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.
npx claudepluginhub orientpine/honeypot --plugin visual-generatorThis skill uses the workspace's default tool permissions.
모든 `visual-generator` 스킬이 공유하는 24종 레이아웃 정의입니다. 각 레이아웃은 **핵심 아이디어**, **ASCII 시각 구성**, **시각화 원칙**, **권장 사양**, **적합/부적합 케이스**를 포함합니다.
Generates standalone HTML files with inline SVG for 13 diagram types: architecture, flowcharts, sequences, state machines, ERDs, timelines, swimlanes, quadrants, trees, and more. Customizable style guide with first-run onboarding.
Guides crafting prompts for AI image generation of professional 16:9 Korean infographics in PPT style for government research plans, with color palettes, fonts, layouts, and caption patterns.
Generates 13 types of editorial-quality HTML+SVG diagrams (architecture, flowcharts, sequences, ER models, timelines) for blog posts and documentation with brand-matched styling and no external dependencies.
Share bugs, ideas, or general feedback.
모든 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개 |