DrawIO two open-it's time to recharge your ProcessOn for lifetime VIP

Author of this article: 溪岼

This article starts from the perspective of use, and explains step by step what DrawIO is, why it is necessary to carry out secondary development based on DrawIO and the core technical details of DrawIO secondary development and abstract a set of general two-open architecture. Therefore, the content of the article is longer and different stages Readers can read according to their needs. The overall structure of this article is as follows:

1-DrawIO secondary development requirements background (One entry into DrawIO is as deep as the sea)

2-Introduction to what DrawIO is and how to use it (Reveal the mystery of

3-Preparatory stage for the secondary development of (There is no way out of doubt, the old tears run through the DrawIO code)

4-Technical details of the secondary development of , master the DrawIO core two open code)

5-Detailed explanation of DrawIO secondary development architecture (Three considerations, abstract the general DrawIO development architecture)

background

For drawing various diagrams, such as flowcharts, prototype diagrams, topology diagrams, UML diagrams, mind maps, etc., are you still using Microsoft Visio, which has huge functions but must download the client and is also very large? Or are you still using ProcessOn free version, ten pictures are replaced and drawn back and forth tightly, after drawing this picture, download it, delete it and redraw another one (Of course, if you are a Krypton player, then I can only say, big Just be happy~)? With this article under the background of many of the above problems, I hope that different readers can get the corresponding gains after reading it.

• Simple users can get a simple and free advanced drawing tool with unlimited space.
• Advanced developers can easily and quickly build a free unlimited space and powerful drawing tool for themselves and their team.
• High-level two openers (understand and tried DrawIO two openers), can master a new secondary development mode, and gradually become fishing masters.

It's a bit embarrassing to talk about it so tall. To rephrase the reason is that the author’s main job in Cloud Music is to improve the efficiency of the R&D line. One day, the product and back-end students put forward a demand, which basically means that the team needs an internal charting tool, which can match the current company. Workflows are connected in series to complete the process closed loop, because the current working mode is to use ProcessOn or other drawing tools to draw the chart for product/R&D, and then take a screenshot/save it locally and then paste it, because ProcessOn has space limitations and it is not necessary for everyone to open a member. 😂, so it might as well just build one internally.

Based on the above-mentioned official/unofficial reasons, the author began to investigate the construction of this internal charting system, and finally confirmed the technology selection after a wait and see-the secondary development based on DrawIO.

[Note] : later in this article, secondary development will be referred to as two open

At present, the basic functions of this graphics system (drawing/accessing, etc.) have been developed and used in internal testing, and the author has also given the website a high-end and name-16163e0ff6b062 Overmind-X Graph , let's come together Take a look at the current effect of the website:

Introduction to DrawIO

Since the second opening is based on DrawIO, let's first understand what DrawIO is. Follow the author's perspective to go to DrawIO official website to take a look. The screenshot of the official website homepage is as follows:

In brief, that supports drawing various forms of charts and supports multi-location storage capabilities. I won’t say much about the function of drawing charts. This is also the core function of DrawIO itself. Here we will focus on the multi-location storage capabilities of DrawIO. Charts drawn through DrawIO can be stored in many places on the network, such as browser cache, local machine Folders, remote storage (Github, Gitlab, Google Drive, etc.). The storage browser and the local folder are very simple and will not be introduced. Here, I take Github as an example to briefly explain how to remotely store the charts drawn by DrawIO.

Store DrawIO to Github repository

• 1-Create a new warehouse on Github

Here the author has created a new drawio-folder , there is only one README.md file, as shown in the following figure:

• 2-Select GitHub as the storage space when drawing

Then click the Start button from the official website to enter the drawing page. The first time you enter the page, there will be an option to select storage space as shown in the figure below, and then select Github (other remote storage principles are the same).

• 3-Select the corresponding warehouse and draw a picture

Click to select and save to the Github repository, then select to create a new chart, and then click the Create button to complete the creation of the chart.

• 4-Authorization to select storage warehouse

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

• 5-Save the document after drawing

During the drawing process, each save operation will create a commit message , which is equivalent to normal warehouse modification and submission, as shown in the following figure:

After a chart is drawn and saved, you can go to the Github warehouse to see if the storage is successful.

As you can see, the chart created just now has been successfully stored in the Github warehouse, which is very convenient, basically equivalent to having an unlimited chart cloud disk.

At this point, I believe everyone should have understood how DrawIO draws and its powerful storage function. As mentioned at the beginning of the article, if you are a simple user, then the article is enough to read here. You already have a free and Powerful drawing tools (no need to open a membership, no registration, and no drawing limit) and many types of unlimited storage space. Isn't it popular compared to Some Apps, which requires a fee?

Why do DrawIO two open

Since DrawIO itself is so fragrant, why do you need to open it twice? Here is a brief summary of a few reasons why two openings or possible two openings are needed:

• First of all, what a team needs is not just a pure drawing tool, but an integrated management platform that includes drawing functions. Drawing is only the core part of it, and the rest have some essential functions.
• Secondly, in some special business needs, it is necessary to combine the chart with its own business to give full play to the greater capabilities of the chart or to carry out special transformations based on the business. This kind of scenario is inevitable.
• Finally, it is the so-called forced grid problem. To put it bluntly, it can be deployed in your company's independent deployment of services. Why should it be placed outside? The free version will be passive if one day it is not free or there are restrictions. (Although the possibility is extremely low, this factor should also be considered)

If you or your team also have the above reasons, then welcome to continue reading, and then I will introduce how to perform simple secondary development based on the official open source code of DrawIO.

DrawIO two open-process preparation

[Note] : This article is mainly for front-end developers, but there are a lot of content that depends on the Java environment in the process of developing, deploying and building a new version, so in order to ensure the continuity of the article, a brief introduction will also be given, if you are already familiar with the relevant environment Configure, then ignore the corresponding content.

Environmental preparation

• Front-end development environment

I won’t say much here. In fact, the development of DrawIO really belongs to the front-end category, so if you meet similar needs, you should rise to the challenge~

• Compile and build related environments-Java and Ant

Regarding the installation of Java and Ant environments, we will take MacOS as an example to explain, and refer to official tutorials for other systems.

As for why you need to use these two, the construction and deployment process will be introduced later, because there is a high probability that these two will not be installed on the computers of front-end development students, so here is a brief introduction to the installation steps.

# jdk 下载地址
https://www.oracle.com/java/technologies/javase-jdk16-downloads.htmlt

# ant 下载地址
https://ant.apache.org/bindownload.cgi

After downloading the jdk installation package, you can install it normally. To check whether the installation is successful, you can use the javac or java -version command to view the installed version, then unzip the downloaded Ant package to the Applications directory, and then run the following command.

# 写入环境变量
sudo vim .bash_profile
# 这里注意，版本号和你自己下载的要对应上
export ANT_HOME=/Applications/apache-ant-1.9.16
export PATH=$ANT_HOME/bin:$PATH
# 退出并保存
:wq
# 让环境变量生效
source .bash_profile
# 查看版本
ant -V

After the installation is complete, you can verify whether the installation is successful on the command line. If the corresponding Java and Ant version information as shown in the above figure appears in the command line, congratulations on the completion of the basic environment of DrawIO II. The next step is to officially enter DrawIO II. opened.

DrawIO source code

At the beginning of the second opening, firstly DrawIO source code repository , and run it locally to see the effect. The old rules Clone read the package.json file first and found that there was only one start command.

"scripts": {
  "start": "electron ."
}

Students who know the front-end should know that this command will launch an Electron desktop application. After running this command, no surprises, a desktop version of DrawIO will appear in front of you.

Its usage is the same as that described in the article above, but here comes the problem! Our ultimate goal is to carry out DrawIO two-opening, is it based on Electron two-opening? Although it is not impossible, the cost of getting started is high. It is estimated that a large group of students will be persuaded to leave. Don't panic, go to the official warehouse to see if there are other ways.

The effort pays off. As shown in the official document above, in addition to deploying applications based on Electron, DrawIO can also be deployed to Github Pages in the form of a static site, and the official site address will become clearer after https://jgraph.github.io/drawio/src/main/webapp/index.html : 06163e0ff6ba25. It can be observed from the link that the site deployed by Github Pages is /src/main/webapp , which is the root directory of the static station of DrawIO. Then the development of the static station is familiar to the front-end, so all the next two opening processes are The explanation is based on the form of a static station.

If your goal is to build a desktop application based on Electron, you can also perform the corresponding two-opening, and the process is basically the same as the two-opening of the static station. The selection of the development model is mainly based on analyzing the business demands of the team to draw conclusions. Because web applications are more universal and do not have so many limitations, Cloud Music chooses the static station model.

Development mode and preview

The fastest way to familiarize yourself with an unfamiliar application system or framework is to follow the entry file bit by bit. This is very similar to the usual process of reading the source code. The entry file of the /src/main/webapp/index.html static station is 06163e0ff6babd. Let's start with it and briefly introduce how to develop and debug DrawIO code locally.

• Step 1: Create a new package.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"
  }
}

First, create a package.json file 06163e0ff6bb69 in the root directory, then type the above content, and then use the yarn start or npm run start command to start a server locally for development access. The effect is as follows:

• Step 2: Modify the code and preview the development mode

Since the file system of the DrawIO project is very large, I will not introduce too much here. I will mainly introduce you to the core file directory src/main/webapp/js/diagramly during the second opening process. The files in this folder are the most core part of the system operation. Most of the work is also to modify the file content of this folder.

Among them, src/main/webapp/js/diagramly/App.js is regarded as an entry js file for loading DrawIO, and we type a piece of code in the first line:

It's easy to understand, that is, Alert a pop-up prompt to test whether the code can be executed normally, but after refreshing the page, you will find that you do not see this pop-up window. Why? Open the console to find the reason:

It is found that the load is not app.js but app.min.js . It seems that the code of the production version is loaded by default, so how to execute the development code to enter the development mode? Reading the source code carefully, you will find that DrawIO judges whether it is in development mode dev dev === 1 is development mode), then add this parameter and try again:

Up to this point, tens of thousands of unknown and cute animals appeared in the author's mind. It really wasn't that easy. It's okay. Technology is a process of continuous exploration. I hope you will not give up like me.

Of course, after reading this article, you have already saved 90% of the detours, so you just need to go to the second drive.

Why can't I find the file? To analyze briefly, it is still the problem of file orientation:

Local development should request the local resource file, but the Network panel found that the requested resource address is not correct, not much nonsense. If you go on, you may also collapse in your heart. Use the following code to make the development mode clear.

// index.html 从 245 行开始

// Changes paths for local development environment
if (urlParams['dev'] == '1') {
    ...
  
  // ====> 开发模式文件指向本地
  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;
  }
  // ====> 开发模式文件指向本地
  
  mxscript(drawDevUrl + 'js/PreConfig.js');
  mxscript(drawDevUrl + 'js/diagramly/Init.js');
  mxscript(geBasePath + '/Init.js');
  mxscript(mxBasePath + '/mxClient.js');
  ...
}

The core code and the corresponding location are already given above. After modification, refresh the page directly to see the effect:

It can be seen that the Alert pop-up window that we are thinking about has come out. At this moment, the author is already in tears. Up to this point, the development process of DrawIO 2K has basically been introduced. More details on how to change the 2K DrawIO is based on the needs of your team.

Build the production version

The development mode is completed above, and the local development real-time preview is completed. However, the final released code must still use the production version. As I know before, the production version uses app.min.js , so how to package the locally developed code What about compiling to production version? This will use the previously installed Java and Ant environment.

There is not much content here, it is very simple to add the following code to the package.json

{
  "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"
  }
}

After adding the above build command, run it. Not surprisingly, the following prompt of successful build will appear:

Then come to visit the homepage again. This time we don’t carry the dev=1 see the effect. As shown in the figure below, the newly developed production version is running perfectly. So far, the second stage of DrawIO has been developed from the development preview to the component production version. The introduction has been completed.

deploy

For deployment, just refer to the static station deployment. The core directory is src/main/webapp mentioned above. The author here briefly provides you with a few deployment ideas:

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

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

DrawIO two open-technical details

The drawing management system developed by the author based on DrawIO is in the internal beta of the cloud music team. The function sets that have been completed and are under development are as follows:

• [x] Basic drawing function
• [x] Based on the addition, deletion and modification of cloud music internal services
• [x] Personal center module, manage your own chart content
• [x] Data interaction, data interaction between charts and business systems, one-click import of created charts
• [] Todo-authentication function, such as sharing, the person with the specified permission can perform the corresponding operation
• [] Todo-team space, a team can manage a collection of charts
• [] Todo-Version history, support to view the latest version changes
• [] Todo-Customize and import some commonly used templates based on companies/persons

Since this article is still a technically oriented article, many of the above functions have nothing to do with DrawIO II. They are all based on business needs, so I don’t introduce too many details. I believe that all developers/teams will conduct DrawIO II. The main reason for opening, more than 80% is because you want to save the content on the internal service, that is to say, get the current drawing board and save it in the database according to a certain form. This is the most core part of the entire two-opening process. Here is an extension of the source code case in the two-opening process to talk about some technical details of the DrawIO two-opening process.

Get the current artboard content- getCurrentFile

So how to get the current artboard content? After App.js , I found the following code:

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

As the name implies, this code will be executed when it is saved, and a file object will be obtained. After adding a log, run the code to see the effect:

As you can see, a file file object is indeed printed. I will not explain the many attributes in the object one by one. Only the core data attribute is the file data. What can I do with this file data? Don't worry, then look down.

Download the construction file to the local

Through getCurrentFile we obtained the chart data currently being drawn from the canvas. Seeing that the content is an xml string, then we use this string to reverse construct a file and download it to see if it is exactly the same as the chart on the canvas. Here, filesaver the constructed file data through 06163e0ff6c2d3, the core code is as follows:

/**
 * 构造文件下载到浏览器
 **/
function download() {
  const fileObj = {
    title: 'luffyzh.drawio',
    data: '<mxfile host="localhost" modified="2021-09-02T09:50:39.574Z" agent="5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36" etag="PyBU88KGLdBE5FU7fpPf" version="@DRAWIO-VERSION@" type="device"><diagram id="C5RBs43oDa-KdzZeNtuy" name="Page-1">7VhZc5swEP41PLbD4WDnsThx0tbNpE3aTB9lkIVqwVIhfOTXdzHCgPH4aOscnvjBo12WlbTft4dtOP1ofiVJEn6BgArDNoO54VwYtn3WNfE7VywKhduzCwWTPChUVqW4449UK/V7LOMBTRuGCkAonjSVPsQx9VVDR6SEWdNsDKK5a0IYbSnufCLa2gceqLDQ9uxupb+mnIXlzpZ7XjyJSGmsb5KGJIBZTeVcGk5fAqhiFc37VOSxK+Py8HHxIIYT9+rT1/Q3+e59vr/58a5wNjjkldUVJI3V/3WtsZwSkel46buqRRlACVkc0NyJaTheqCKBSwuXv6hSCw04yRSgCqQKgUFMxBAg0XZjiJU2s3KZxsGHHFiURwL8SaEacCH0Hihp+x5KqZIwWWGXO1gBkRsLMqLCI/6ELQ/aBwESH8UQ09xVgGTQd6kOd1lpvT1jqzFIIZM+3WLnaIoTyeg2f25hl5+vxlON3BWFiCq5QANJBVF82iQz0TnBVnYV7rjQ0B9AA6dFA5GNx4vHcAsbciRmIVf0LiHLkMywfjQZUkceL+cxQdJU47YD1sNgmVKp6HxrIMunrs5mXc56WpxVtcEqEz6s1YWOeaTQd1qh/4nl8i0J/yUJ3T2TsOxRO7NQk6Ukxt5JqT3dAsd7VSYwHqd4sHXqrDb8ezadtdh0Ay0y7cbjVdPtmcjUPYxL1ovnktvi0pBEiWG7AsPgjSSuWL5KRMYYkgXdxYYzaNeuEKJRlu5uFw2McwYNSMRFHq9rKqZUcZ9saCpEcIb7XvgIN5WbyYNb8pih5FbS/ZKsWH+P2Gy6zWazkuvdxtzQbXrH6jbdFqa3iF4BnW2KJb4n1vEdew2E8+du+b19ivSrLsFP3vHLarq75Vt7lmnNHvO9g58GgV7+FHC+10z5NgYch2H2qQ0C5QlrfPIyMWpPAqNMxstBADL1NglsmwTsTU3oSSeBshDWQP1GE8IRTHN4inPA+i//jvPcc0BZKZoQiDymtllk2IlhsD6LOdbxMECx+m+2KIXVH9zO5R8=</diagram></mxfile>'
  }
  const blob = new Blob([fileObj.data], {type: 'application/octet-stream'});
  saveAs(blob, fileObj.title);
}

From the code and screenshot effects, we can conclude that by getCurrentFile , you can easily reversely construct a .drawio file, which is a drawing file, and it is exactly the same as the file on the canvas (I feel like I’m saying Nonsense, of course it's exactly the same, the data are all the same, it's strange that he is different).

Draw the saved chart data onto the canvas- loadFile

In the above two steps, we have determined the acquisition of canvas data and whether the data can be reversed to construct the chart file, thereby determining the feasibility of the technical solution, but in fact, there is still the last link-loading the chart data to the canvas, because you The chart can not only be saved, but also need to be able to continue editing. Therefore, the data is obtained from the file and then reversely constructed into chart data and loaded onto the canvas. This completes a minimum closed loop of DrawIO with two openings. Don't do too much nonsense here, the core API — loadFile , the detailed code is as follows:

if (this.editor.isChromelessView()) {
    ...
}
/**
 * 如果有id，表示打开了一个存在的文档，进入编辑模式
 */
else if (urlParams['id']) {
  const mockFile = {
    title: 'luffyzh.drawio',
    data: '<mxfile host="localhost" modified="2021-09-02T09:50:39.574Z" agent="5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36" etag="PyBU88KGLdBE5FU7fpPf" version="@DRAWIO-VERSION@" type="device"><diagram id="C5RBs43oDa-KdzZeNtuy" name="Page-1">7VhZc5swEP41PLbD4WDnsThx0tbNpE3aTB9lkIVqwVIhfOTXdzHCgPH4aOscnvjBo12WlbTft4dtOP1ofiVJEn6BgArDNoO54VwYtn3WNfE7VywKhduzCwWTPChUVqW4449UK/V7LOMBTRuGCkAonjSVPsQx9VVDR6SEWdNsDKK5a0IYbSnufCLa2gceqLDQ9uxupb+mnIXlzpZ7XjyJSGmsb5KGJIBZTeVcGk5fAqhiFc37VOSxK+Py8HHxIIYT9+rT1/Q3+e59vr/58a5wNjjkldUVJI3V/3WtsZwSkel46buqRRlACVkc0NyJaTheqCKBSwuXv6hSCw04yRSgCqQKgUFMxBAg0XZjiJU2s3KZxsGHHFiURwL8SaEacCH0Hihp+x5KqZIwWWGXO1gBkRsLMqLCI/6ELQ/aBwESH8UQ09xVgGTQd6kOd1lpvT1jqzFIIZM+3WLnaIoTyeg2f25hl5+vxlON3BWFiCq5QANJBVF82iQz0TnBVnYV7rjQ0B9AA6dFA5GNx4vHcAsbciRmIVf0LiHLkMywfjQZUkceL+cxQdJU47YD1sNgmVKp6HxrIMunrs5mXc56WpxVtcEqEz6s1YWOeaTQd1qh/4nl8i0J/yUJ3T2TsOxRO7NQk6Ukxt5JqT3dAsd7VSYwHqd4sHXqrDb8ezadtdh0Ay0y7cbjVdPtmcjUPYxL1ovnktvi0pBEiWG7AsPgjSSuWL5KRMYYkgXdxYYzaNeuEKJRlu5uFw2McwYNSMRFHq9rKqZUcZ9saCpEcIb7XvgIN5WbyYNb8pih5FbS/ZKsWH+P2Gy6zWazkuvdxtzQbXrH6jbdFqa3iF4BnW2KJb4n1vEdew2E8+du+b19ivSrLsFP3vHLarq75Vt7lmnNHvO9g58GgV7+FHC+10z5NgYch2H2qQ0C5QlrfPIyMWpPAqNMxstBADL1NglsmwTsTU3oSSeBshDWQP1GE8IRTHN4inPA+i//jvPcc0BZKZoQiDymtllk2IlhsD6LOdbxMECx+m+2KIXVH9zO5R8=</diagram></mxfile>'
  }
  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)) {
  ...
}

When the above code enters the page, it will determine whether the link carries the parameter id . If it is carried, a simple DrawIO file data object will be constructed, and then loadFile . The specific effect is shown in the following figure:

Based on this case, we can basically explain the core technical details of the entire DrawIO two open, and the entire two open process can be connected clearly. I believe you already have your own grand blueprint in your mind, then you can put your ideas Put it into practice.

If you want to actually visit and experience the effect, I simply deployed a personal version of DrawIO here, and you can access it through the following link:

• Personal Edition DrawIO
• DrawIO file download
• DrawIO loadFile Load file

DrawIO two open-core architecture

I have talked about a lot of development process and the details of stepping on the pit. Then, in addition to helping you step on the pit, the author also summarized the recent DrawIO two-open experience and designed a DrawIO two-open development architecture. Here is a brief introduction. The design process of this architecture.

In fact, DrawIO II is more about developing a closed-loop system with drawing functions as the core. Therefore, in addition to basic drawing functions, how to cleverly integrate DrawIO drawing functions into the system is the most critical part. For this, I have summarized Three architectural models:

Architecture one-single static station mode

single static station mode The shown in the figure above. The whole architecture is based on the DrawIO static station directory src/main/webapp as the root directory and is developed in accordance with the most primitive static station development model. The entry file is index.html , and the core of loading drawing depends on the js file to complete the drawing function. There is no coupling logic between the other function pages and the drawing page. You can create several html files html file corresponds to a function. Carry out the development iteration of the project. For example, the home page is home.html + home.js , the list page is list.html + list.js etc., and all development has returned to the original front-end development model — HTML + JavaScript + CSS .

advantages: logic is simple and easy to understand, based on the DrawIO source code warehouse directory for incremental development, easy to use

Disadvantages of brings low efficiency. The native development model does not use popular frameworks and packaging tools, which is not in line with modern development models.

Architecture Two-Dual System Mode

Based on the analysis of the first static station architecture model, it can be known that this model is actually not in line with the current front-end development rhythm. The inefficiency of the original method is the most deadly. Then the second architecture model is formed after the transformation-dual System mode. There are two systems in this mode: the DrawIO drawing system and the brother business system. In fact, in the entire system, the core drawing functions and other business requirements can be completely decoupled, so the business that has nothing to do with drawing can be extracted. Form a system alone, and this system can be developed using modern development models, and there are no restrictions on the selection of the architecture of the brother system. You can use whatever you want to develop.

Advantages of dual systems are independent of each other and do not affect each other. Brother business systems can also use the latest framework and technology to improve efficiency.

Disadvantages: development iteration requires the maintenance of two systems, two domains and two environments increase maintenance costs.

Architecture Three-Special Single System Mode

According to the analysis of the above two architectures, the first architecture increases the development complexity due to the original development model, and the second architecture improves the development efficiency by decoupling the formation of dual systems, but introduces the additional cost of maintaining dual systems, which leads to increased management complexity. Therefore, the advantages and disadvantages of the two architectures are integrated, and finally the third architecture is formed- special single system mode . This architecture combines the advantages of the above two architectures, and improves development efficiency through some special solutions. The architecture diagram is shown in the following figure:

The following focuses on explaining how this special single-system architecture solves the development and management complexity problems mentioned above.

Solving the complexity of development is actually very simple, just introduce a suitable modern framework, here I introduce Next.js, why introduce Next.js instead of other modern frameworks? The reasons are as follows:

• First of all, 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 many features that can help solve management complexity, which will be discussed later.
• Finally, the author personally likes Next.js very much, and this reason is the best.

package.json file, which is the core of the entire architecture. In fact, there are not many complicated operations. It is to help developers bridge the drawing system and business system through a few commands to form a relatively unified external system, because it is based on modern The special single system formed by the mode bridge, so the development and deployment are very easy.

{
  "name": "overmind-x-graph",
  "version": "0.1.0",
  "author": "luffyZh <[e-mail]>",
  "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",
    ...
  },
  ...
}

Script command description

• yarn drawio-dev —— Debug DrawIO drawing system in development mode

This command is to help developers enter the development mode of the drawing system. Although the two systems are bridged together, it is recommended to treat the drawing system as an independent system during development, and the changes involved in the DrawIO second opening process The part of the source code is completed in the drawing system, so the development mode of the DrawIO drawing system is very important.

• yarn drawio-build —— Compile DrawIO system

When DrawIO II is opened or the phased test deployment is completed, the files modified in the development environment need to be built into the version of the production environment. At this time, use this command to complete the construction work.

• yarn gen-drawio —— Synchronize the latest drawing system to the main system

How to bridge the drawing system and business system? It is achieved through this command. The drawing system is treated as a separate subsystem for development and compilation. After compilation, you only need to execute this command to get the drawing system core files required by the main system.

• next.config.js -main system configuration file, bridge subsystem

const fs = require('fs');
const path = require('path');

...

module.exports = {
  reactStrictMode: true,
  // 重写 DrawIO 静态站地址，桥接主子系统
  rewrites: async () => drawioPaths,
};

So in what way does the main system complete the bridging between the drawing system and the business system? The answer is to use the Rewrites interested can refer to the official documentation. It is precisely because of this feature that the single-system DrawIO two-opening becomes possible and the development is also very convenient. The bridge dual system allows The whole project forms an independent and complete system is the core of this architecture.

One more thing here, you may not feel anything at first glance, but the final decision of this architecture is indeed finalized by the author after continuous development attempts. If you are interested, you can run the code to experience it. In addition, just choose a framework that suits you. It doesn't have to be Next.js. If you are a Vue-based developer, is Nuxt waiting for you quietly? This article just provides an idea, you can diverge your ideas, after all, the process of exploring by yourself is more interesting.

In fact, I have prepared a lot for you to help the . Based on the 16163e0ff6dbf6 architecture three , a scaffolding simple-drawio-starter . You can use it directly to develop business logic.

Summarize

DrawIO is powerful and the file system structure of the entire source code is also very large and complex. Therefore, it takes a lot of effort to read. From the establishment of the requirements to the reading of the source code to the final two-open summary structure, it was accidentally written into a ten-thousand-word long article. Hope This article can provide some help to friends who have similar needs or want to build a similar tool. In fact, the difficulty of DrawIO development is that there are relatively few related technical documents. Most of the community uses tutorials instead of two-open tutorials, which are difficult to find. A good introductory development document can be regarded as one of the original intentions of the author for writing this article, and I also hope that everyone can avoid 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 message and exchange it. Thank you~

This article was published from big front-end team of NetEase Cloud Music . Any form of reprinting of the article is prohibited without authorization. We recruit front-end, iOS, and Android all year round. If you are ready to change jobs and you happen to like cloud music, then join us at grp.music-fe(at)corp.netease.com!