Точная схема
Схему можно приближать, двигать и редактировать без потери размеров и привязок.
Онлайн-редактор электрических щитов
PowerSketch;
/* Онлайн-редактор, в котором можно собрать схему электрического щита и подготовить её к монтажу. */
[ Открыть продукт ]export default { роль: 'SaaS / Продукт / Full-stack', стек: ['Vue', 'Nuxt', 'TypeScript', 'Node.js', 'Canvas API', 'SVG', 'Go', 'PostgreSQL', 'Docker'], production: true,}
editor.png2400×1884
// 01PowerSketch в цифрах.json
- устройств в каталоге
- 2 000
- производителей
- 39
- формат схемы
- SVG
// 02Контекст.md
В PowerSketch электрик собирает щит примерно так же, как делал бы это на рабочем столе: выбирает реальные устройства из каталога, расставляет их на схеме и соединяет проводами. Из готовой схемы сервис сам собирает список устройств и таблицу соединений — ничего не нужно переносить вручную.
Сервисом пользуются электрики, интеграторы умного дома, сборщики щитов, инженеры пусконаладки и технические специалисты.
landing.png2710×1200
// 03Рабочий процесс.flow
От новой схемы до готовых документов
Все шаги связаны между собой. Пользователь один раз собирает схему, а PowerSketch использует эти данные дальше — в отчётах, общей ссылке и экспорте.
- 01
Создать проект
Все схемы хранятся в личном кабинете, где их легко найти, открыть или скопировать.
- 02
Собрать щит
Нужные устройства можно найти в каталоге и перетащить на схему.
- 03
Проложить провода
Провода соединяют конкретные контакты устройств, поэтому схема остаётся понятной и проверяемой.
- 04
Скачать отчёты
PowerSketch сам собирает таблицы с устройствами и соединениями из готовой схемы.
- 05
Показать результат
Заказчику или коллеге можно отправить ссылку на просмотр, а для работы — скачать SVG.
dashboard.png2522×1884
projects.png2522×1884
// 04Задача.issue
Сложный инженерный инструмент, в котором легко разобраться
Главная сложность — сделать точный инженерный редактор понятным в повседневной работе. Пользователь двигает устройство или провод на схеме, а каталог, контакты, слои, отчёты и экспорт должны сразу подхватить изменение и не потерять данные.
Даже большие схемы должны двигаться плавно, а экспорт — выглядеть так же, как редактор. При этом старые проекты должны продолжать открываться после обновлений, а основные функции — нормально работать на разных экранах.
ТОЧНОСТЬ / СКОРОСТЬ / СОВМЕСТИМОСТЬ / МАСШТАБ
// 05Система / Архитектура.graph
Одна схема — все данные под рукой
В центре редактора — сама схема. У каждого устройства есть размеры и контакты, у провода — начало и конец, у слоя — своё место и видимость. Поэтому одно изменение сразу видно и в редакторе, и в отчётах, и в готовом файле.
Работа со схемой происходит прямо в браузере, чтобы редактор быстро реагировал на каждое действие. Сервер хранит проекты и каталог, отвечает за вход, общие ссылки и подписки. Пользователю эта техническая граница не мешает: он просто продолжает работу с того места, где остановился.
catalog.device=>svg.scene=>project.state=>report.build=>export.svg
editor.png2400×1884
Устройства под рукой
Поиск и понятные категории помогают быстро найти нужную модель среди 2 000 устройств.
Порядок на схеме
Элементы можно группировать по слоям, временно скрывать и защищать от случайных изменений.
Без двойной работы
Устройства и провода достаточно добавить один раз — дальше они автоматически попадают в отчёты и экспорт.
library.png2400×1884
layers.png2400×1884
// 06Пользовательские устройства.schema
Если устройства нет в каталоге, его можно добавить
Достаточно указать размеры, загрузить изображение и расставить контакты. Поддерживаются PNG, JPG, SVG и WEBP до 5 МБ. Новую модель также можно предложить для общего каталога.
customDevices.png2522×1884
// 07Отчёты.table
Отчёты собираются прямо из схемы
В одном отчёте — список устройств с моделями, параметрами и количеством. В другом — все провода с маркировкой, сечением, длиной и точками подключения. Перед скачиванием можно оставить только нужные колонки.
deviceReport.png2400×1884
wireReport.png2400×1884
// 08Передача результата.output
Результат легко показать и передать дальше
Коллеге или заказчику можно отправить ссылку только для просмотра — аккаунт и доступ к редактору не нужны. Для монтажа или печати схема выгружается в SVG с нужным фоном, форматом и ориентацией листа.
sharing.png1024×560
export.png2304×1380
subscription.png2522×1884
// 09Продуктовая модель.plan
Начать можно бесплатно
Редактор и каталог доступны на бесплатном тарифе. Plus и Профессиональный нужны тем, кто ведёт больше проектов: в них выше лимиты, доступно копирование и экспорт без водяного знака.
// 10Результат.log
PowerSketch решает задачу от начала до конца
Сейчас в PowerSketch можно создать проект, собрать схему из 2 000 готовых устройств, проложить провода и получить документы для работы. Проект можно показать по ссылке или выгрузить в SVG. Всё работает в браузере — устанавливать отдельную программу не нужно.
// Моя роль
Я делаю PowerSketch целиком: продумываю сценарии, проектирую интерфейс и структуру данных, пишу frontend и backend, запускаю новые функции и поддерживаю сервис в production.
- 'Продукт',
- 'UI/UX',
- 'Frontend',
- 'Backend',
- 'Архитектура',
Стек[]
- 'Vue',
- 'Nuxt',
- 'TypeScript',
- 'Node.js',
- 'Canvas API',
- 'SVG',
- 'Go',
- 'PostgreSQL',
- 'Docker',
root@portfolio:~/contact$ ./start-conversation // Можно написать напрямую
console.log(Есть идея или задача?);
/* Напишите в двух словах, что хотите сделать и чем я могу помочь. Для начала этого вполне достаточно. */