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

Иллюстрация: логотип и интерфейс ONLYOFFICE Docs

ONLYOFFICE Docs — это набор веб‑редакторов с открытым исходным кодом под лицензией GNU AGPL v3.0. Он включает просмотрщики и совместные редакторы для текстов, таблиц и презентаций, совместимые с форматами OOXML. Плагин draw.io (diagrams.net) добавляет мощный редактор диаграмм прямо в интерфейс ONLYOFFICE.

Зачем подключать draw.io к ONLYOFFICE Docs

Упрощает рабочий процесс: не нужно покидать редактор.
Поддерживает множество типов диаграмм: блок‑схемы, майнд‑карты, UML, сетевые схемы и др.
Подходит для интеграции с Nextcloud, Redmine, Seafile, Jira, Moodle и собственными решениями.

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

Самый простой способ — запустить готовый контейнер Docker. На сервере выполните:

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

Эта команда запускает последний образ DOCUMENT SERVER и привязывает порт 80. Подробные инструкции можно найти в HowtoForge и официальной документации ONLYOFFICE.

Важно

Убедитесь, что порт 80 свободен на сервере.
Для production рекомендуем проксировать через nginx и настраивать TLS.

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

Плагин доступен на GitHub. Существуют два основных способа установки: поместить код в папку sdkjs-plugins или добавить путь к config.json в конфиг редактора.

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

Поместите папку с кодом плагина в каталог ONLYOFFICE Docs и перезапустите сервис:

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

Для отладки запустите контейнер с примонтированной папкой sdkjs-plugins:

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

Примечание

Путь /absolutly_path_to_work_dir замените на абсолютный путь в вашей системе.
Контейнер в примере использует образ onlyoffice/documentserver-ee:latest; для CE используйте соответствующий образ.

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

Если вы управляете инициализацией редактора через Docs API, добавьте путь к config.json плагина в параметр plugins.pluginsData внутри конфигурации DocEditor. Пример фрагмента конфигурации (сохраните формат точно как в вашем коде):

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. Замените строку на путь к вашему config.json, например https://your-server/plugin/config.json.

Важно

GUID плагина draw.io: asc.{DB38923B-A8C0-4DE9-8AEE-A61BB5C901A5}. Добавьте его в список autostart, если хотите автозапуск.
Если в файле есть тестовый пример, замените ссылку /etc/onlyoffice/documentserver-example/local.json на путь к конфигу плагина.

Шаг 3: Запустите плагин draw.io

После успешной установки в редакторе появится вкладка Plugins и иконка draw.io. Нажмите на неё, чтобы открыть редактор диаграмм. Создайте диаграмму или вставьте уже готовую. Когда закончите, нажмите кнопку “Save & Exit”, а затем “Ok”. Диаграмма появится в документе как редактируемый объект. Для дальнейших правок просто кликните по диаграмме.

Иконка плагина ONLYOFFICE Draw.io на вкладке Плагины

Технические детали и рекомендации

Форматы: draw.io поддерживает собственный XML‑формат и экспорт в PNG/SVG. При вставке в документ сохраняется связь с редактором, поэтому диаграмму можно редактировать позже.
Права доступа: убедитесь, что веб‑сервер и Docker контейнер имеют доступ к папкам с плагинами и к конфигурационным файлам.
HTTPS: при использовании плагина из внешнего URL применяйте HTTPS для config.json и ресурсов плагина, иначе браузеры могут блокировать загрузку.

Когда интеграция может не сработать

Плагин не показывается в интерфейсе: проверьте путь в pluginsData и GUID в autostart. Перезапустите сервис и очистите кэш браузера.
Конфликт версий: если у вас enterprise‑образ, убедитесь, что версия плагина совместима с версией documentserver.
Блокировка ресурсов: проверьте CORS и Content Security Policy на сервере; добавьте разрешения для домена, где хостится плагин.

Быстрый чек‑лист для администратора

Docker контейнер ONLYOFFICE Docs запущен.
Папка sdkjs-plugins содержит плагин или pluginsData указывает на config.json.
GUID плагина добавлен в autostart при необходимости.
Сертификаты TLS настроены для внешних ресурсов плагина.
CORS/CSP настроены корректно.

Чек‑лист для конечного пользователя

Откройте документ в ONLYOFFICE Docs.
Перейдите во вкладку Plugins.
Нажмите иконку draw.io.
Создайте диаграмму и нажмите “Save & Exit”.
Подтвердите вставку нажатием “Ok”.

Модель принятия решения: использовать плагин или внешнее приложение

Нужна быстрая правка в документе → используйте плагин.
Требуется сложная многопользовательская работа над диаграммой с отдельной историей версий → рассматривайте внешнее хранилище для диаграмм и ссылку в документе.

Устранение неполадок — мини runbook

Плагин не отображается
- Перезапустите documentserver.
- Очистите кэш браузера, откройте в режиме инкогнито.
- Проверьте логи контейнера docker logs .
Ошибки при загрузке config.json
- Откройте URL config.json в браузере. Должен возвращаться корректный JSON.
- Проверьте HTTPS и CORS.
Диаграмма не вставляется
- Убедитесь, что документ поддерживает вложения. Попробуйте небольшой тестовый документ.

Совместимость и миграция

Плагин ориентирован на браузерные версии ONLYOFFICE Docs. Перед массовой разверткой протестируйте на staging окружении.
При обновлении documentserver сначала проверяйте совместимость плагина на тестовом сервере.

Краткое резюме

Интеграция draw.io в ONLYOFFICE Docs позволяет удобно создавать и править диаграммы прямо в документе. Вы можете установить плагин через sdkjs-plugins или добавить путь к config.json в конфиг документа. Проверьте GUID, права доступа и настройки HTTPS/CORS. В большинстве случаев проблемы решаются перезапуском и проверкой логов.

Важно: прежде чем менять продакшн‑настройки, протестируйте установку на тестовом сервере.

Справочная информация

GUID плагина: asc.{DB38923B-A8C0-4DE9-8AEE-A61BB5C901A5}
Команда запуска Docker: sudo docker run -i -t -d -p 80:80 –restart=always onlyoffice/documentserver

Глоссарий