內網繪圖服務，老板樂的笑出大金牙-有解無憂

原創：小姐姐味道（微信公眾號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，歡迎添加好友，進一步交流，