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
src\main\webapp\templates
online service
Reference documents
Excellent secondary development project of drawio