Seamless Integration Guide: Combining ONLYOFFICE Docs with draw.io/diagrams.net

ONLYOFFICE Docs is an open-source office suite distributed under GNU AGPL v3.0. It comprises web-based viewers and collaborative editors for text documents, spreadsheets, and presentations compatible with OOXML formats.

ONLYOFFICE Docs can be integrated with various cloud services such as Nextcloud, Redmine, Seafile, Jira, Moodle, etc., and embedded into your own solution. The editors can also be used as a part of the complete productivity solution, ONLYOFFICE Workspace.

Draw.io (diagrams.net) is an open-source diagramming app for teams, which allows you to create a wide variety of diagrams, including flow charts, mind maps, org charts, Venn diagrams, infographics, network and architecture diagrams, UML diagrams, and others.

This guide will show you how to make the draw.io service available directly within ONLYOFFICE Docs using a plugin.

Step 1: Install ONLYOFFICE Docs

The easiest way to install the latest version of the suite with all its dependencies is to use Docker. Execute the following command:

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

You can find detailed installation instructions in this HowtoForge tutorial.

Step 2: Install the Plugin

Download the plugin from GitHub and proceed with a manual installation in one of the following ways.

Method 1: Using the sdkjs-plugins Folder

Place the plugin code folder into the ONLYOFFICE Docs directory and restart the service:

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

For debugging purposes, start ONLYOFFICE Docs with the sdkjs-plugins folder using this command:

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

Method 2: Using the config.json File

In ONLYOFFICE Docs config, add the path to the respective config.json file of the draw.io plugin under the plugins.pluginsData parameter:

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",
                ...
            ]
        },
        ...
    },
    ...
});

Note: Replace example.com with your server’s name, and provide the correct path to the plugin.

The draw.io plugin has a GUID of asc.{DB38923B-A8C0-4DE9-8AEE-A61BB5C901A5}.

If your file contains a test example, replace /etc/onlyoffice/documentserver-example/local.json with the plugin’s config.json file path.

Step 3: Start the Draw.io Plugin

Once the draw.io plugin is successfully installed, an icon will appear on the Plugins tab. Click on it to create a new diagram or import one from available resources.

When finished, click “Save & Exit,” and then “OK” to embed the diagram into your document. To make further edits, simply click on the diagram.

Now, you can effortlessly create, edit, and integrate diagrams into your documents without leaving the editor or opening additional applications.

FAQs

What is ONLYOFFICE Docs?

ONLYOFFICE Docs is an open-source office suite that includes web-based viewers and collaborative editors for documents, spreadsheets, and presentations, compatible with OOXML formats.

Can the draw.io plugin be used with other platforms?

Yes, the draw.io plugin is open-source and can be integrated with other platforms that support ONLYOFFICE Docs.

What diagrams can I create with the draw.io plugin?

You can create various diagrams, including flow charts, mind maps, organizational charts, Venn diagrams, infographics, network diagrams, architecture diagrams, UML diagrams, etc.

Is Docker the only method to install ONLYOFFICE Docs?

No, while Docker is the simplest method, ONLYOFFICE Docs can also be installed on various operating systems by following different installation guides available online.