Intranet drawing service, the boss smiles happily

Original: Miss Taste (WeChat public account ID: xjjdog), welcome to share, please keep the source for reprinting.

A large part of the programmer's time is not writing code. They waved their mouse, chanted a mantra that no one could understand, and drew beautiful pictures.

This is especially true for architects, because this is the age of seeing faces and eating. If you are Pptugly, "customers" will spur you, and you will despise yourself.

I have been using the Mac version OmniGraffle, it has a lot of freedom and it is very cool to use. This software is very expensive, and it is stand-alone. You have to export various forms and share with your colleagues.

But having said that, such exquisite images are generally personal property, so the source files will not be forwarded.

share it

Therefore, what the boss wants is sharing. The picture drawn by small A can also be patched on by small B. Important drawings should not be scattered on the employees' computers. They need to be stored in one place.

This is no problem, like domestic ones ProcessOn, it is a very easy-to-use online drawing tool.

Easy to use but easy to use, but there is a very important problem, which is safety!

You will not allow your employees to put valuable drawings on a website that anyone can visit.

This is the same as going to the cloud, if you try to increase the scale, you will go to the private cloud. Public clouds are inherently distrustful, so putting the drawing source files on the Internet is very unreliable.

The reason lies in the fact that the company has no morals, and users are naturally suspicious.

There are many such things, such as the JSON formatting tool you often use, if you have sensitive information, it is undesirable; another example is what you put your account on, which is unreliable behavior.

We need to build a small world in the intranet, which contains commonly used services, and drawing services are one of them.

drawio

Such a solution actually existed many years ago, but it is deeply hidden.

drawioIt is an open source drawing library on gayhub, with rich legends and help documents.

The first wave of enlightenment gallery of xjjdog comes from here. After so many years of development, the legends inside have become richer and more successful.

Currently, it has multiple versions

Online version, https://www.diagrams.net/
Desktop version, https://github.com/jgraph/drawio-desktop/releases/ download
Source version, https://github.com/jgraph/drawio

What we are focusing on is its source version.

Create an online system

You can download the war package directly from https://github.com/jgraph/drawio/releases and put it in tomcat to have the online drawing function.

Visit localhost to get the complete drawing function.

At this point, it's not over yet. Because we now only have a drawing tool. It's just to move the tools on the desktop to the web.

We need to save the image information, and then model the storage permissions and presentation form in our own way.

This requires its Embedmode.

We can look at the following code. You can see that the src inside is the svg after Base64 encoding, which is the source file of our image.

<html>
<body>
 <script src="diagram-editor.js"></script>
 <img onclick='DiagramEditor.editElement(this);' src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIxMjFweCIgaGVpZ2h0PSI2MXB4IiB2aWV3Qm94PSItMC41IC0wLjUgMTIxIDYxIiBjb250ZW50PSImbHQ7bXhmaWxlIGV0YWc9JnF1b3Q7VGdBR2JKbGNJaGw3a1JuRGFxSDQmcXVvdDsgYWdlbnQ9JnF1b3Q7TW96aWxsYS81LjAgKE1hY2ludG9zaDsgSW50ZWwgTWFjIE9TIFggMTBfMTRfNikgQXBwbGVXZWJLaXQvNTM3LjM2IChLSFRNTCwgbGlrZSBHZWNrbykgQ2hyb21lLzgwLjAuMzk4Ny4xMDYgU2FmYXJpLzUzNy4zNiZxdW90OyBtb2RpZmllZD0mcXVvdDsyMDIwLTAyLTE5VDEyOjQ0OjI3LjY1OVomcXVvdDsgaG9zdD0mcXVvdDt0ZXN0LmRyYXcuaW8mcXVvdDsgdmVyc2lvbj0mcXVvdDtARFJBV0lPLVZFUlNJT05AJnF1b3Q7Jmd0OyZsdDtkaWFncmFtIGlkPSZxdW90O3JVdXh2bWFtZE5aMXpyTFhPbF82JnF1b3Q7IG5hbWU9JnF1b3Q7UGFnZS0xJnF1b3Q7Jmd0O2xaUExic0l3RUVXL0prc2t4Nll0V3dvcGZhaWxLcXFRMkpsNGNGdzVHZVFZU1ByMVRZaWRCeXphcmpJK21VZm1YaWRnczdSWUdMNVBYbEdBRGlnUlJjRG1BYVVocGF4NjFLUnN5VjFEcEZIQ3NRNnMxRGM0U0J3OUtBSDVJTkVpYXF2MlF4aGpsa0ZzQjR3Ymc2ZGgyZzcxY09xZVM3Z0NxNWpyYTdwV3dpWU5uZHlRamorQ2tvbWZIQkwzSnVVKzJZRTg0UUpQUGNTaWdNME1vbTJpdEppQnJ0WHp1cnlGNy9NeFpSK2piRU5pU2FmUlJxcFIwK3poUHlYdENnWXkrOWZXbnptWTVmYXJscFFTemJlVnIrZktsZVhHTmczOTBPeXdIZHVuWTFnc1g5YlBiSWU0THFlamJzUDJJM05iZWxVTkhqSUJkVDBKMkwzVVBNOWQzS3BVSDVvNVJ6QVdpZ3M3ZnRrbDdJMWZBS1pnVFZuVnVTN01lK0p1NWNRZFQ1M0RvVTlKZXU3ZU9zYmRwWkp0NTA2NEtuQWIrMk5QU284NjE4L3B2WitIUlQ4PSZsdDsvZGlhZ3JhbSZndDsmbHQ7L214ZmlsZSZndDsiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiByZ2IoMjU1LCAyNTUsIDI1NSk7Ij48ZGVmcy8+PGc+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEyMCIgaGVpZ2h0PSI2MCIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjMDAwMDAwIiBwb2ludGVyLWV2ZW50cz0iYWxsIi8+PGcgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxMnB4Ij48dGV4dCB4PSI1OS41IiB5PSIzNC41Ij5TdGFydDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" style="cursor:pointer;">
</body>
</html>

When saving, we only need to save this string of frequent codes to the database, or wherever you want, to complete the docking with our own system.

So how is this save action obtained? Drawio supports using Local Storage to store images. With the same Key, any changes you edit in the editor will trigger the source changes after clicking Save.

You can monitor these changes on the web, or do an extra save action to do these things. All the information is plaintext in disguise, so it will be handled very smoothly.

The example is longer, see http://jgraph.github.io/drawio-integration/localstorage.html#default

End

There is not much open source software like this conscientious. We recognize its icon.

It is very reliable to use it to build a private drawing library inside the enterprise. The functions are complete and the safety is guaranteed.

With this core component, to make a professional ProcessOn, isn't CRUD left?

About the author: Miss Sister Weiwei (xjjdog), a public account that does not allow programmers to make detours. Focus on infrastructure and Linux. Ten years of architecture, tens of billions of daily traffic, discuss the world of high concurrency with you, and give you a different taste. My personal WeChat xjjdog0, welcome to add friends and communicate further.