П.ВИН
Tool

KP Generator — Tool из портфолио Паши Вина

Коллаборативный конструктор карт путешествия клиента с real-time редактированием, heatmap воронки и режимом «что если?». Drag-and-drop ноды, анимированные связи, мгновенный экспорт.

01. КатегорияTool
02. РольFull-stack, Product
03. Датаянв 2026

Что это?

Коллаборативный конструктор карт путешествия клиента с real-time редактированием, heatmap воронки и режимом «что если?». Drag-and-drop ноды, анимированные связи, мгновенный экспорт.

Какую задачу решает?

Статичная схема в Figma → живая интерактивная карта с совместным редактированием

Как реализовано?

Реализовано на стеке: React Flow, Supabase Realtime, Next.js, TypeScript. Интерактивный CJM с автоматическим выявлением узких мест, heatmap и коллаборацией через Supabase Realtime.

React FlowSupabase RealtimeNext.jsTypeScripthtml-to-imageTailwind CSSReact FlowSupabase RealtimeNext.jsTypeScripthtml-to-imageTailwind CSSReact FlowSupabase RealtimeNext.jsTypeScripthtml-to-imageTailwind CSSReact FlowSupabase RealtimeNext.jsTypeScripthtml-to-imageTailwind CSS
Команды тратят дни на рисование CJM в статичных инструментах, которые невозможно анализировать и неудобно обновлять. Цель — дать живой интерактивный инструмент, который сам находит узкие места и позволяет всей команде работать с картой одновременно.

Вызов

CJM без динамики

Команды рисуют карты клиентского пути в статичных инструментах — их сложно обновлять, анализировать и редактировать совместно.

  • — Статичные схемы в Figma или Miro не показывают узкие места воронки автоматически
  • — Нет режима «что если?» — нельзя быстро проверить гипотезы об изменении этапов
  • — Совместное редактирование в реальном времени недоступно в большинстве инструментов

Решение

Живая карта

Интерактивный CJM с автоматическим выявлением узких мест, heatmap и коллаборацией через Supabase Realtime.

  • + React Flow обеспечивает drag-and-drop построение карты с анимированными связями
  • + Heatmap и bottleneck detection автоматически подсвечивают проблемные этапы воронки
  • + Supabase Realtime синхронизирует изменения между всеми участниками без перезагрузки

Архитектура & Стек

Mindmap

[ Mindmap Процессов / v2.0 ]
NODE.01

Flow Canvas

Визуальный редактор
React Flow · Drag-and-drop · Animated Edges

NODE.02

Analytics Layer

Анализ воронки
Heatmap · Bottleneck Detection · What-if Mode

NODE.03

Realtime Sync

Совместная работа
Supabase Realtime · PostgreSQL

NODE.04

Export Engine

Экспорт карты
html-to-image · Next.js

COREEngine

Смоделировано 100 предпринимателями

Бизнес Импакт

Real-time

совместное редактирование

Авто

выявление узких мест

1 клик

экспорт в изображение

Следующий кейс

Twenty CRM →