1 line
15 KiB
JSON
Executable File
1 line
15 KiB
JSON
Executable File
{"title":"","byline":null,"dir":null,"lang":null,"content":"<div id=\"readability-page-1\" class=\"page\"><div data-hpc=\"true\"><article><p dir=\"auto\">This docker compose file runs draw.io diagram editor without depending on any draw.io online services (e.g., export service, plantUml, ...) and with support of Google Drive, Microsoft OneDrive, ...</p>\n<p dir=\"auto\"><h3 dir=\"auto\" tabindex=\"-1\">Adding fonts to improve generated PDFs and images</h3><a href=\"#adding-fonts-to-improve-generated-pdfs-and-images\" aria-label=\"Permalink: Adding fonts to improve generated PDFs and images\" id=\"user-content-adding-fonts-to-improve-generated-pdfs-and-images\"></a></p>\n<p dir=\"auto\">The docker-compose file bind the <code>fonts</code> volume into the running container system fonts.</p>\n<p dir=\"auto\">The best option for Windows users is to copy the contents of <code>Windowsdrive:/Windows/Fonts</code> into <code>fonts</code> folder. These fonts are copyrighted and cannot be re-distributed freely.</p>\n<p dir=\"auto\"><h2 dir=\"auto\" tabindex=\"-1\">Configuration</h2><a href=\"#configuration\" aria-label=\"Permalink: Configuration\" id=\"user-content-configuration\"></a></p>\n<p dir=\"auto\">You can customize the application by setting the following environment variables.</p>\n<ul dir=\"auto\">\n<li><code>DRAWIO_SERVER_URL</code>: Your deployment base URL. For example, <code>https://drawio.example.com/</code> or <code>https://www.example.com/drawio/</code> if it is deployed into a folder. <strong>Note</strong>: Must end with <code>/</code></li>\n<li><code>DRAWIO_BASE_URL</code>: Your deployment base URL but used with the viewer, lightbox and embed. Usually the same as <code>DRAWIO_SERVER_URL</code> but does <strong>not</strong> end with <code>/</code>.</li>\n<li><code>DRAWIO_CSP_HEADER</code>: (Optional) Your website Content-Security-Policy if you want to customize it.</li>\n<li><code>DRAWIO_VIEWER_URL</code>: (Optional) If you want to host a draw.io viewer also, set the viewer URL. For example, <code>https://drawio.example.com/js/viewer.min.js</code></li>\n<li><code>DRAWIO_LIGHTBOX_URL</code>: (Optional) If you want to host a draw.io viewer also, set the lightbox URL. For example, <code>https://drawio.example.com</code></li>\n<li><code>DRAWIO_CONFIG</code>: (Optional) draw.io configuration JSON. <a rel=\"nofollow\" href=\"https://www.drawio.com/doc/faq/configure-diagram-editor\">Documentation</a></li>\n<li><code>DRAWIO_USE_HTTP</code>: (Optional and INSECURE) If your setup uses http only and you understand the risks (for example, sending OAuth tokens over http), set <code>DRAWIO_USE_HTTP=1</code>. <strong>Caution: Use at your own risk</strong>.</li>\n</ul>\n<p dir=\"auto\"><h2 dir=\"auto\" tabindex=\"-1\">Google Drive</h2><a href=\"#google-drive\" aria-label=\"Permalink: Google Drive\" id=\"user-content-google-drive\"></a></p>\n<p dir=\"auto\">You will need to create a project at <a rel=\"nofollow\" href=\"https://console.developers.google.com/apis\">Google API Console</a> and create <a rel=\"nofollow\" href=\"https://console.developers.google.com/apis/credentials\">Credentials</a> of type \"Create OAuth client ID\" -> Web Application. This option will be disabled until you create \"OAuth consent screen\" from the link in warning message bar. In the \"OAuth consent screen\" configuration, enter the \"Application name\" and \"Authorized domains\". In the \"Create OAuth client ID\" configuration, enter the required information and note that \"Authorized redirect URIs\" is <code>[your-draw.io-hostname]/google</code>. For example, if you host draw.io at <code>https://drawio.example.com</code>, then \"Authorized redirect URIs\" whould be <code>https://drawio.example.com/google</code> and \"Authorized JavaScript origins\" would be <code>https://drawio.example.com</code>.</p>\n<p dir=\"auto\">Set the values of the generated \"Client ID\" and \"Client secret\" into environment variables <code>DRAWIO_GOOGLE_CLIENT_ID</code> and <code>DRAWIO_GOOGLE_CLIENT_SECRET</code>. Also, set <code>DRAWIO_GOOGLE_APP_ID</code> 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 <code>123456789-abc...</code>, then APP ID is <code>123456789</code></p>\n<p dir=\"auto\">If you want to host a draw.io viewer also, you can create another client ID for the viewer. Viewer has read-only access to Drive files.</p>\n<p dir=\"auto\">Set the values of the generated \"Client ID\" and \"Client secret\" into environment variables <code>DRAWIO_GOOGLE_VIEWER_CLIENT_ID</code> and <code>DRAWIO_GOOGLE_VIEWER_CLIENT_SECRET</code>. Also, set <code>DRAWIO_GOOGLE_VIEWER_APP_ID</code> environment variable to your Google App ID.</p>\n<p dir=\"auto\"><h2 dir=\"auto\" tabindex=\"-1\">Microsoft OneDrive</h2><a href=\"#microsoft-onedrive\" aria-label=\"Permalink: Microsoft OneDrive\" id=\"user-content-microsoft-onedrive\"></a></p>\n<p dir=\"auto\">You will need to create and application in order to use MS Graph APIs. Follow the information on <a rel=\"nofollow\" href=\"https://docs.microsoft.com/en-us/graph/auth-register-app-v2\">how to register your app</a> and <a rel=\"nofollow\" href=\"https://docs.microsoft.com/en-us/graph/use-the-api\">how to use the APIs</a>.</p>\n<p dir=\"auto\">Once you registered your application, from Microsoft Azure UI, select your new app, then \"Authentication\". From Authentication, enter your redirect URIs. draw.io requires two redirect URIs <code>[your-draw.io-hostname]/microsoft</code> and <code>[your-draw.io-hostname]/onedrive3.html</code>. For example, if you host draw.io at <code>https://drawio.example.com</code>, then redirect URIs would be <code>https://drawio.example.com/microsoft</code> and <code>https://drawio.example.com/onedrive3.html</code></p>\n<p dir=\"auto\">In \"Advanced settings\" on the same page, enable \"Access tokens\" and \"ID tokens\" check boxes. To get the \"Client secret\", select \"Certificates & secrets\" page from the menu, then click \"+ New client secret\" button. Finally, from the \"Overview\" page in the menu, you can find the \"Application (client) ID\".</p>\n<p dir=\"auto\">Set the client ID and secret into environment variables <code>DRAWIO_MSGRAPH_CLIENT_ID</code> and <code>DRAWIO_MSGRAPH_CLIENT_SECRET</code>. If your Azure app is a single tenant, set <code>DRAWIO_MSGRAPH_TENANT_ID</code> to your tenant ID.</p>\n<p dir=\"auto\"><h2 dir=\"auto\" tabindex=\"-1\">Gitlab</h2><a href=\"#gitlab\" aria-label=\"Permalink: Gitlab\" id=\"user-content-gitlab\"></a></p>\n<p dir=\"auto\">Create a new OAuth app (Settings -> Applications). Set \"Redirect URI\" (e.g, <code>https://drawio.example.com/gitlab</code>) and \"Scopes\" (e.g, <code>api</code>, <code>read_repository </code>, <code>write_repository</code>). Then, set the following environment variables, using information from the app, to enable Gitlab integration.</p>\n<ul dir=\"auto\">\n<li><code>DRAWIO_GITLAB_ID</code>: Your Gitlab ID</li>\n<li><code>DRAWIO_GITLAB_SECRET</code>: Your Gitlab Secret</li>\n<li><code>DRAWIO_GITLAB_URL</code>: Your Gitlab URL, for example, <code>https://gitlab.com/oauth/token</code> when the gitlab.com is used</li>\n</ul>\n<p dir=\"auto\"><h2 dir=\"auto\" tabindex=\"-1\">EMF Converter</h2><a href=\"#emf-converter\" aria-label=\"Permalink: EMF Converter\" id=\"user-content-emf-converter\"></a></p>\n<p dir=\"auto\">This service is currently used by VSDX importer for converting EMF files in VSDX files. If you don't plan to use VSDX importer or your VSDX files don't contain EMF files, then this service is not important to you.</p>\n<p dir=\"auto\">This service is based on <a rel=\"nofollow\" href=\"http://cloudconvert.com/\">Cloud Convert</a>. You will need to register for an account and set the environment variable <code>DRAWIO_CLOUD_CONVERT_APIKEY</code> to the API KEY. We use API <strong>V1</strong> API KEY.</p>\n<p dir=\"auto\"><h2 dir=\"auto\" tabindex=\"-1\">AWS Deployment</h2><a href=\"#aws-deployment\" aria-label=\"Permalink: AWS Deployment\" id=\"user-content-aws-deployment\"></a></p>\n<p dir=\"auto\">You can deploy this docker compose easily to AWS ECS. Follow the instructions in this <a rel=\"nofollow\" href=\"https://docs.aws.amazon.com/AmazonECS/latest/developerguide/ecs-cli-tutorial-ec2.html\">tutorial</a> to install Amazonn ECS CLI, create a cluster, and deploy \"self-contained\" docker compose file to it. We recommend EC2 deployment.\nYou will need to chnage port mapping to 80 and 443 to support standard HTTP and HTTPS ports in <code>docker-compose.yml</code>. Don't forget to allow access to these ports in the security group inbound rules. Also, it is required to set <code>DRAWIO_BASE_URL</code> environment variable in order to have a fully functional deployment. Set the other environment variables as described above to enable other services and features as needed.</p>\n<p dir=\"auto\">Refer to the main <a href=\"https://github.com/jgraph/docker-drawio\">README</a> file for how to configure <strong>Let's Encrypt</strong>.</p>\n</article></div></div>","textContent":"This docker compose file runs draw.io diagram editor without depending on any draw.io online services (e.g., export service, plantUml, ...) and with support of Google Drive, Microsoft OneDrive, ...\nAdding fonts to improve generated PDFs and images\nThe docker-compose file bind the fonts volume into the running container system fonts.\nThe best option for Windows users is to copy the contents of Windowsdrive:/Windows/Fonts into fonts folder. These fonts are copyrighted and cannot be re-distributed freely.\nConfiguration\nYou can customize the application by setting the following environment variables.\n\nDRAWIO_SERVER_URL: Your deployment base URL. For example, https://drawio.example.com/ or https://www.example.com/drawio/ if it is deployed into a folder. Note: Must end with /\nDRAWIO_BASE_URL: Your deployment base URL but used with the viewer, lightbox and embed. Usually the same as DRAWIO_SERVER_URL but does not end with /.\nDRAWIO_CSP_HEADER: (Optional) Your website Content-Security-Policy if you want to customize it.\nDRAWIO_VIEWER_URL: (Optional) If you want to host a draw.io viewer also, set the viewer URL. For example, https://drawio.example.com/js/viewer.min.js\nDRAWIO_LIGHTBOX_URL: (Optional) If you want to host a draw.io viewer also, set the lightbox URL. For example, https://drawio.example.com\nDRAWIO_CONFIG: (Optional) draw.io configuration JSON. Documentation\nDRAWIO_USE_HTTP: (Optional and INSECURE) If your setup uses http only and you understand the risks (for example, sending OAuth tokens over http), set DRAWIO_USE_HTTP=1. Caution: Use at your own risk.\n\nGoogle Drive\nYou will need to create a project at Google API Console and create Credentials of type \"Create OAuth client ID\" -> Web Application. This option will be disabled until you create \"OAuth consent screen\" from the link in warning message bar. In the \"OAuth consent screen\" configuration, enter the \"Application name\" and \"Authorized domains\". In the \"Create OAuth client ID\" configuration, enter the required information and note that \"Authorized redirect URIs\" is [your-draw.io-hostname]/google. For example, if you host draw.io at https://drawio.example.com, then \"Authorized redirect URIs\" whould be https://drawio.example.com/google and \"Authorized JavaScript origins\" would be https://drawio.example.com.\nSet 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\nIf you want to host a draw.io viewer also, you can create another client ID for the viewer. Viewer has read-only access to Drive files.\nSet the values of the generated \"Client ID\" and \"Client secret\" into environment variables DRAWIO_GOOGLE_VIEWER_CLIENT_ID and DRAWIO_GOOGLE_VIEWER_CLIENT_SECRET. Also, set DRAWIO_GOOGLE_VIEWER_APP_ID environment variable to your Google App ID.\nMicrosoft OneDrive\nYou will need to create and application in order to use MS Graph APIs. Follow the information on how to register your app and how to use the APIs.\nOnce you registered your application, from Microsoft Azure UI, select your new app, then \"Authentication\". From Authentication, enter your redirect URIs. draw.io requires two redirect URIs [your-draw.io-hostname]/microsoft and [your-draw.io-hostname]/onedrive3.html. For example, if you host draw.io at https://drawio.example.com, then redirect URIs would be https://drawio.example.com/microsoft and https://drawio.example.com/onedrive3.html\nIn \"Advanced settings\" on the same page, enable \"Access tokens\" and \"ID tokens\" check boxes. To get the \"Client secret\", select \"Certificates & secrets\" page from the menu, then click \"+ New client secret\" button. Finally, from the \"Overview\" page in the menu, you can find the \"Application (client) ID\".\nSet the client ID and secret into environment variables DRAWIO_MSGRAPH_CLIENT_ID and DRAWIO_MSGRAPH_CLIENT_SECRET. If your Azure app is a single tenant, set DRAWIO_MSGRAPH_TENANT_ID to your tenant ID.\nGitlab\nCreate a new OAuth app (Settings -> Applications). Set \"Redirect URI\" (e.g, https://drawio.example.com/gitlab) and \"Scopes\" (e.g, api, read_repository , write_repository). Then, set the following environment variables, using information from the app, to enable Gitlab integration.\n\nDRAWIO_GITLAB_ID: Your Gitlab ID\nDRAWIO_GITLAB_SECRET: Your Gitlab Secret\nDRAWIO_GITLAB_URL: Your Gitlab URL, for example, https://gitlab.com/oauth/token when the gitlab.com is used\n\nEMF Converter\nThis service is currently used by VSDX importer for converting EMF files in VSDX files. If you don't plan to use VSDX importer or your VSDX files don't contain EMF files, then this service is not important to you.\nThis service is based on Cloud Convert. You will need to register for an account and set the environment variable DRAWIO_CLOUD_CONVERT_APIKEY to the API KEY. We use API V1 API KEY.\nAWS Deployment\nYou can deploy this docker compose easily to AWS ECS. Follow the instructions in this tutorial to install Amazonn ECS CLI, create a cluster, and deploy \"self-contained\" docker compose file to it. We recommend EC2 deployment.\nYou will need to chnage port mapping to 80 and 443 to support standard HTTP and HTTPS ports in docker-compose.yml. Don't forget to allow access to these ports in the security group inbound rules. Also, it is required to set DRAWIO_BASE_URL environment variable in order to have a fully functional deployment. Set the other environment variables as described above to enable other services and features as needed.\nRefer to the main README file for how to configure Let's Encrypt.\n","length":5747,"excerpt":"This docker compose file runs draw.io diagram editor without depending on any draw.io online services (e.g., export service, plantUml, ...) and with support of Google Drive, Microsoft OneDrive, ...","siteName":null} |