Справочник
Карта кода: схема проекта из исходников
Выберите папку или zip-архив проекта — NodePanel разберёт исходники прямо в браузере и соберёт проект с досками: страницы, API, вызовы с фронта, таблицы и архитектура. Код не запускается, а файлы не покидают ваш компьютер.
Что это#
Карта кода — быстрый способ увидеть устройство проекта: новому человеку в команде, на ревью архитектуры, перед рефакторингом. NodePanel читает исходники и раскладывает найденное по доскам — дальше это обычные доски: их можно двигать, раскрашивать, комментировать и дополнять своими блоками.
Коротко о том, для кого карта кода и как устроена её защита, — на странице «Карта кода». Здесь — подробная инструкция: кнопки, шаги и ограничения.
Как запустить#
Откройте «Карта кода»
Кнопка на странице «Проекты», рядом с «Новый проект». Нужна активная подписка или пробный период.
Выберите проект
Перетащите папку проекта или zip-архив в окно — или нажмите «Выбрать папку» / «Выбрать zip». Архив — до 300 МБ, в проекте — до 50 000 файлов. Папки с зависимостями и сборкой (node_modules, .git, dist) пропускаются сами.
Дождитесь разбора
Обычно — до минуты. Ход виден по шагам: «Ищем файлы», «Читаем файлы», «Разбираем код», «Строим доски». Разбор можно отменить; дольше 3 минут он не идёт.
Проверьте предпросмотр
Окно покажет, какие доски будут созданы и сколько на них блоков и связей, какие фреймворки нашлись и сколько файлов прочитано и пропущено. Отредактируйте «Название проекта» и нажмите «Создать проект».
Браузер переспросит — это нормально#
- Число файлов в вопросе может быть большим — браузер считает и node_modules, .git, сборку. Карта кода такие папки не открывает, так что выбирайте папку всего проекта.
- Путь к папке текстом не вписать — браузер даёт странице доступ только к той папке, которую вы выбрали или перетащили в окно. Остальной диск ей не виден: это защита браузера.
- Перетащить папку тоже можно — прямо в окно «Карта кода», результат тот же, что у кнопки «Выбрать папку».
- На телефоне — только zip: выбрать папку целиком мобильные браузеры не умеют.
- Закрыли вкладку — доступа больше нет. Страница получает файлы только на время разбора и ничего не запоминает; для обновления карты папку нужно выбрать снова.
Как выглядит этот вопрос — на странице «Карта кода».
Что умеем разбирать#
| Что | Откуда |
|---|---|
| Страницы | Next.js — App и Pages Router, React Router, Vue Router и шаблоны .vue, Nuxt, SvelteKit и шаблоны .svelte, Angular, 1С-Битрикс — urlrewrite.php и страницы сайта. Маршруты страниц и переходы: ссылки в коде и шаблонах, переадресации, переходы из кода. |
| API | Express, NestJS, FastAPI, Flask, Django, Laravel, Symfony, Go — net/http, Gin, Echo, chi, Fiber, gorilla/mux, Spring и JAX-RS на Java и Kotlin, ASP.NET Core — контроллеры и Minimal API, Ruby on Rails, Rust — Axum и Actix Web. Маршруты с методами и префиксами групп и роутеров, ресурсы Laravel и Rails раскрываются в стандартные маршруты, обработчики route.ts в Next.js и файлы маршрутов Nuxt и SvelteKit. |
| Вызовы с фронта | fetch, axios, HttpClient в Angular, свои API-клиенты. Какой адрес вызывает страница или модуль — и есть ли такой маршрут на бэкенде. |
| Данные | Prisma, SQL-миграции, Django-модели, миграции и модели Laravel (Eloquent), Doctrine, GORM, JPA, Entity Framework Core, Rails — schema.rb, миграции и модели. Таблицы, поля и внешние ключи, включая связи «многие ко многим». |
| Архитектура | docker-compose, импорты JS, TS, Vue и Svelte, импорты Python, PHP, Go, Java, Kotlin, C# и Rust, компоненты 1С-Битрикс. Сервисы, образы, порты и зависимости; псевдонимы путей из tsconfig, пакеты монорепозитория, модули go.mod, пакеты и пространства имён. |
Какие доски создаются#
- Обзор — карточка на каждую доску со ссылкой на неё, «Стек» (фреймворки и языки) и «Что разобрано».
- Страницы — страница на карточке: маршрут и файл; группы по разделам сайта, связи — переходы.
- API — маршрут на карточке («GET /orders/:id»), цвет по методу: GET зелёный, POST синий, PUT и PATCH оранжевые, DELETE красный; группы по модулям. Маршрутов много — несколько досок по модулям.
- Фронт → API — слева страницы и модули фронта, справа маршруты, связи — вызовы. Вызовы, которых нет на бэкенде, — отдельной группой «Не найдены на бэкенде».
- Данные — таблица на карточке, поля списком с пометками PK и UNIQUE, связи — внешние ключи с подписью поля.
- Архитектура — сервисы из docker-compose и самые заметные зависимости между папками кода (мелкие связи не рисуются, чтобы схема читалась).
Пустых досок нет: если в проекте нет, например, базы данных, доски «Данные» не будет. Блоки разложены сами, без наложений, — переставляйте их как удобно.
Как обновлять#
Откройте проект карты
Под заголовком проекта — строка «Карта кода из … · обновлена …» и кнопка «Обновить карту кода».
Выберите новую версию проекта
Ту же папку или свежий архив. В предпросмотре — сколько досок будет обновлено.
Нажмите «Обновить карту»
В итоге — сколько блоков новых, изменённых, удалённых из кода и без изменений. У коллег открытые доски перечитаются сами.
- Ручные правки сохраняются: положение и размер блоков, цвета, комментарии, свои блоки и связи.
- Новое в коде появляется с меткой «новое».
- Исчезнувшее из кода не удаляется — получает метку «удалено из кода». Убрать такие блоки можно вручную (удалять могут «Полный доступ» и «Владелец»).
- Перед обновлением у каждой доски сохраняется версия — вернуть прежнее можно в истории версий.
- Обновлять карту может участник всего проекта с правом редактирования и активной подпиской.
Безопасность#
- Файлы не покидают ваш компьютер. Разбор идёт в браузере; на сервер уходят только готовые доски — те, что вы видели в предпросмотре.
- Код не запускается — только читается как текст. Скрипты из package.json и файлы настроек не выполняются.
- Секреты не открываются: .env, ключи и сертификаты, файлы с паролями пропускаются не читая — в отчёте только их число.
- На доски попадает только устройство проекта: имена страниц, маршрутов, таблиц и файлов. Строки из кода, параметры адресов и похожее на ключи и токены — вырезаются.
- Ссылки на блоках ставит только NodePanel — на доски этой же карты. Фото в карте нет.
- Сервер перепроверяет всё: строгая проверка каждой доски, права и подписка — заново, всё одной транзакцией. Создать или обновить карту — не чаще лимита в час и по одному запросу за раз.
Все защиты по шагам — в разделе «Безопасность» на странице карты кода.
Ограничения#
- В карте — до 24 досок, на доске — до 400 блоков. Большой проект попадёт в карту не целиком — предпросмотр предупредит жёлтой плашкой.
- Файл больше 1 МБ и сжатый код сборки не разбираются.
- Создать или обновить карту можно до 20 раз в час.
- Код читается, но не исполняется, поэтому маршруты, которые собираются на лету (в цикле, из настроек), могут не найтись.
- Языки — JavaScript, TypeScript, Python, PHP, Go, Java, Kotlin, C#, Ruby и Rust; проекты на других языках пока не разбираются.
- Доска карты не растёт бесконечно: если старых блоков «удалено из кода» стало слишком много, обновление попросит сначала убрать их с доски.
Вопросы и ответы#
Отправляется ли мой код на сервер?
Нет. Исходники разбираются в браузере на вашем компьютере. На сервер уходят только готовые доски: названия страниц, маршрутов, таблиц и путей к файлам — то, что вы видите в предпросмотре перед отправкой.
Что будет с моими правками на досках после обновления карты?
Останутся. Обновление меняет только то, что пришло из кода: новое добавляет с меткой «новое», исчезнувшее помечает «удалено из кода». Положение, цвета, комментарии и свои блоки не трогаются, а перед обновлением сохраняется версия каждой доски.
Мой фреймворк не в списке — карта получится?
Получится то, что удалось найти: архитектура по docker-compose и импортам строится для любого проекта на языках JavaScript, TypeScript, Python, PHP, Go, Java, Kotlin, C#, Ruby и Rust. Доски, для которых ничего не нашлось, не создаются.
Не нашли ответ? Напишите нам из приложения: пункт «Помощь» в боковой панели есть на каждом экране после входа. Ответ придёт на почту вашего аккаунта.