---
code: "SCH-02"
id: "c-sch-3flow"
tab: "schemas"
kind: "schema"
title: "3단계 흐름 · Flow"
library: "SVG"
deps: ["svg"]
load: "low"
pasteKind: "schema-svg"
family: "flow"
dataShape: "3-cell diagram with 좌→중→우 axis"
tasks: ["structure ideas", "explain process", "choose communication frame"]
tags: ["flow", "좌→중→우", "3cells", "IPO", "시퀀스", "단방향", "프로세스"]
gallery: "https://graph.heal7.com/#SCH-02"
js: "/sku/SCH-02.js"
---

# [SCH-02] 3단계 흐름 · Flow

> AI 붙여넣기 카드. 갤러리 런타임(`main.js`)이 아니라 이 파일을 가져와라.

## 언제 가져가나
시간/논리 순서가 있는 단방향 흐름 — 입력에서 출력까지 인과를 시선과 함께 따라감.

**응용** 비즈니스 프로세스, 데이터 파이프라인, IPO(Input-Process-Output).

## 데이터 모양
- family: `flow`
- dataShape: 3-cell diagram with 좌→중→우 axis
- tasks: structure ideas, explain process, choose communication frame
- tags: flow, 좌→중→우, 3cells, IPO, 시퀀스, 단방향, 프로세스

- schema.type: `flow`
- schema.cells: `3`
- schema.axis: `좌→중→우`


## 의존
svg · load `low` · library `SVG`

## 붙여넣는 법
1. 라이브러리 없음. svg viewBox 0 0 400 240
2. 아래 body 를 svg 안에 넣는다
3. 색 변수(`${gold}` 등)는 T 토큰으로 치환한다

```js
const T = {
  "bg": "transparent",
  "fg": "#ece8f5",
  "sub": "#a59bbd",
  "grid": "rgba(255,255,255,.08)",
  "gold": "#e8c069",
  "royal": "#6b8cff",
  "rose": "#e07a9f",
  "teal": "#6dd2c4",
  "plum": "#b487e8"
};
const gold = T.gold, royal = T.royal, rose = T.rose, teal = T.teal, plum = T.plum, fg = T.fg, sub = T.sub;
const stroke = 'rgba(255,255,255,.18)';
const fill1 = 'rgba(232,192,105,.10)';
const fill2 = 'rgba(107,140,255,.10)';
const host = document.querySelector('#chart');
const body = `
    ${[0,1,2].map(i=>{
      const x = 20 + i*130, c=[royal,gold,rose][i], lab=['입력','처리','출력'][i];
      return `<rect x="${x}" y="60" width="110" height="120" rx="10" fill="${fill1}" stroke="${c}" stroke-width="1.5"/>
              <text x="${x+55}" y="118" text-anchor="middle" fill="${fg}" font-size="14" font-weight="700">${lab}</text>
              <text x="${x+55}" y="140" text-anchor="middle" fill="${sub}" font-size="10">Stage ${i+1}</text>`;
    }).join('')}
    ${[0,1].map(i=>{
      const x = 130 + i*130;
      return `<path d="M ${x} 120 L ${x+18} 120 M ${x+12} 114 L ${x+18} 120 L ${x+12} 126" fill="none" stroke="${gold}" stroke-width="2.2" stroke-linecap="round"/>`;
    }).join('')}
    <text x="200" y="215" text-anchor="middle" fill="${sub}" font-size="11">→ 좌→중→우 IPO 흐름</text>
  `;
host.innerHTML = '<svg viewBox="0 0 400 240" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" style="overflow:visible">' + (typeof body === 'string' ? body : '') + '</svg>';
```

## 원본 factory (갤러리 정본 발췌)
- file: `frontend/js/graph-gallery/main.js`
- lines: 3911-4470
- gallery: https://graph.heal7.com/#SCH-02
- raw js: https://graph.heal7.com/sku/SCH-02.js

```js
`
    ${[0,1,2].map(i=>{
      const x = 20 + i*130, c=[royal,gold,rose][i], lab=['입력','처리','출력'][i];
      return `<rect x="${x}" y="60" width="110" height="120" rx="10" fill="${fill1}" stroke="${c}" stroke-width="1.5"/>
              <text x="${x+55}" y="118" text-anchor="middle" fill="${fg}" font-size="14" font-weight="700">${lab}</text>
              <text x="${x+55}" y="140" text-anchor="middle" fill="${sub}" font-size="10">Stage ${i+1}</text>`;
    }).join('')}
    ${[0,1].map(i=>{
      const x = 130 + i*130;
      return `<path d="M ${x} 120 L ${x+18} 120 M ${x+12} 114 L ${x+18} 120 L ${x+12} 126" fill="none" stroke="${gold}" stroke-width="2.2" stroke-linecap="round"/>`;
    }).join('')}
    <text x="200" y="215" text-anchor="middle" fill="${sub}" font-size="11">→ 좌→중→우 IPO 흐름</text>
  `
```

## 시나리오
- IPO (Input-Process-Output) — 시스템 동작 설명
- 비즈니스 프로세스 — 발주→생산→배송
- 데이터 파이프라인 — 수집→가공→시각화
- 면접 단계 — 서류→1차→최종

## 관련 SKU
`c-sch-5flow`, `c-sch-funnel`