Интеграция draw.io в ONLYOFFICE Docs

ONLYOFFICE Docs — это набор веб-приложений с открытым исходным кодом под GNU AGPL v3.0: просмотровщики и совместные редакторы текстов, таблиц и презентаций, совместимые с OOXML. Draw.io (diagrams.net) — свободный инструмент для построения диаграмм: блок-схем, майндмэп, организационных схем, UML и сетевых схем.

В этом руководстве вы научитесь делать сервис draw.io доступным непосредственно в редакторе ONLYOFFICE Docs с помощью плагина.

Что понадобится

• Сервер с установленным ONLYOFFICE Docs (доступ по HTTP/HTTPS).
• Доступ к файловой системе сервера или к конфигурационным файлам ONLYOFFICE.
• Права root или пользователь Docker с правами запуска контейнеров.

Важно: сохраните резервную копию конфигурации ONLYOFFICE перед изменениями.

Шаг 1: Установка ONLYOFFICE Docs

Проще всего использовать Docker для быстрого развёртывания. На сервере выполните:

sudo docker run -i -t -d -p 80:80 --restart=always onlyoffice/documentserver

Если вы уже используете другой порт или прокси (Nginx, Traefik), скорректируйте сопоставление портов и конфигурацию прокси. Подробные инструкции есть в официальных гайдах и в HowtoForge.

Шаг 2: Установка плагина draw.io

Плагин доступен на GitHub. Есть два способа ручной установки: через папку sdkjs-plugins и через конфигурационный файл config.json.

Установка через папку sdkjs-plugins

1. Скопируйте папку с кодом плагина в каталог ONLYOFFICE Docs plugins:

var/www/onlyoffice/documentserver/sdkjs-plugins/

2. Перезапустите сервис ONLYOFFICE или контейнер Docker с подключённой папкой. Пример для отладки, когда вы монтируете плагин из локальной директории:

# docker run -itd -p 80:80 -v /absolutly_path_to_work_dir:/var/www/onlyoffice/documentserver/sdkjs-plugins/plugin onlyoffice/documentserver-ee:latest

Совет: в контейнерном окружении используйте привязку тома (-v) для быстрой разработки и тестирования изменений плагина.

Установка через config.json

В конфигурации ONLYOFFICE Docs добавьте путь к config.json плагина в параметр plugins.pluginsData. Пример инициализации редактора с подключаемыми плагинами:

var docEditor = new DocsAPI.DocEditor("placeholder", {  
    "editorConfig": {  
        "plugins": {  
            "autostart": [  
                "asc.{0616AE85-5DBE-4B6B-A0A9-455C4F1503AD}",  
                "asc.{FFE1F462-1EA2-4391-990D-4CC84940B754}",  
                ...  
            ],  
            "pluginsData": [  
                "https://example.com/plugin1/config.json",  
                "https://example.com/plugin2/config.json",  
                ...  
            ]  
        },  
        ...  
    },  
    ...  
});

Здесь example.com — адрес сервера с установленным ONLYOFFICE Docs, а https://example.com/plugin1/config.json — путь к конфигу плагина.

GUID плагина draw.io: asc.{DB38923B-A8C0-4DE9-8AEE-A61BB5C901A5}.

Если в базовом файле идёт тестовый пример, замените строку /etc/onlyoffice/documentserver-example/local.json на путь к config.json вашего плагина.

Шаг 3: Запуск и использование плагина draw.io

После успешной установки перезапустите ONLYOFFICE Docs. В редакторе откройте вкладку “Плагины”. Там появится иконка draw.io — нажмите на неё, чтобы открыть окно создания диаграммы. Создайте диаграмму или вставьте существующую. По завершении нажмите Save & Exit, затем Ok — диаграмма вставится в документ. Для редактирования повторно кликните по диаграмме.

Важно: при первом запуске убедитесь, что браузер не блокирует попапы и внешние ресурсы, если config.json ссылается на внешние URL.

Типичные проблемы и отладка

• Плагин не отображается: проверьте, что путь к config.json корректен и доступен по сети; убедитесь, что GUID плагина включён в autostart, если требуется автозапуск.
• Ошибки CORS: при загрузке конфигурации с другого домена убедитесь, что сервер выдаёт заголовки CORS для запросов от вашего ONLYOFFICE сервера.
• Плагин загрузился, но при сохранении диаграммы она не вставляется: проверьте консоль браузера и логи ONLYOFFICE на предмет ошибок; убедитесь, что форматы и MIME-типы поддерживаются.
• Проблемы с контейнерными томами: проверьте права доступа на файлы плагина внутри контейнера и владельца файлов.

Совет по логированию: включите детальный лог в ONLYOFFICE и проверьте /var/log/onlyoffice или вывод docker logs для контейнера.

Альтернативные подходы

• Встраивание внешнего редактора: вместо плагина можно хранить диаграммы как файлы .drawio и открывать их в отдельном экземпляре draw.io. Минус — уход из интерфейса редактора.
• Серверный конвертер: генерировать изображения диаграмм на сервере и вставлять их как изображение (подходит для статичных диаграмм).
• Использовать другие плагины/сервисы диаграмм, если требования безопасности запрещают подключать draw.io.

Роли и чек-листы

Администратор

• Сделать бэкап config.json и других конфигурационных файлов.
• Проверить доступность URL плагина и права файлов.
• Настроить CORS и HTTPS, если нужно.

Разработчик/интегратор

• Тестировать плагин в изолированной среде с монтированием sdkjs-plugins.
• Отлаживать через консоль браузера и docker logs.
• Поддерживать версионность плагина и конфигов.

Конечный пользователь

• Открыть вкладку Плагины и выбрать draw.io.
• Создать диаграмму, нажать Save & Exit → Ok.
• При проблемах обратиться к администратору с указанием времени и шага.

Методология внедрения (мини-план)

1. Тестовая среда: разверните копию ONLYOFFICE Docs в тестовой среде.
2. Установка плагина: установите через sdkjs-plugins и/или config.json.
3. Проверка: проверьте отображение и сохранение диаграмм, протестируйте в разных браузерах.
4. Безопасность: проверьте CORS, Content Security Policy и права файлов.
5. Перенос в прод: перенесите изменения на продуктив после проверки.

Краткий глоссарий

• ONLYOFFICE Docs — веб-редакторы документов и среда для совместной работы.
• draw.io (diagrams.net) — веб-приложение для создания диаграмм.
• sdkjs-plugins — папка для размещения плаги-скриптов в ONLYOFFICE.
• config.json — файл конфигурации плагина, указывающий параметры загрузки и инициализации.

Итог

Вы успешно интегрировали draw.io в ONLYOFFICE Docs, что позволяет создавать диаграммы не покидая редактора. Для стабильной работы следуйте чек-листам, используйте тестовую среду и проверяйте CORS/права доступа.

Важно: при корпоративном использовании учитывайте требования безопасности и внутренние политики по подключению внешних ресурсов.

Ключевые действия: установить ONLYOFFICE, разместить плагин (sdkjs-plugins или config.json), перезапустить сервис и протестировать вставку диаграмм.