Components

Flow Node

플로우 편집기의 작업 단위 카드입니다. 좌우 포트로 연결됩니다.

AI Agent

환불 상담 응대 · Qwen3.5-9B

Tool

주문 조회 (get_order)

코드 보기

<div class="tn-node sel">
  <div class="nh"><span class="nd"></span>노드 타입</div>
  <div class="nb">설명 한 줄</div>
  <span class="pt in"></span><span class="pt out"></span>
</div>

Variants

이름	설명	미리보기
기본	hover 시 파랑 테두리	Say
선택(sel)	파랑 테두리 + 3px 링	Tool
타입 점	헤더 좌측 8px 사각 — 타입별 색

Guidelines

✓ Do

노드 폭 190px 고정 (캔버스 정렬)
본문은 설명 한 줄 + 핵심 설정 한 줄까지

✕ Don't

노드 안에 버튼·입력 금지 (설정은 Side Panel)
높이를 내용에 따라 크게 늘리지 않는다

Specification

속성	토큰/값	비고
`폭`	`190px 고정`
`선택 링`	`0 0 0 3px var(--primary-muted)`
`포트`	`10px 원 / ±5px 돌출`