欢迎关注公众号 《小姐姐味道》 ,一起进步!

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

原创:小姐姐味道(微信公众号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,欢迎添加好友,​进一步交流。​


关注回复 技术 关键字 ,即可 获取 海量资源

鲁ICP备2020043359号-1