I used these open source projects to easily build an online documentation platform

foreword

The author has recently made an online document platform for himself, which supports whiteboards, mind maps, documents, spreadsheets, PPT, flowcharts, Markdown, etc. The interface is as follows:

In fact, there are many such online document platforms on the market. Why do I want to make one myself? Let me tell you a long story.

At first, the author just wanted to add the function of cloud storage on the basis of the open source whiteboard project excalidraw , because its cloud save version is charged, and adding a database is not difficult. An open source mind map, mind-map , it is better to support its cloud storage at the same time. After that, every time you publish an article, you will use some Markdown tools to convert rich text, usually not stored. function, so it is stored based on markdown-nice . At this point, I think that it supports so many types of documents anyway, it is better to simply add common flowcharts and spreadsheets, so it becomes became what it is now.

So does the author's document platform have any advantages compared to the related products on the market? The answer is no, obviously, other companies rely on these products to make money, whether it is the function or the experience is definitely much better, and I just Some open source projects have added storage functions on the basis of it. Of course, it is not to say that open source is not good. After all, many companies' products on the market are also based on open source projects, but personal power is limited after all. The author can't do the online collaboration function, but for me, the collaboration function is basically useless, so it doesn't hurt. In addition, I can't use some so-called advanced functions in terms of functions, it can meet my basic needs.

If you insist on some advantages, the first is that the data is stored in your own hands, so you don’t have to worry about the problem of some small companies closing down and migrating data; the second is that there is no payment trouble, after all, many products will be restricted if you don’t pay and do not open a membership. The number of projects, some mind map products also limit the number of nodes, it is not easy to want to prostitute; the third is not to switch between various platforms, for example, some do not have Markdown rich text function, some There is no whiteboard function, and I can add anything I need, which is nothing more than a weaker function.

Next, I will introduce the open source projects used one by one.

Introduction to Open Source Projects

The following projects are basically divided into two types, one is a complete project form, that is, it can be run directly. This kind of author only needs to add some UI components such as buttons, title input boxes, prompts, etc. on the basis, and then real-time when the data changes. Save it to the database, get the data and backfill it when you open it again; the other is in the form of a library or component, which requires you to create your own project for use, plus the functions involved in the first one.

whiteboard

The author has made two kinds of whiteboards. One is a hand-painted style whiteboard based on excalidraw . This project is based on React . It is very powerful and supports drawing rectangles, circles, arrows, line segments, stylus, and text. At the same time, there are rich materials to choose from, and support end-to-end encryption for collaboration.

You can directly clone its repository and run it as a complete project. In addition, it also provides React components for easy embedding into your React project, the author does not need React , so it is directly modified based on its complete project. The interface is as follows:

The other kind of whiteboard used is tiny_whiteboard , a small project open sourced by the author, which is actually based on ---9c20635a0fc25f05a19b5df76753c53d excalidraw , because excalidraw is based on React Vue It is not very convenient to use in the project, so I thought of making a framework independent, of course, the function is much simpler, and because of the implementation method, it does not support the drawing of ellipse and other curve elements, and the performance is too much. It will drop, but after the actual drawing of the author's own articles, it can still meet the basic needs. The interface is as follows:

mind Mapping

The mind map selected is also an open source small project mind-map made by the author. The reason for this project is that when I used Baidu Mind Map, I found out that it is an open source kityminder , but its last update has been 4 years. Before, and the way the code is organized, I don't like it very much (it's not easy to understand), so I imitated it and made a castrated version (why is it castrated again, because the author's level is just so so).

Functionally, it supports four types of structures: logical structure diagram, mind map, organization structure diagram, and directory organization diagram. The author tried fishbone diagram, but did not make it (embarrassing). In addition, it supports theme setting, node dragging, etc. The interface is as follows:

flow chart

There are also two kinds of flow charts, one is made with bpmn-js BPMN flow chart, the basic use is relatively simple, but I couldn't find the detailed document after searching for a long time. Its official example looks pretty good. However, the source code was not found, and its effect was not fully realized in the end:

After using bpmn-js , I found a more powerful flowchart framework mxgraph , although this project has stopped updating, but its function is powerful enough, many flowchart products on the market are actually It is based on it, and it provides a basically complete project example grapheditor , and also comes with source code . Of course, because this project is relatively early, the organization of the code is not modular, and they all refer to each other through global variables. cdn , the author tried to convert it into modularization, but it didn't work, so I introduced vue , element-pls , axios based on it. axios Library to use, this project is the one that I spend the most time on, because its code volume is really huge, and there are many places to be modified: multi-language translation into Chinese, picture upload cdn , export function transformation (because the export of the example needs to cooperate with the back-end code), etc.

Markdown

Markdown There are many editors, but the main thing I need is to be able to convert rich text, so I finally chose markdown-nice in markdown-nice and md , the functions look more, This is also a project based on React , which supports setting themes and code themes. In addition, some small adaptations have been made for the official account and Zhihu. The author used it to type out this article:

Documentation

The document is actually a rich text editor. There are too many open source rich text editors. The author is also dazzling. Finally, I chose tiny from tiny and ckeditor-5 . I forgot the specific reason, maybe Its official website looks better, but what should I say, I regret it now, I should choose ckeditor-5 , because its document style really fits my "document" needs:

If you have time to change it later, the interface effect of tiny is as follows:

Spreadsheets

There are not many open source spreadsheet projects. The author chose Luckysheet because its configuration is simple, its functions fully meet my needs, and the interface is pretty good:

PPT

PPT To be honest, it is quite unexpected to find open source projects that meet the requirements, because common PPT projects are similar to slidev , reveal.js , impress.js , and I need Obviously it can be edited like the software that comes with the computer PPT . The author actually did one like this in the early days:

However, it has been in disrepair for a long time, and the function is relatively simple, and it has basically no practical value.

This project that surprised me is PPTist , it is a project based on Vue3.x , Office PowerPoint it has common functions, interface effects:

Summarize

This article introduces some excellent open source projects that the author uses in building personal online documents (ignoring the author's own projects). In the process of doing it, I also feel the selflessness and power of these contributors, as well as my own dishes. Share with you.