Как реализовать отображение данных в виде топологической схемы в 1С

При разработке сложных систем учета оборудования, ИТ-инфраструктуры или логистических цепочек часто возникает задача визуализации связей между объектами. Обычного иерархического справочника или дерева значений бывает недостаточно для наглядного представления топологии. Рассмотрим подробнее, какие инструменты предоставляет платформа 1С и современные технологии для отрисовки интерактивных схем и графов.

Способ 1. Программное использование встроенной «Графической схемы»

Объект ГрафическаяСхема традиционно ассоциируется с бизнес-процессами, однако платформа позволяет использовать его как самостоятельный инструмент визуализации. Мы можем программно генерировать элементы схемы, задавать их координаты и связи.

Разберем основные принципы работы с этим объектом. Схема состоит из элементов (фигур) и линий (связей). Главная сложность здесь заключается в алгоритме автоматической расстановки узлов, так как 1С не умеет самостоятельно выравнивать элементы, чтобы они не перекрывали друг друга.

Проанализируем примерный алгоритм создания узла:

// Создание новой графической схемы
Схема = Новый ГрафическаяСхема;

// Добавление декорации (узла схемы)
Узел = Схема.Элементы.Добавить(Тип("ДекорацияГрафическойСхемы"));
Узел.Текст = "Сервер №1";
Узел.Лево = 100;
Узел.Верх = 50;
Узел.Ширина = 150;
Узел.Высота = 60;

// Добавление линии связи
Линия = Схема.Элементы.Добавить(Тип("ЛинияГрафическойСхемы"));
Линия.ИсходныйЭлемент = ПервыйУзел;
Линия.КонечныйЭлемент = ВторойУзел;

Преимущества: это «родной» объект 1С, он быстро работает в тонком клиенте и не требует установки стороннего ПО.

Недостатки: необходимость написания собственного математического движка для компоновки (layout) элементов на плоскости.

Способ 2. Использование JavaScript-библиотек в Поле HTML-документа

Этот метод считается наиболее перспективным и современным. Мы используем ПолеHTMLДокумента на форме 1С, чтобы внедрить в интерфейс мощные графические движки на языке JavaScript. Рассмотрим самые популярные библиотеки:

• Vis.js (Network): идеальный вариант для сетевых топологий. Библиотека сама рассчитывает физику взаимодействия узлов (они «расталкивают» друг друга), что позволяет строить красивые схемы автоматически.
• D3.js: «тяжелая артиллерия» для визуализации данных. Позволяет создавать любые кастомные графы с анимацией.
• Cytoscape.js: специализированная библиотека для анализа графов и сложных сетей.

Разберем по шагам, как организовать взаимодействие между 1С и JavaScript. Сначала мы подготавливаем данные в формате JSON:

// Формируем структуру данных для передачи в JS
ДанныеГрафа = Новый Структура;
ДанныеГрафа.Вставить("nodes", СписокУзлов); // Массив структур с ID и Label
ДанныеГрафа.Вставить("edges", СписокСвязей); // Массив структур From, To

ТекстJSON = СформироватьJSON(ДанныеГрафа);
// Передаем данные в HTML-поле через функцию вызова JS
Элементы.ПолеСхемы.Документ.defaultView.loadData(ТекстJSON);

Выясним, как обеспечить интерактивность. Используя механизм ПриНажатии или событие onclick внутри HTML, мы можем передавать информацию обратно в 1С (например, через window.external), чтобы при клике на сервер в схеме открывалась карточка справочника Оборудование.

Способ 3. Интеграция с GraphViz

Посмотрим на классический инструмент визуализации графов — GraphViz. Он использует специальный декларативный язык описания связей — DOT. Это отличное решение, если нам нужна статичная, но идеально выстроенная схема.

Проанализируем ситуацию: 1С генерирует текстовый файл в формате DOT, вызывает консольную утилиту dot.exe, которая сохраняет результат в виде картинки (PNG или SVG), а затем эта картинка отображается на форме.

Пример описания структуры на языке DOT:

digraph G {
    "Сервер БД" -> "Коммутатор 1";
    "АРМ Бухгалтера" -> "Коммутатор 1";
    "Коммутатор 1" -> "Маршрутизатор";
}

Преимущества: лучшие в индустрии алгоритмы автоматической компоновки графов без пересечения линий.

Недостатки: требуется установка дополнительного ПО на компьютер пользователя или сервер.

Способ 4. Генерация SVG-изображений

Если нам нужна простая схема без сложной физики, мы можем программно сформировать файл формата SVG (Scalable Vector Graphics). Поскольку SVG — это по сути XML-документ, мы можем собрать его обычными средствами работы с текстом или через ЗаписьXML.

Рассмотрим пример формирования простого узла:

ТекстSVG = "<svg xmlns='http://www.w3.org/2000/svg'>
           |<circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' />
           |<text x='30' y='55' fill='white'>Узел</text>
           |</svg>";
Элементы.ПолеСхемы.УстановитьТекст(ТекстSVG);

Этот способ крайне легок, не требует внешних компонент и отлично подходит для отрисовки небольших иерархических структур в отчетах.

Способ 5. Взаимодействие с внешними приложениями (Visio)

В некоторых случаях целесообразно использовать COM-интерфейс или API сторонних специализированных программ, таких как Microsoft Visio. Мы можем через код 1С управлять объектом Visio, создавать страницы, перетаскивать на них мастер-фигуры и соединять их коннекторами.

Разберем пример создания объекта:

Попытка
    VisioApp = Новый COMОбъект("Visio.Application");
    Документ = VisioApp.Documents.Add("");
    Страница = VisioApp.ActivePage;
    // Код по созданию фигур и связей
Исключение
    Сообщить("Visio не установлен");
КонецПопытки;

Этот метод подходит для формирования регламентированной документации, которую пользователь потом сможет отредактировать вручную.

Итоги и рекомендации

Выбор метода зависит от ваших целей:

1. Если важна интерактивность и работа в веб-клиенте — выбирайте JavaScript-библиотеки (Vis.js).
2. Если нужно быстро отрисовать статичную схему в отчете без лишних файлов — используйте SVG.
3. Если требуется сложная топология с сотнями узлов, где важно отсутствие пересечений — используйте GraphViz.
4. Если вы хотите оставаться в рамках чистого 1С без внешних технологий — используйте Графические схемы.

В современных реалиях связка 1С + Поле HTML-документа + Vis.js является наиболее универсальной, так как обеспечивает высокую производительность и профессиональный внешний вид интерфейса.