Как я собрал схему паромных маршрутов из скриншота Google Maps. Или почему в 2026 году дизайнер уже не нужен

В посте про TTSL Ferries я обещал добавить визуальную схему линий — где какой терминал, как маршруты пересекаются. Сделал. Расскажу, как именно: там получился неожиданно лёгкий пайплайн из скриншота Google Maps, Nano Banana, онлайн-векторизатора, Claude Code и небольшого редактора, который я встрою прямо в этот пост ниже — можно будет потаскать точки и кривые своими руками. И дизайнер абсолютно не потребовался.

Шаг 1: скриншот и Nano Banana

Я сделал скриншот участка Google Maps с устьем Тежу: Лиссабон, Алмада, Баррейру, Монтижу. Этого хватает: схема не должна быть точной картой, ей нужно просто, чтобы формы берегов и положение терминалов совпадали с реальностью на глаз — а Google Maps это даёт бесплатно.

Исходный скриншот Google Maps — устье Тежу со всеми подписями районов, улиц и станций

Дальше я отдал картинку в Nano Banana и попросил убрать все надписи — названия районов, улиц, станций, всё. На выходе получилась чистая «схема»: вода, контур берега, остатки городской застройки и дорог, но без текста.

Скриншот Google Maps после чистки в Nano Banana — без подписей, но со всей городской текстурой

Шаг 2: растр в SVG

С растровой картинкой особо ничего не сделаешь. Не помасштабируешь без потери качества под разные экраны — а у меня и iPhone, и Android, и разные разрешения. Не разместишь сверху интерактивные элементы — точки, линии, тапабельные области — без отдельной геометрической разметки. Мне нужен был универсальный формат, который одинаково ляжет на любой девайс и поверх которого можно будет рисовать всё остальное. SVG — очевидный выбор.

Я прогнал картинку через один из бесплатных онлайн-сервисов растр-в-вектор (гуглить SVG 2 PNG). Сделал он это на удивление хорошо: качество высокое, никаких косяков. На выходе — настоящий вектор, который можно увеличивать до любого размера без размытия. SVG-файл со всем, что было на исходнике: контур берега, заливка воды, дороги, массивы зданий — все геометрические объекты со скриншота превратились в честные <path>.

Сырой SVG прямо после векторизатора — визуально почти как JPG, но это уже честный вектор: контур берега, вода, дороги, массивы зданий — всё разложено на отдельные <path> (файл ~580 КБ)

Шаг 3: оставляем только воду и берег

Я отдал файл Claude Code и попросил оставить только воду и контур берега, всё остальное удалить. Это та задача, под которую SVG как формат идеально подходит: текстовый XML, понятная структура, можно ходить по <path> и <polygon> и удалять то, что не нужно. Через пару итераций получилась аккуратная схема устья — вода, береговая линия, ничего лишнего.

Только вода и контур берега — после того, как Claude Code вычистил из SVG всё лишнее

Шаг 4: точки причалов

Дальше я попросил Claude расставить на карте точки терминалов по их реальным координатам — Cais do Sodré, Terreiro do Paço, Cacilhas, Seixal, Barreiro, Montijo, Trafaria, Porto Brandão, Belém. Координаты Claude взял из открытых источников и пересчитал в координаты SVG.

Расставились они, естественно, не туда, куда надо. Часть оказалась в воде, часть — в глубине суши, часть просто рядом, но не на берегу:

Точки терминалов после автоматической расстановки — большая часть лежит мимо реальных причалов

Я не стал заморачиваться с точной геопривязкой — просто пошёл по списку и говорил: «вот эту точку подвинь чуть вверх», «эту влево на пару пикселей», «эту ниже и правее». Это заняло минут десять и оказалось быстрее, чем правильно настраивать проекцию. Если задача — схема, а не карта, такой подход вполне оправдан.

Те же точки после ручной правки — теперь каждый терминал стоит ровно на своём берегу

Шаг 5: линии маршрутов

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

Часть линий прошла по суше.
Линии пересекались.
Кривые лежали не там, где хотелось.

Линии после автоматической прокладки — часть прошла по суше, часть пересеклась, кривые легли как попало

Просить Claude каждый раз чуть-чуть подвинуть контрольную точку кривой Безье — занятие на любителя. И я попросил другое.

Шаг 6: маленький редактор линий

Я попросил Claude собрать отдельную HTML-страницу — простой редактор, в котором можно подвигать всё мышкой. Карта слева, список линий справа, на каждую линию — кнопка «Copy» с готовым <path>, и общая «Copy all paths». На самой карте: большие точки — якоря (концы линии и промежуточные точки), маленькие квадраты — контрольные точки кривых Безье. Тащишь мышкой — линия пересчитывается в реальном времени.

Это оказалось гораздо удобнее, чем переписка с Claude в духе «подвинь контрольную точку маршрута Cacilhas–Cais do Sodré на 8 пикселей вверх». Я открыл страницу, потаскал точки мышкой, посмотрел, как линии ложатся на воду и где они пересекаются, поправил. Минут за пять довёл схему до состояния, когда все маршруты идут по воде, не лезут на берег и пересекаются только так, как мне хотелось:

Итоговая схема паромных маршрутов в устье Тежу

Когда всё сошлось — скопировал готовые <path> через ту же «Copy all paths» и зафиксировал в production-SVG. Сам редактор остался отдельной страницей в репозитории — пригодится, когда Transtejo откроет новый маршрут или поменяет терминал.

Кстати, вот тот же самый редактор прямо в этом посте — можно потаскать точки и кривые своими руками и почувствовать, насколько это удобнее, чем диктовать координаты текстом:

Шаг 7: тёмная тема

Картинка выше уже подстраивается под текущую тему сайта — переключите тему в шапке, и схема перерисуется. То же самое работает и в приложении: при светлой теме показывается светлая карта, при тёмной — тёмная.

Что в итоге получилось

Схема живёт в приложении на отдельном экране — открывается на весь экран, поддерживает pinch-to-zoom, pan, поворот, тап по терминалу открывает Google Maps с маршрутом до причала. Скачать для Android / скачать для iOS.

Вывод

Один. Сейчас под любую узкую задачу — почистить SVG, расставить точки, подкрутить кривые — можно за три минуты сляпать ровно тот инструмент, который нужен, не изобретая велосипед и не подбирая «универсальное решение».

В интересные времена живём, ребята...