Original: Taste of Little Sister (wechat official ID: XjjDog), welcome to share, please reserve the source.

Programmers spend most of their time not writing code. They waved their mouse, mouthed incantations that no one could understand, and drew beautiful pictures.

This is especially true of architects, because this is the age of face. If your presentation is ugly, the “client” will spit on you and you will think less of yourself.

I’ve been using the Mac version of OmniGraffle, which has a lot of freedom and is fun to use. This software is expensive and stand-alone. You have to export forms and share them with your colleagues.

On the other hand, such exquisite images are usually the private property of the individual, so the source file will not be forwarded.

share

So, the boss wants to share. Little A drew A picture that little B could tinker with. Important drawings, not scattered on employees’ computers, need a centralized place to store them.

There’s nothing wrong with that. ProcessOn, for example, is a great online drawing tool.

Easy to use, but there is a very important problem, is security!

You don’t allow your employees to put valuable drawings on a website that anyone can access.

This is the same as on the cloud, to make a point of scale, all go to private cloud. Public clouds are inherently mistrustful, so putting the drawing source files on the web is very unreliable.

The reason lies in: the enterprise has no moral integrity, the user is naturally suspicious.

There are a lot of things like this. For example, if your JSON formatting tool has sensitive information, it should not be used. Again for example, you put your account number on what finch what ink, that is also unreliable behavior.

We need to build a small world in the Intranet, which contains common services, drawing service is one of them.

drawio

Such a solution, in fact, has been around for years, but it is deeply hidden.

Drawio is an open source drawing library on GayHub with rich illustrations and help documentation.

This is where xJJDog’s first wave of enlightenment galleries came from. After so many years of development, the legend inside is more and more rich, faint has the potential of great success.

Currently, there are several versions of it

  • Online, www.diagrams.net/
  • Desktop, github.com/jgraph/draw… download
  • Source code version, github.com/jgraph/draw…

What we are looking at is the source version of it.

Build an online system

You can go directly to github.com/jgraph/draw… Download the WAR package and put it in Tomcat to have the online drawing function.

Access localhost for full drawing functionality.

At this point, it’s not over. Because now we just have a drawing tool. It’s just taking tools from the desktop and putting them on the Web.

We need to save the information of the image and then model the stored permissions and presentation in our own way.

This requires the use of its Embed mode.

We can look at the following code. SRC, as you can see, is the Base64 encoded SVG, which is the source file for our image.

<html>
<body>
	<script src="diagram-editor.js"></script>
	<img onclick='DiagramEditor.editElement(this); ' src="data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOI iAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd mciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIxMjFweCIgaGVpZ2h0PSI2MXB4IiB2a WV3Qm94PSItMC41IC0wLjUgMTIxIDYxIiBjb250ZW50PSImbHQ7bXhmaWxlIGV0YWc9JnF1b3Q7VGdBR2JKbGNJaGw3a1JuRGFxSDQmcXVvdDsgYWdlbnQ9J nF1b3Q7TW96aWxsYS81LjAgKE1hY2ludG9zaDsgSW50ZWwgTWFjIE9TIFggMTBfMTRfNikgQXBwbGVXZWJLaXQvNTM3LjM2IChLSFRNTCwgbGlrZSBHZWNrb ykgQ2hyb21lLzgwLjAuMzk4Ny4xMDYgU2FmYXJpLzUzNy4zNiZxdW90OyBtb2RpZmllZD0mcXVvdDsyMDIwLTAyLTE5VDEyOjQ0OjI3LjY1OVomcXVvdDsga G9zdD0mcXVvdDt0ZXN0LmRyYXcuaW8mcXVvdDsgdmVyc2lvbj0mcXVvdDtARFJBV0lPLVZFUlNJT05AJnF1b3Q7Jmd0OyZsdDtkaWFncmFtIGlkPSZxdW90O 3JVdXh2bWFtZE5aMXpyTFhPbF82JnF1b3Q7IG5hbWU9JnF1b3Q7UGFnZS0xJnF1b3Q7Jmd0O2xaUExic0l3RUVXL0prc2t4Nll0V3dvcGZhaWxLcXFRMkpsN GNGdzVHZVFZU1ByMVRZaWRCeXphcmpJK21VZm1YaWRnczdSWUdMNVBYbEdBRGlnUlJjRG1BYVVocGF4NjFLUnN5VjFEcEZIQ3NRNnMxRGM0U0J3OUtBSDVJT kVpYXF2MlF4aGpsa0ZzQjR3Ymc2ZGgyZzcxY09xZVM3Z0NxNWpyYTdwV3dpWU5uZHlRamorQ2tvbWZIQkwzSnVVKzJZRTg0UUpQUGNTaWdNME1vbTJpdEppQ nJ0WHp1cnlGNy9NeFpSK2piRU5pU2FmUlJxcFIwK3poUHlYdENnWXkrOWZXbnptWTVmYXJscFFTemJlVnIrZktsZVhHTmczOTBPeXdIZHVuWTFnc1g5YlBiS WU0THFlamJzUDJJM05iZWxVTkhqSUJkVDBKMkwzVVBNOWQzS3BVSDVvNVJ6QVdpZ3M3ZnRrbDdJMWZBS1pnVFZuVnVTN01lK0p1NWNRZFQ1M0RvVTlKZXU3Z U9zYmRwWkp0NTA2NEtuQWIrMk5QU284NjE4L3B2WitIUlQ4PSZsdDsvZGlhZ3JhbSZndDsmbHQ7L214ZmlsZSZndDsiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvb G9yOiByZ2IoMjU1LCAyNTUsIDI1NSk7Ij48ZGVmcy8+PGc+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEyMCIgaGVpZ2h0PSI2MCIgZmlsbD0iI2ZmZmZmZ iIgc3Ryb2tlPSIjMDAwMDAwIiBwb2ludGVyLWV2ZW50cz0iYWxsIi8+PGcgZmlsbD0iIzAwMDAwMCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSIgdGV4dC1hb mNob3I9Im1pZGRsZSIgZm9udC1zaXplPSIxMnB4Ij48dGV4dCB4PSI1OS41IiB5PSIzNC41Ij5TdGFydDwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" style="cursor:pointer;">
</body>
</html>
Copy the code

All we have to do is save, when we save, this string of common code, save it to the database, or wherever you want, and we’re done with our system.

So how does this save action get obtained? Drawio supports the use of Local Storage to store images. With the same Key, any changes you make in the editor will trigger changes from the source when you click save.

You can listen for these changes on the Web, or do an extra save action to do so. All information is plain text in disguise, so it’s very smooth to process.

For longer examples, see jgraph.github. IO /drawio-inte…

End

There aren’t too many open source programs out there with such a conscience. We recognize its icon.

Use it to set up the enterprise internal private drawing library, is very reliable. Fully functional and secure.

With this core component, making a professional ProcessOn is just CRUD left, isn’t it?

Xjjdog is a public account that doesn’t allow programmers to get sidetracked. Focus on infrastructure and Linux. Ten years architecture, ten billion daily flow, and you discuss the world of high concurrency, give you a different taste. My personal wechat xjjdog0, welcome to add friends, further communication.