📊 Drawio Integration

Drawio is a free and open-source online diagramming tool. MrDoc supports integrating the Drawio graphic editor to create Drawio documents.

## 1. Deploying Drawio

Before integrating Drawio, you need to deploy the Drawio service yourself. The following two deployment methods are introduced:

### 1.1 Direct Deployment via Baota

Download the latest `war` format installation package from the Drawio GitHub repository (https://github.com/jgraph/drawio/releases):

![](/media/202511/673fa0074a404ba4af237428d5aaae4f7782.png)

Then upload it to the server and extract it to the `/www/` directory:

![](/media/202511/8d82e08c4252433aa2991c3b3c6093a91943.png)

Next, add a site and modify the `root` path in the site configuration file to `/www/drawio`:

![](/media/202511/1558b86d06974d66999683a37b96fe0a2159.png)

After this, accessing the domain will display the familiar Drawio interface.

### 1.2 Docker Deployment

If you prefer containerized deployment, execute the following command to run a Drawio service on port 8080:

```
docker run -d --restart=always --name="draw" -p 8080:8080 jgraph/drawio
```

## 2. Integrating Drawio

Once Drawio is deployed, navigate to the backend management page - Site Management - Site Settings - Document Settings, and fill in the Drawio address in the Drawio configuration form:

![](/media/202511/12b03abcf0774a959300993f0b6a45ee4098.png)

Then, from the "New Document" dropdown button on the homepage or within a document, you can select "Drawio" to create a new Drawio document:

![](/media/202511/6e9c74510bbe4690930bc2a3904b265f4064.png)

You can then create various types of diagrams in the Drawio editor:

![](/media/202511/a3a04ed573734a4784d4652e10b390368302.png)