Do you use whiteboarding / diagramming software application? Well, draw.io is one of the famous app for it and it’s free… Today we will run it as self-hosted.
Overview
DrawIO is a whiteboarding / diagramming software application. DrawIO it self is hosted and served by DrawIO team. But today we will run it as self-hosted in our machine because drawio itself is open source software.
Requisite
- Any linux OS with docker installed.
- Internet connection 😉
- (optional) Google drive account for google drive integration.
How To
Quick Start
Note that I use debian linux. You can get similar command for other linux distribution by searching from google
- Pull drawio docker image with
docker pull jgraph/drawio. - Run drawio image with command
docker run -it --rm --name="draw" -p 8080:8080 -p 8443:8443 jgraph/drawio. - Now you can start your browser and open http://localhost:8080/?offline=1&https=0 and start to create your whiteboard / diagram.
Simple right? Next step below I will show you how to integrate with google drive so you can share your diagram with your friends.
Add Google Drive Integration
You can also follow this docker-drawio README
- First, with google drive integration you need to have a domain name.
- Second, prepare your google account to use for this project. Choose you project if you have one or create new at Google API Console and create Credentials of type “Create OAuth client ID” -> Web Application.
- In the “Create OAuth client ID” configuration, enter the required information and note that “Authorized redirect URIs” is
[your-draw.io-hostname]/googleand “Authorized JavaScript origins” is[your-draw.io-hostname]. - Set the values of the generated “Client ID” and “Client secret” into environment variables DRAWIO_GOOGLE_CLIENT_ID and DRAWIO_GOOGLE_CLIENT_SECRET. Also, set DRAWIO_GOOGLE_APP_ID environment variable to your Google App ID. APP ID is the number before the dash in the CLIENT ID. For example, if CLIENT ID is 123456789-abc…, then APP ID is 123456789.
- If you want to host a draw.io viewer also, you can repeat the instruction before into DRAWIO_GOOGLE_VIEWER_CLIENT_ID, DRAWIO_GOOGLE_VIEWER_CLIENT_SECRET, and DRAWIO_GOOGLE_VIEWER_APP_ID environment variables.
- Here is the complete docker run sample =>
1docker run -d --name="draw" -p 8080:8080 -p 8443:8443 -e DRAWIO_BASE_URL="https://drawio.example.com" -e DRAWIO_GOOGLE_APP_ID="123456789" -e DRAWIO_GOOGLE_CLIENT_ID="123456789-abcdefghijklmnopqrs.....apps.googleusercontent.com" -e DRAWIO_GOOGLE_CLIENT_SECRET="ABCDEF-123465qweghj" -e DRAWIO_GOOGLE_VIEWER_APP_ID="987654321" -e DRAWIO_GOOGLE_VIEWER_CLIENT_ID="987654321-abcdefghijklmnopqrs.....apps.googleusercontent.com" -e DRAWIO_GOOGLE_VIEWER_CLIENT_SECRET="GHIJKL-6876890-xkvjhkxcvbak" -e DRAWIO_LIGHTBOX_URL="https://drawio.example.com" -e DRAWIO_SERVER_URL="https://drawio.example.com" -e DRAWIO_VIEWER_URL="https://drawio.example.com/js/viewer.min.js" jgraph/drawio
So this is it how we can self-host drawIO in our machine or server. It’s as simple as just pull docker image and run it with single command. Thank you so much for visiting my site and read my simple post 😄 . See you again next post. 👋
