drawio configuration details to create its own online drawing tool

Online drawing tool based on drawio

Seeing a lot of WeChat official account recommends this tool, and also say that many charging tools are based on this development.
The best way to learn a project is to look at the official introduction of the project, Official documents of drawio Then there is Baidu, Sogou, and Google if you have the ability to change different keywords, look at the pits stepped by predecessors, and those with github can also look at issus

Create your own drawio

Personalized configuration

drawio supports browser parameter configuration, Detailed configuration tutorial
URL hash parameter description
Many personalized requirements can be realized through configuration

The following configuration can be written to src\main\webapp\js\PreConfig.js file without parameter passing
as

urlParams['lang'] = 'zh';

Official configuration related information

Potentially useful configuration information

window.EXPORT_URL = 'REPLACE_WITH_YOUR_IMAGE_SERVER';
window.PLANT_URL = 'REPLACE_WITH_YOUR_PLANTUML_SERVER';
window.DRAWIO_BASE_URL = window.location.protocol + '//' + window.location.host; // Replace with path to base of deployment, e.g. https://www.example.com/folder
window.DRAWIO_VIEWER_URL = window.location.protocol + '//' + window.location.host + '/js/viewer.min.js'; // Replace your path to the viewer js, e.g. https://www.example.com/js/viewer.min.js
window.DRAWIO_LIGHTBOX_URL = window.location.protocol + '//' + window.location.host; // Replace with your lightbox URL, eg. https://www.example.com
urlParams['lang'] = 'zh';
urlParams['browser'] = 1;
urlParams['gapi'] = 0;
urlParams['db'] = 0;
urlParams['od'] = 0; 
urlParams['tr'] = 0;
urlParams['gh'] =0; 
urlParams['gl'] =0;
urlParams['mode'] = 'browser';

Default Chinese display

You want to open the page and automatically switch to the corresponding language according to the browser language. For example, the Chinese browser switches to zh by default

The lang parameter can control the default language, which can be requested directly? lang=zh means to display in simplified Chinese

urlParams['lang'] = 'zh';

Prohibit remote saving

Since the project uses many foreign storage services, such as Google, which cannot be opened in China, these storage functions are closed and only local storage and browser storage are reserved

Show saved configuration

browser=0/1: Disables local storage as a storage location (0) or shows the browser option in the storage dialog (1).
gapi=0: Disables the Google integration.
db=0: Disables the Dropbox integration.
od=0: Disables the OneDrive integration.
tr=0: Disables the Trello integration.
gh=0: Disables the Github integration.
gl=0: Disables the GitLab integration.
drive=0: Simulates app.diagrams.net regardless of the domain name (uses the old app ID).

Parameter mode

mode=[google|onedrive|github|dropobox|device|browser]: Switches to the specified mode.

Configure to display only local and browser storage by default, and select browser storage

?lang=zh&browser=1&gapi=0&db=0&od=0&tr=0&gh=0&gl=0&storage=device&mode=browser

Turn off splash and select a specific graph

splash=0: Does not show the splash screen.

Should it be a selection box that allows the user to choose whether to create a new diagram or open a diagram

libs=key1;key2;...;keyN: Specifies the current libraries. Possible keys are allied_telesis, android, archimate, archimate3, arrows2, atlassian, aws3, aws3d, aws4, azure, basic, bootstrap, bpmn, cabinets, cisco, cisco_safe, citrix, clipart, dfd, eip, electrical, er, floorplan, flowchart, gcp2, general, gmdl, ibm, images, infographic, ios, lean_mapping, mockups, mscae, network, office, pid, rack, signs, sitemap, sysml, uml, veeam and webicons.

Abbreviations of various diagrams

Therefore, the following configuration should show only the flow chart

?lang=zh&browser=1&gapi=0&db=0&od=0&tr=0&gh=0&gl=0&device=1&mode=browser&libs=flowchart;general&splash=0

Open the file's own example

Using the create parameter, you can carry template information and directly create a diagram containing examples

?mode=browser&title=Untitled%20Diagram.drawio&create=http%3A%2F%2F127.0.0.1%3A8081%2Ftemplates%2Fflowcharts%2Fdata_flow_1.xml&sync=manual#LUntitled%20Diagram.drawio

create=url/name: Creates a new file from a template URL. If the value is not a URL and is not empty, the script will try to use window.opener[url]. In embed mode, window.opener[name] will be used to get the initial XML. Note that this requires the same origin policy in the opener/parent for reading the variable.

The value of the create parameter. It seems that only url addresses can be passed, not relative paths

The built-in template is in the following path