본문으로 이동
시작하기
← KLICKLIC / DIAGRAMS

연결의 모양보다, 관계의 의미부터

업무 흐름과 상태 변화를 한눈에. 관계 탐색·조건·변경 기록을 제공하는 연결 예제를 비교합니다.

이 화면의 설계 요청서 만들기 ↗

실행 예제와 설계 기준 · 완성된 서버 제품이 아닙니다.

워크플로·다이어그램 · 실제 예제의 정적 캡처
실제 블록의 정적 캡처 · 샘플 데이터
START WITH WORKING EXAMPLES

이런 구성으로 시작할 수 있어요.

03

리드 라우팅 플로우 ↗

데모 신청 폼 웹훅(demo.request), 임직원 200명 초과 조건 분기(예/아니오), Clearbit 기업 조회, HubSpot 인바운드 딜 생성 카드 노드와 실시간 SVG 데이터 패킷 흐름·우측 하단 미니맵·81% 줌 컨트롤 바를 갖춘 한글 React Flow 캔버스

DESIGN.md ↓소스 계획 ↗

이 기준으로 설계하세요.

  • 선의 방향과 라벨로 관계를 함께 설명합니다.
  • 호버 강조와 저장된 변경을 구분합니다.
  • 조건 분기와 현재 상태를 키보드로도 확인할 수 있게 합니다.

여기까지는 구분하세요.

  • 색상이나 움직임 하나로 장애·선택·상태를 구분하지 않습니다.
  • 노드에 적힌 외부 서비스 이름을 실제 연동 완료로 설명하지 않습니다.

운영 데이터와 외부 시스템 연결은 별도 구현입니다.

YOUR NEXT STEP

화면을 골랐다면,
이제 내 요구사항을 더하세요.

AI 설계 요청서 열기 ↗

다른 시작점도 살펴보세요.