DrawIO Dual open – It’s time to recharge your ProcessOn with a lifetime VIP

4, The author: Brook 4

This article from the perspective of use, step by step on what DrawIO is, why based on DrawIO secondary development and DrawIO secondary development of the core technical details and abstract out a set of general binary architecture, so the article content is longer, different stages of readers can read according to the needs. The overall structure of this paper is as follows:

1 – DrawIO secondary development requirements background (a DrawIO deep as the sea)

What 2-DRAwio is and how to use it (Demystify DrawIO)

3 – Preparation stage of DrawIO secondary development (through DrawIO code after repeated trials and tribulations)

Technical details of 4-DRAWIO secondary development (master the core binary DrawIO code)

5-DRAWIO secondary development architecture details (three save my body, abstract the general DrawIO development architecture)

background

For diagrams such as flowcharts, prototypes, topologies, UML diagrams, mind maps, etc., are you still using Microsoft’s massive Visio, which requires downloading clients and is bulky? Or are you still using ProcessOn’s free version, where you go from one image to another, download it, delete it, and redraw another (if you’re a kryptonian gamer, I can only say happy)? With this article in the background of the above problems, I hope different readers can get the corresponding harvest after reading it.

• Simple users can get a simple free unlimited space advanced drawing tool.
• Advanced developers can easily and quickly build a free unlimited space and powerful drawing tool for themselves and their teams.
• Advanced DrawIO openers (who know and have tried DrawIO openers) can master a new secondary development model and gradually become fishing masters.

I’m embarrassed to talk so high. To restate the reason, the main work of the author in Cloud Music is to improve the efficiency of r&d line. One day, the product and the back-end classmate put forward a demand, which basically means that the team needs an internal chart tool, which can be connected with the current workflow of the company to complete the process closed-loop. Because the current working model is product/development using ProcessOn or some other drawing tool to draw diagrams, take screenshots/save them locally and paste them, since ProcessOn has space limitations and doesn’t have to have everyone member 😂, it’s better to build one in-house.

Due to the above official/unofficial reasons, the author started to investigate the construction of the internal graphics system, and finally confirmed the technology selection — secondary development based on DrawIO.

[Note] : The second development will be referred to as the second open

At present, the basic functions of this drawing system (drawing/access, etc.) have been developed and used in internal testing, and the author also gave the website a high-end atmospheric grade name — OverMind-x Graph, let’s take a look at the current effect of the website:

DrawIO profile

Since it is based on DrawIO, first of all to understand what DrawIO is, follow the author’s perspective to go to the DrawIO official website to see a circle, the official website home page screenshots as shown below:

DrawIO is a website and tool that supports drawing various forms of charts and supports multi-location storage capabilities. DrawIO graph drawing function is not much to say, this is the core function of DrawIO itself, here focuses on DrawIO multi-location storage capacity, DrawIO graph can exist in many places on the network, such as: Browser caches, native folders, remote storage (Github, Gitlab, Google Drive, etc.). Storing browsers and local folders is easy. Here, Github is used as an example to explain how to store graphs drawn by DrawIO remotely.

Store DrawIO to Github repository

• 1 – Create a new repository on Github

Here, I create a new repository called Drawio-Folder, which contains only one readme. md file, as shown below:

• 2 – Select GitHub as storage space when drawing

Then click the Start button from the official website to enter the drawing page. When entering the page for the first time, there will appear an option to select storage space as shown in the picture below, and then select Github (the principle of other remote storage is the same).

• 3 – Select the corresponding warehouse and draw the picture

Click “Save to Github repository” and select “Create a new chart”. After naming the chart, click “Create” to Create the chart.

• 4 – Authorize the selection of the repository

After the icon is successfully created, a pop-up window for authorized login will appear. After the authorized login, DrawIO can obtain all warehouse information under the account. Select the drawio-Folder repository just created, and then draw the chart.

• 5 – Save the document after drawing

During the drawing process, each save operation creates a Commit message, which is equivalent to a normal repository modification and commit, as shown in the following figure:

Once the diagram has been drawn and saved, go to the Github repository to see if it was saved successfully.

As you can see, the chart you just created has been successfully stored in the Github repository, which is pretty much as if you already had an unlimited chart cloud.

At this point, I’m sure you’ve seen how DrawIO draws and its powerful storage capabilities. As mentioned at the beginning of this article, if you’re a pure user, this is enough. You already have a free and powerful drawing tool (no membership required, no registration required, no limits on the number of drawings) and many types of unlimited storage. Wouldn’t that be nice compared to Some Apps that charge more?

Why DrawIO dual open

If DrawIO itself already smells so good, why split it? Here is a brief summary of several reasons why a split is necessary or may be necessary:

• First of all, what is needed for a team is not only a pure drawing tool, but an integrated management platform with drawing functions. Drawing is only the most core part, and there are some other essential functions.

• Secondly, in some special business requirements, charts need to be combined with their own business to play a greater capacity of the chart or special transformation based on the business, in this scenario, the two is inevitable.

• Finally, there is the so-called forced grid problem. Frankly speaking, if you can put your own company’s independent deployment service, why put it outside? Free version in case one day not free or limited that passive. (Extremely unlikely, but take this into account)

If you or your team have any of these reasons, please read on for a simple secondary development based on the official DrawIO open source code.

DrawIO ii – Process preparation

[Note] : This article is aimed at front-end developers, but there are a lot of things that depend on the Java environment during the process of building a new version of the development deployment, so it will be briefly introduced to ensure continuity. If you are already familiar with the relevant environment configuration, you can ignore the corresponding content.

Environment to prepare

• Front-end development environment

Here is not to say what, in fact, the development of DrawIO is really completely belong to the front end category, so you front end students if they meet similar needs, go ahead with the difficulties ~

• Compile and build the relevant environments — Java and Ant

As for the installation of Java and Ant environments, MacOS is used as an example. For other systems, refer to official tutorials.

As for why to use these two, the later construction and deployment process will be introduced, because front-end development students will most likely not install these two computers, so here is also a brief introduction to the installation steps.

# JDK download address
https://www.oracle.com/java/technologies/javase-jdk16-downloads.htmlt

# ant download address
https://ant.apache.org/bindownload.cgi
Copy the code

To check whether the installation is successful, use the javac or Java -version command to check the installed version. Then decompress the downloaded Ant package to the Applications directory and run the following command.

Write environment variables
sudo vim .bash_profile
Note that the version number should correspond to the version you downloaded
exportANT_HOME = / Applications/apache ant -- 1.9.16export PATH=$ANT_HOME/bin:$PATH
Exit and save
:wq
Let environment variables take effect
source .bash_profile
# check version
ant -V
Copy the code

After the installation is complete, you can verify whether the installation is successful on the command line. If the command line displays the corresponding Java and Ant versions as shown in the figure above, congratulations on the DrawIO binary base environment is ready. The next step is to enter DrawIO binary.

DrawIO source

Clone the official DrawIO source code repository and run it locally to see the effect. Clone the package.json file and find only one start command.

"scripts": {
  "start": "electron ."
}
Copy the code

Those of you who know the front end will know that this command will launch a Electron desktop application, and after running this command, no surprise, a desktop DrawIO will appear.

It works the same way as in the above article, but here’s the problem! Our ultimate goal is to do DrawIO binary, is it based on Electron binary? Although it is not impossible, but that start the cost can be high, it is estimated to persuade a large wave of students, do not panic, go to the official warehouse to see if there are other methods.

DrawIO can also be deployed on Github Pages as a static station in addition to the Electron deployment application, and the official site address becomes clearer after the dot is opened: https://jgraph.github.io/drawio/src/main/webapp/index.html. / SRC /main/webapp is the root of DrawIO’s static site. Static site development is familiar to the front-end. So all the following binary processes are explained in the form of static stations.

If your goal is to build a desktop application based on Electron, you can also carry out the corresponding binary switch, which is basically the same as the binary switch of static station. The selection of development mode is mainly through the analysis of my team’s business demands to draw a conclusion, because the web application universality is better and there are not so many limitations, so the cloud music is static station mode.

Development mode and preview

A strange framework of application system, or how familiar with the fastest, the easiest way is to follow the entry file chew up little by little, and the process of it and read the source code is very similar, DrawIO static station entrance is file/SRC/main/webapp/index. The HTML, then from it, A brief introduction to how to develop and debug DrawIO code locally.

• Step 1: Create a new onepackage.json

{
  "name": "drawio-dev"."version": "1.0.0"."main": "src/main/webapp/index.html"."scripts": {
    "start": "cd src/main/webapp && serve"
  },
  "license": "MIT"."dependencies": {
    "serve": "^ 12.0.0"}}Copy the code

Json file, and use yarn start or NPM run start command to start a server locally. The result is as follows:

• Step 2: Modify the code and develop a pattern preview

Because the file system of DrawIO project is very huge, here don’t do too much introduction, mainly introduce you to two core in the process of opening a file directory SRC/main/webapp/js/diagramly, files in this folder is the most core part of the system is running, Most of erkai’s work is also to modify the contents of the files in this folder.

Of SRC/main/webapp/js/diagramly/App. Js is loaded DrawIO one entrance js file, in which we first line type in a piece of code:

Alert is a popover that tests the code to see if it executes properly. When you refresh the page, you do not see this popover. Open the console to find out why:

App.min.js is loaded instead of app.js, so it seems that the default loading is production version of the code, so how to execute the development code into development mode? Dev === 1 dev == 1 dev == 1 dev == 1 dev == 1 dev == 1

Here, the author ineffable heart appeared tens of thousands of unknown lovely animals, not so easy ah. Ok, technology is a process of constant exploration, I hope you can like me do not give up.

Of course, by the end of this article you’ll have saved 90% of your detours by going straight to a two-lane drive.

Why couldn’t I find the file? Simple analysis, or file pointing problem:

In the local development should request is the local resource file, but the Network panel found that the requested resource address is not correct, no more talk, say more may be everyone’s heart also collapsed, through the following code, the development mode arrangement.

// index.html starts at line 245

// Changes paths for local development environment
if (urlParams['dev'] = ='1') {...// ====> The development mode file is pointed locally
  if (location.hostname == 'localhost' || location.hostname == '127.0.0.1') {
    drawDevUrl = `http://${location.host}/ `;
    geBasePath = `http://${location.host}/js/grapheditor`;
    mxBasePath = `http://${location.host}/mxgraph`;
    mxForceIncludes = true;
  }
  // ====> The development mode file is pointed locally
  
  mxscript(drawDevUrl + 'js/PreConfig.js');
  mxscript(drawDevUrl + 'js/diagramly/Init.js');
  mxscript(geBasePath + '/Init.js');
  mxscript(mxBasePath + '/mxClient.js'); . }Copy the code

The core code and the corresponding location have been given above, after modification directly refresh the page to see the effect:

So far, the basic introduction of DrawIO development process is completed. More details about how to transform DrawIO are determined according to the needs of your team.

Build the production version

The development mode is fixed, and the local development preview is completed, but the final release of the code will definitely use the production version. As we know, the production version uses compressed files such as app.min.js, so how to package the local development code into the production version? This is done using the Java and Ant environments that you already have installed.

There’s not much to be said here, just add the following code to the package.json file:

{
  "name": "drawio-dev"."version": "1.0.0"."main": "src/main/webapp/index.html"."scripts": {
    "start": "cd src/main/webapp && serve",
+   "build": "cd etc/build && ant"
  },
  "license": "MIT"."dependencies": {
    "serve": "^ 12.0.0"}}Copy the code

After adding the above build command, run it and you will see the following message:

As shown in the picture below, the newly developed production version is running perfectly. So far, the second phase of the DrawIO process, from the development preview to the component production version, has been introduced.

The deployment of

The core directory is SRC /main/webapp as mentioned above. The author here simply provides you with several deployment ideas:

• Github Pages(Private)
• Vercel (personal)
• Nginx (team)
• Node Server(Team)

As for how to deploy, you can choose according to your own or the actual situation of the team.

DrawIO ii – Technical details

The author based on DrawIO development of the drawing management system in the cloud music team internal testing, currently completed and under development of the function set is as follows:

• Basic drawing function
• Add, delete, change and check based on cloud music internal services
• Personal-centric module that manages its own chart content
• Data interaction, data interaction with business systems, and one-click import of created charts
• Todo – Authentication functions, such as sharing, can be performed by the person assigned the permission
• Todo – Team space where a team can manage a collection of charts
• Todo – Version history, which allows you to view the latest version changes
• Todo – Custom import of some common templates based on the company/individual

Because this article or partial technology to the article, the above a lot of features in fact and DrawIO open nothing too big relations, are based on business needs, so don’t do too much detail introduction, the author believes that the developer/team here DrawIO two open, the main reasons for more than 80% are because want to save the content to internal services, That is to say, taking the current artboard and storing it in the database in a certain form is the core part of the whole binary process. Here with a two open process source case extension about DrawIO two open process part of the technical details.

Gets the current artboard content —getCurrentFile

So how do I get the current artboard content? After reading the source code of app.js, I found the following code:

App.prototype.save = function(name, done) {
	var file = this.getCurrentFile(); . }Copy the code

As the name suggests, this code will be executed at save time and will retrieve a file object. Add a log and run the code to see what happens:

As you can see, there is indeed a printed file object. Here is not a description of the properties of the object, but only one of the most core data properties is the file data. What can you do with this file data? Don’t worry, keep reading.

The construct file is downloaded locally

With getCurrentFile we get the graph data from the canvas that is currently being drawn, which is an XML string, and then download a file from that string in reverse to see if it looks exactly like the graph on the canvas. Download the constructed file data using Filesaver. The core code is as follows:

/** * Construct file downloaded to browser **/
function download() {
  const fileObj = {
    title: 'luffyzh.drawio'.data: '
      
       
        7VhZc5swEP41PLbD4WDnsThx0tbNpE3aTB9lkIVqwVIhfOTXdzHCgPH4aOscnvjBo12WlbTft4dtOP1ofiVJEn6BgArDNoO54VwYtn3WNf E7VywKhduzCwWTPChUVqW4449UK/V7LOMBTRuGCkAonjSVPsQx9VVDR6SEWdNsDKK5a0IYbSnufCLa2gceqLDQ9uxupb+mnIXlzpZ7XjyJSGmsb5KGJIBZTe VcGk5fAqhiFc37VOSxK+Py8HHxIIYT9+rT1/Q3+e59vr/58a5wNjjkldUVJI3V/3WtsZwSkel46buqRRlACVkc0NyJaTheqCKBSwuXv6hSCw04yRSgCqQKgU FMxBAg0XZjiJU2s3KZxsGHHFiURwL8SaEacCH0Hihp+x5KqZIwWWGXO1gBkRsLMqLCI/6ELQ/aBwESH8UQ09xVgGTQd6kOd1lpvT1jqzFIIZM+3WLnaIoTye g2f25hl5+vxlON3BWFiCq5QANJBVF82iQz0TnBVnYV7rjQ0B9AA6dFA5GNx4vHcAsbciRmIVf0LiHLkMywfjQZUkceL+cxQdJU47YD1sNgmVKp6HxrIMunrs 5mXc56WpxVtcEqEz6s1YWOeaTQd1qh/4nl8i0J/yUJ3T2TsOxRO7NQk6Ukxt5JqT3dAsd7VSYwHqd4sHXqrDb8ezadtdh0Ay0y7cbjVdPtmcjUPYxL1ovnkt vi0pBEiWG7AsPgjSSuWL5KRMYYkgXdxYYzaNeuEKJRlu5uFw2McwYNSMRFHq9rKqZUcZ9saCpEcIb7XvgIN5WbyYNb8pih5FbS/ZKsWH+P2Gy6zWazkuvdxt zQbXrH6jbdFqa3iF4BnW2KJb4n1vEdew2E8+du+b19ivSrLsFP3vHLarq75Vt7lmnNHvO9g58GgV7+FHC+10z5NgYch2H2qQ0C5QlrfPIyMWpPAqNMxstBAD L1NglsmwTsTU3oSSeBshDWQP1GE8IRTHN4inPA+i//jvPcc0BZKZoQiDymtllk2IlhsD6LOdbxMECx+m+2KIXVH9zO5R8=
       
      '
  }
  const blob = new Blob([fileObj.data], {type: 'application/octet-stream'});
  saveAs(blob, fileObj.title);
}
Copy the code

From the code and screenshots, we can conclude: Using getCurrentFile to retrieve the chart’s core data, you can easily reverse the process and create a.drawio file, which is a drawing file, that looks exactly like the one on canvas.

Draw the saved chart data onto the canvas —loadFile

The above two steps determine whether the canvas data can be retrieved and whether the data can be reverse-constructed into a chart file, thus confirming the feasibility of the technical solution, but actually the last step is to load the chart data onto the canvas, because your chart not only needs to be saved, but also needs to be able to continue editing. So by taking the data out of the file and reverse-structuring it into chart data and loading it onto the canvas, a minimal DrawIO binary closed loop is achieved. Without further ado, the core API — loadFile, details are as follows:

if (this.editor.isChromelessView()) {
	...
}
/** * if there is an id, it indicates that an existing document is opened and the document is in edit mode */
else if (urlParams['id']) {
  const mockFile = {
    title: 'luffyzh.drawio'.data: '
      
       
        7VhZc5swEP41PLbD4WDnsThx0tbNpE3aTB9lkIVqwVIhfOTXdzHCgPH4aOscnvjBo12WlbTft4dtOP1ofiVJEn6BgArDNoO54VwYtn3WNf E7VywKhduzCwWTPChUVqW4449UK/V7LOMBTRuGCkAonjSVPsQx9VVDR6SEWdNsDKK5a0IYbSnufCLa2gceqLDQ9uxupb+mnIXlzpZ7XjyJSGmsb5KGJIBZTe VcGk5fAqhiFc37VOSxK+Py8HHxIIYT9+rT1/Q3+e59vr/58a5wNjjkldUVJI3V/3WtsZwSkel46buqRRlACVkc0NyJaTheqCKBSwuXv6hSCw04yRSgCqQKgU FMxBAg0XZjiJU2s3KZxsGHHFiURwL8SaEacCH0Hihp+x5KqZIwWWGXO1gBkRsLMqLCI/6ELQ/aBwESH8UQ09xVgGTQd6kOd1lpvT1jqzFIIZM+3WLnaIoTye g2f25hl5+vxlON3BWFiCq5QANJBVF82iQz0TnBVnYV7rjQ0B9AA6dFA5GNx4vHcAsbciRmIVf0LiHLkMywfjQZUkceL+cxQdJU47YD1sNgmVKp6HxrIMunrs 5mXc56WpxVtcEqEz6s1YWOeaTQd1qh/4nl8i0J/yUJ3T2TsOxRO7NQk6Ukxt5JqT3dAsd7VSYwHqd4sHXqrDb8ezadtdh0Ay0y7cbjVdPtmcjUPYxL1ovnkt vi0pBEiWG7AsPgjSSuWL5KRMYYkgXdxYYzaNeuEKJRlu5uFw2McwYNSMRFHq9rKqZUcZ9saCpEcIb7XvgIN5WbyYNb8pih5FbS/ZKsWH+P2Gy6zWazkuvdxt zQbXrH6jbdFqa3iF4BnW2KJb4n1vEdew2E8+du+b19ivSrLsFP3vHLarq75Vt7lmnNHvO9g58GgV7+FHC+10z5NgYch2H2qQ0C5QlrfPIyMWpPAqNMxstBAD L1NglsmwTsTU3oSSeBshDWQP1GE8IRTHN4inPA+i//jvPcc0BZKZoQiDymtllk2IlhsD6LOdbxMECx+m+2KIXVH9zO5R8=
       
      '
  }
  const file = new LocalFile(this, mockFile.data, mockFile.title, this.mode);
  this.loadFile(` ` - 1.true, file);
}
else if(! mxClient.IS_CHROMEAPP && (this.mode == null || force)) {
  ...
}
Copy the code

When the above code enters the page, it checks whether the link carries the parameter ID. If so, it constructs a simple DrawIO file data object, and then draws the file onto the canvas using the loadFile method, as shown in the following figure:

Based on this case basically can explain the core technical details of the whole DrawIO two open, the whole two open process can also be very clear in series, I believe that you have your own magnificent blueprint in your mind, so you can put the idea into practice.

If you want to actually visit and experience the effect, the author has simply deployed a personal DrawIO, you can access through the following link:

• Personal edition DrawIO
• DrawIO file download
• DrawIO loadFile Loads the file

DrawIO Dual open – core architecture

In front of a lot of development process and with pit details, so the author in addition to help you pit, for the recent DrawIO two open experience also carried out some summary and design a DrawIO two open development architecture, the following is a brief introduction to the design process of this architecture.

In fact, DrawIO two open more is to develop a drawing function as the core of the closed-loop system, so in addition to the basic drawing function, how skillfully DrawIO drawing function integration into the system is the most critical part, for this I summarized three architectural modes:

Architecture one – single static station pattern

The overall architecture of single static station mode is shown in the figure above. The entire architecture is based on the DrawIO static station directory SRC /main/webapp as the root directory, and is developed in accordance with the most original static station development mode. The entry file is index.html, load drawing related core dependent JS file, complete the drawing function, other function pages and drawing page there is no coupling logic, you can create several HTML files in the project directory, one HTML file corresponds to one function, to carry out the development of the project iteration. For example, the home page is home.html + home.js, and the list page is list.html + list.js, etc. All development is back to the most original front-end development mode — HTML + JavaScript + CSS.

Advantages: the logic is simple and easy to understand, based on DrawIO source repository directory for incremental development, easy to use

Disadvantages: The original development model is inefficient, it does not use popular frameworks and packaging tools, does not fit the modern development model.

Architecture 2 – Dual system pattern

Based on the analysis of the first static station architecture mode, it can be learned that this mode is not in line with the development rhythm of the current front-end, and the inefficient efficiency of the original way is the most fatal, so the transformation has formed the second architecture mode — dual system mode. There are two systems in this mode: DrawIO plotting system and brothers business system, in fact, in the whole system, the core of the drawing function and other business requirements can be completely decoupled, then we can abstract business of has nothing to do with the drawing separately to form a system, and the development of the system can be used in a modern mode of development, and brother system architecture selection without any restrictions, Develop whatever you want.

Advantages: The two systems are independent of each other, and the sibling business system can also use the latest framework and technology to improve efficiency.

Disadvantages: Development iterations need to maintain two systems, two domains and two sets of environment increase maintenance costs.

Architecture 3 — Special single-system pattern

According to the analysis of the above two architectures, architecture one increases the development complexity due to the original development mode, while architecture two improves the development efficiency by coupling to form dual systems, but introduces the extra cost of maintaining dual systems, which leads to the increase of management complexity. Therefore, the advantages and disadvantages of the two architectures were combined to form a third architecture, the special single-system pattern. This architecture combines the advantages of the above two architectures and improves the development efficiency through some special solutions. The architecture diagram is as follows:

Let’s focus on how this particular single-system architecture addresses the development and management complexity issues mentioned above.

The solution to development complexity is quite simple, just introduce a proper modernization framework. In this case, I introduced Next. Js. There are three reasons for this:

• First, it is an SSR framework based on React.js, so it meets the requirements of modern frameworks to improve development efficiency.
• Secondly, Next. Js comes with a number of features that help with administrative complexity, which we’ll cover later.
• Last but not least, I personally love Next. Js.

The following is part of the code of the package.json file, the core of the entire architecture. In fact, there are not many complicated operations, but through a few commands to help developers bridge the drawing system and business system to form a relatively unified system from the outside. So development and deployment are very easy.

{
  "name": "overmind-x-graph"."version": "0.1.0 from"."author": "luffyZh <[email protected]>"."keywords": ["drawio"."react"."next.js"]."scripts": {
    "start": "next dev"."build": "next build"."prod": "next start"."drawio-dev": "cd drawio-project/src/main/webapp && serve"."drawio-build": "source ~/.bash_profile && cd drawio-project/etc/build && ant"."gen-drawio": "rm -rf public/drawio && cp -r drawio-project/src/main/webapp public/drawio"."analyze": "ANALYZE=true next build". },... }Copy the code

Script Command Description

• yarn drawio-devDebug DrawIO drawing system in development mode

This command is to help developers into the drawing system development mode, although the two systems bridge together, but in the development of the drawing system is still recommended as an independent system to look at, and DrawIO two open process involved in the modification of the drawing source code part are completed in the drawing system, So the development mode of DrawIO drawing system is very important.

• yarn drawio-buildBuild the DrawIO system

When DrawIO is turned on or phased tested, you need to build the modified files in the development environment into the version in the production environment. In this case, you can use this command to complete the construction work.

• yarn gen-drawioSynchronize the latest drawing system to the master system

How to bridge a drawing system to a business system? It is through this command to achieve, the drawing system is as a separate subsystem for development and compilation, after compilation only need to execute this command to the main system required by the drawing system core file can be taken over.

• next.config.js— Master system configuration file, bridge subsystem

const fs = require('fs');
const path = require('path'); .module.exports = {
  reactStrictMode: true.// Rewrite the DrawIO static station address to bridge the master subsystem
  rewrites: async () => drawioPaths,
};
Copy the code

So how does the master system complete the bridge between the drawing system and the business system? The answer is through the Rewrites feature of Next. Js, those interested can refer to the official documents. It is because of this feature that it is possible for a single system to carry out DrawIO dual opening and it is very convenient to develop.

One more thing to say here, maybe you will not feel anything at first glance, but the final decision of this architecture is really the author after continuous development attempts to finalize, interested can go to run the code to experience. It doesn’t have to be Next. Js. If you’re a Vue based developer, is Nuxt out there waiting for you? This article only provides an idea, you can divergent ideas, after all, their own exploration process is more interesting.

Talk so much actually help you to see the official ready, based on architecture three built a scaffold simple- DRAwio-starter, we directly used to carry out the development of business logic can be.

conclusion

DrawIO powerful at the same time, the entire source file system structure is very complex, so struggled to read some kung fu, from the establishment needs to read the source code to the last two open architecture, a carelessly written the word long, hope this article can for those who have similar needs or wants to do a similar tool friends provide some help, In fact, DrawIO development difficulties is related to the technical documentation is relatively few, most of the community is using tutorials rather than two open tutorials, it is difficult to find a good entry to the development of the document is the author wrote this article one of the original intention, but also hope that we can take less detours.

Finally, thank you very much for reading this article patiently. If you have better insights and ideas in the DrawIO development process, please leave a comment and exchange

This article is published from netease Cloud Music big front end team, the article is prohibited to be reproduced in any form without authorization. Grp.music – Fe (at) Corp.Netease.com We recruit front-end, iOS and Android all year long. If you are ready to change your job and you like cloud music, join us!