前言
筆者最近閒來無事給自己做了一個線上文件平臺，支援白板、思維導圖、文件、電子表格、PPT、流程圖、Markdown等，介面是這樣的：
其實現在市面上有很多這種線上文件平臺，筆者為什麼要自己做一個呢，且聽筆者短話長說。
最開始筆者只是想在開源白板專案excalidraw的基礎上增加雲端儲存的功能，因為它的雲端儲存版是要收費的，況且加個資料庫的增刪改查也不是什麼難事，做完以後想到自己做了一個開源的思維導圖mind-map，不如同時也支援一下它的雲端儲存，再之後，每次釋出文章時都會使用一些Markdown轉富文字的工具，通常也都沒有儲存的功能，於是又基於markdown-nice做了儲存，到了這一步，想著反正也支援了這麼多種型別的文件了，不如索性再把常見的流程圖、電子表格都加上好了，於是就變成了現在的樣子。
那麼筆者這個文件平臺對比市面上的相關產品來說有什麼優勢嗎，答案是完全沒有，很顯然，人家公司是要靠這些產品賺錢的，無論是功能還是體驗肯定好的多，而我只是在一些開源專案的基礎上增加了儲存的功能而已，當然不是說開源的不行，畢竟市面上很多公司的產品也是基於開源的專案做的，但是個人的力量終究是有限的，比如現在基本必備的線上協作功能筆者就做不出來，但是對於我個人來說，協作功能基本用不上，所以也無傷大雅。另外功能上我也用不上一些所謂的高階功能，能滿足我的基本需求就可以了。
如果硬要說一些優點，第一個是資料儲存在自己手裡，不用擔心一些小公司倒閉遷移資料的問題；第二個是沒有付費煩惱，畢竟很多產品不付費不開會員的話會限制建立的專案數量、有一些思維導圖產品還限制節點數量，想白嫖並不容易；第三個就是不用在各個平臺中切換，比如有的沒有Markdown轉富文字功能，有的沒有白板功能，而我自己需要什麼都可以加上，無非是功能弱一點而已。
接下來，筆者就挨個介紹一下所用到的開源專案。
開源專案介紹
以下專案基本分為兩種型別，一種是完整的專案形式，即可以直接執行的，這種筆者只要在其基礎上增加一些按鈕、標題輸入框、提示等UI元件，然後在資料變化時實時儲存到資料庫，再次開啟時獲取資料並回填即可；另一種是以庫或元件的形式，這個需要自己建立專案進行使用，再加上第一種涉及到的功能。
白板
白板筆者做了兩種，一種是基於excalidraw做的手繪風格白板，這個專案是基於React的，功能很強大，支援繪製矩形、圓形、箭頭、線段、手寫筆、文字等元素，同時有豐富的素材可供選擇，並且支援端對端加密進行協同。
可以直接克隆它的倉庫以一個完整的專案直接執行，另外它也提供了React元件的形式方便嵌入到你的React專案中，筆者不用React，所以是直接基於它的完整專案進行修改的，介面如下：
另一種白板使用的是筆者自己開源的一個小專案tiny_whiteboard，其實也是參考excalidraw做的，因為excalidraw是基於React的，所以在Vue專案上使用不太方便，於是就想著做一個框架無關的，當然功能簡陋了很多，並且因為實現方式原因，不支援繪製橢圓等曲線元素，效能上當元素多了也會下降，不過經過筆者自己幾篇文章的實際繪圖使用後，還是能滿足基本需求的，介面如下：
思維導圖
思維導圖選擇的也是筆者自己做的一個開源小專案mind-map，做這個專案的起因是在使用百度腦圖的時候發現了它是開源的kityminder，不過其上一次更新已經停留在了4年前，並且其程式碼的組織方式筆者不是很喜歡（不容易看懂），於是就仿照做了一個閹割版（為什麼又是閹割版呢，因為筆者水平just so so）。
功能上支援邏輯結構圖、思維導圖、組織結構圖、目錄組織圖四種結構，魚骨圖筆者嘗試了，但沒做出來（尷尬），另外支援主題設定、節點拖拽等，介面如下：
流程圖
流程圖也做了兩種，一種是使用bpmn-js做的BPMN流程圖，基本使用比較簡單，但是找半天沒有找到詳細的文件，它的官方示例看著還不錯，但是也沒找到原始碼，最終也沒有完全實現出它的效果：
在用bpmn-js做完後又發現了一個更強大的流程圖框架mxgraph，雖然現在這個專案已經停止更新了，但是它的功能已經足夠強大了，市面上很多流程圖產品其實都是基於它做的，並且它提供了一個基本上很完整的專案示例grapheditor，還附帶有原始碼，當然因為這個專案也比較早期，所以程式碼的組織方式不是模組化的，都是通過全域性變數互相引用的，筆者嘗試轉成模組化，但是沒有成功，於是就在它的基礎上通過cdn的方式引入vue、element-pls、axios庫進行使用，這個專案是筆者花費時間最多的一個專案，因為它的程式碼量真的很龐大，另外要修改的地方也比較多：多語言翻譯成中文、圖片上傳cdn、匯出功能改造(因為示例的匯出是需要配合後端程式碼的)等。
Markdown
Markdown編輯器有很多，但是筆者主要需要的是能轉富文字的，所以最後在markdown-nice和md中選擇了markdown-nice，功能看著更多一些，這也是一個基於React構建的專案，支援設定主題和程式碼主題，另外針對公眾號和知乎做了一些小的適配，筆者這篇文章就是使用它敲出來的：
文件
文件其實就是富文字編輯器了，開源的富文字編輯器可太多了，筆者也是挑花了眼，最後在tiny和ckeditor-5中選擇了tiny，具體原因忘記了，可能是它的官網更好看吧，但是怎麼說呢，現在很後悔，應該選擇ckeditor-5，因為它的document風格確實很符合我的“文件”需求：
以後有時間再改吧，tiny的介面效果如下：
電子表格
開源的電子表格專案並不多，筆者選擇的是Luckysheet，因為它的配置簡單、功能完全滿足筆者的需求、介面也挺好看：
PPT
PPT說實話能找到滿足要求的開源專案還是挺意外的，因為常見的PPT專案都是類似slidev、reveal.js、impress.js這樣的，而我需要的顯然是像電腦自帶的PPT軟體一樣可以編輯的，筆者早期其實也做過一個這樣的：
但是年久失修，而且功能比較簡單，基本沒啥實用價值。
這個給我意外驚喜的專案就是PPTist，它是一個基於 Vue3.x的專案，Office PowerPoint常見的功能它都有，介面效果：
總結
本文給大家介紹了一些筆者在搭建個人線上文件中用到的優秀的開源專案（忽略筆者自己的專案），做的過程中也感受到了這些貢獻者的無私和強大，也感受到了自己的菜，與各位共勉。