内网绘图服务，老板乐的笑出大金牙

原创：小姐姐味道（微信公众号ID：xjjdog），欢迎分享，转载请保留出处。

程序员有很大一部分时间，并不是在写代码。他们挥舞着鼠标，嘴里默念着无人能懂的咒语，画出一张张精美的图。

架构师尤其如此，因为这是一个看脸吃饭的年代。如果你的Ppt长的丑，“客户”就会唾弃你，你也会看低了自己。

我一直在用Mac版的OmniGraffle，它的自由度较大，用起来很爽。这个软件贵的很，而且是单机。你不得不导出各种形式，分享给你的同事。

不过话说回来，这种精美的图象，一般都是个人的私有财产，才不会把源文件给转发出去。

所以，老板要的是分享。小A画的图，小B也能够在上面修修补补。重要的图纸，也不要分散在员工的电脑上，需要一个地方集中存储。

这没什么问题，像国内的ProcessOn，就是非常好用的在线绘图工具。

好用归好用，但有一个非常重大的问题，就是安全性！

你不会允许你的员工，把宝贵的图纸，放在一个任何人都能访问的网站上。

这就和上云一样，搞来搞去上点规模，就都去搞私有云。公有云，天生的让人不信任，所以把图纸源文件放在网上，非常的不靠谱。

原因就在于：企业没有节操，用户自然多疑。

这样的事情很多，比如你常用的JSON格式化工具，如果有敏感信息，那是要不得的；再比如你把账号放在什么雀什么墨上面，那也是不靠谱的行为。

我们需要在内网中建立一个小世界，里面包含着常用的服务，绘图服务就是其中的一环。

drawio

这样的解决方案，其实在很多年前就已经有了，但它隐藏的很深。

drawio是gayhub上一个开源的绘图库，有着丰富的图例和帮助文档。

xjjdog的第一波启蒙图库，就来自于这里。经过这么多年的发展，里面的图例越发丰富，隐隐有大成之势。

目前，它有多个版本

在线版，https://www.diagrams.net/
桌面版，https://github.com/jgraph/drawio-desktop/releases/ 下载
源码版本，https://github.com/jgraph/drawio

我们盯上的，就是它的源码版本。

打造在线体系

你可以直接从 https://github.com/jgraph/drawio/releases 下载war包，然后放在tomcat里，就可以拥有在线绘图功能了。

访问localhost，就能获取完整的绘图功能。

到了这一步，还没有完。因为我们现在，只是拥有了一个绘图工具而已。不过是把桌面上的工具，搬到了web上而已。

我们需要保存下图像的信息，然后按照我们自己的方式，对存储的权限和展现形式进行建模。

这需要用到它的Embed模式。

我们可以看下面这段代码。可以看到里面的src，是Base64编码之后的svg，也就是我们图像的源文件。

<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>

我们只需要在保存的时候，将这一串常常的编码，保存到数据库，或者任何你想要的地方，就完成了和自己系统的对接。

那么这么保存动作是如何获取的呢？drawio支持使用 Local Storage 存储图像。通过相同的Key，你在编辑器里面编辑的任何改动，在点击保存后，都会触发源头的改动。

你可以在web上监听这些改动，或者多一次额外的保存动作去做这些事。所有的信息，都是变相的明文，所以处理起来就会非常的顺畅。

例子较长，参见 http://jgraph.github.io/drawio-integration/localstorage.html#default

End

像这么有良心的开源软件，已经不太多了。我们认清它的图标。

使用它来搭建企业内部的私有绘图图库，是非常靠谱的。功能齐全，安全性也有保障。

有了这核心组件，做一个专业的ProcessOn，不就是剩下CRUD了么？

作者简介：小姐姐味道 (xjjdog)，一个不允许程序员走弯路的公众号。聚焦基础架构和Linux。十年架构，日百亿流量，与你探讨高并发世界，给你不一样的味道。我的个人微信xjjdog0，欢迎添加好友，进一步交流。