Создай страницу по url flow На нем должна стоять библиотека https://vueflow.dev/ Схему надо собирать из такого json Ниже пример с поясненями { \"messages\": [ { \"id\": 45140726, //НОМЕР БЛОКА \"condition\": \"Условие в блоке\", \"answer\": \"Блок первостепенное условия Тип блока 4. цвет блока зеленый. Это поле в котором мы добавляем текст для клиента\", \"description\": \"Описания блока\", \"x\": 330, \"y\": 275, \"message_type\": 4, \"created_at\": \"2025-04-23T21:23:13.214+03:00\", \"updated_at\": \"2025-04-23T22:15:53.095+03:00\", \"attachment_url\": \"урл влодения\", \"attachment_type\": \"\", \"black_list\": \"УСЛОВИЯ КОТРЫЕ ПРОПУСКАЕМ\", \"comparision_method\": 0, 0 - игнорируя ошибки и не точности, не обращаем на размер шрифта, 1 - ключевых словб 2 - полное совпадение, 4 - регулярка \"buttons\": \"кнопки для блока\", \"variables\": \"Калькулятор для доп функций, текстовое поле\", \"compare_variable\": \"Перменная для сравнения\", \"priority\": 10, //ПРИОРИТЕ БЛОКА \"enable_markdown\": false, //ТОГЛ ВЫКЛЮЧАТЕЛЬ markdown \"enable_html\": false //ТОГЛ ВЫКЛЮЧАТЕЛЬ html }, { \"id\": 45143107, \"project_id\": 617376, \"condition\": \"\", \"answer\": \"Не состояние блок. Отправка сообщений. Цвет блока серый\", \"description\": \"\", \"x\": 540, \"y\": 275, \"message_type\": 6, \"created_at\": \"2025-04-23T22:27:27.886+03:00\", \"updated_at\": \"2025-04-23T22:28:43.772+03:00\", \"attachment_url\": \"\", \"attachment_type\": \"\", \"black_list\": \"\", \"comparision_method\": 0, \"buttons\": \"\", \"variables\": \"\", \"compare_variable\": \"\", \"priority\": 10, \"enable_markdown\": false, \"enable_html\": false }, { \"id\": 45143144, \"project_id\": 617376, \"condition\": \"Условие\", \"answer\": \"Тут текст отправки клиенту. Цвет блока темно серый\", \"description\": \"\", \"x\": 100, \"y\": 280, \"message_type\": 5, \"created_at\": \"2025-04-23T22:28:29.380+03:00\", \"updated_at\": \"2025-04-23T22:28:32.922+03:00\", \"attachment_url\": \"\", \"attachment_type\": \"\", \"black_list\": \"\", \"comparision_method\": 0, \"buttons\": \"\", \"variables\": \"\", \"compare_variable\": \"Перменная для сравнения\", \"priority\": 10, \"enable_markdown\": false, \"enable_html\": false }, { \"id\": 45140728, \"project_id\": 617376, \"condition\": \"#{none}\", \"answer\": \"Блок состояние диалог. Цвет белый\", \"description\": \"\", \"x\": 330, \"y\": 400, \"message_type\": 0, \"created_at\": \"2025-04-23T21:23:19.350+03:00\", \"updated_at\": \"2025-04-23T22:29:23.940+03:00\", \"attachment_url\": \"\", \"attachment_type\": \"\", \"saved_variables\": \"\", \"black_list\": \"\", \"comparision_method\": 0, \"buttons\": \"\", \"variables\": \"калькулятор, доп функции для работы\", \"compare_variable\": \"Перменная для сравнения\", \"priority\": 10, \"enable_markdown\": false, \"enable_html\": false } ], \"connections\": [ { \"id\": 43669920, НОМЕР СТРЕЛКИ \"message_a_id\": 45140726, БЛОК ИЗ КОТРОГО СТРЕЛКА \"message_b_id\": 45140728, БЛОК КУДА ВЕДЕТ СТРЕЛКА \"vertices\": \"[{\"x\":250,\"y\":155}]\", ДОПОЛНИТЕЛЬНЫЕ СЛОМЫ СТРЕЛКИ \"description\": \"\", ОПИСАНИЕ \"timeout\": \"\", ВРЕМЯ \"timeout_type\": 1, ВРЕМЕННАЯ ЕДИНИЦА \"condition\": \"условие в стрелке\", \"read_data\": true, ТОГЛ ВЫКЛЮЧАТЕЛЬ СОХРАНЯТЬ ЛИ ЗНАЧЕНИЕ ПЕРМЕННОЙ \"field_name\": \"пользватель вводит данные КАКОЕ ИМЯ ПЕРЕМЕННОЙ\", \"send_time\": \"\", ПОЛЯ ДЛЯ ВРЕМЕНИ \"send_date\": \"\", ПОЛЕ ДЛЯ ДАТЫ \"compare_variable\": \"ПЕРМЕННАЯ ДЛЯ СРАВНЕНИЯ\", \"black_list\": \"ТЕКСТ КОТРЫЙ НЕ ПРОПУСКАЕМ\", \"comparision_method\": 0, 0 - игнорируя ошибки и не точности, не обращаем на размер шрифта, 1 - ключевых словб 2 - полное совпадение, 4 - регулярка \"delete_other_tasks\": false, ТОГЛ ВЫКЛЮЧАТЕЛЬ \"priority\": 10 ПРИОРИТЕТ }, { \"id\": 43671982, \"message_a_id\": 45140726, \"message_b_id\": 45143107, \"vertices\": \"\", \"description\": null, \"timeout\": null, \"timeout_type\": 1, \"condition\": null, \"read_data\": false, \"field_name\": null, \"send_time\": null, \"send_date\": null, \"compare_variable\": null, \"black_list\": null, \"comparision_method\": 0, \"delete_other_tasks\": true, \"priority\": 10 } ] }