First of all, I’d like to thank my in-laws for taking the baby for summer vacation, so I can have a weekend to develop this system.

Also thanks to my wife, I did my own thing for two days during the weekend and didn’t criticize me.

Lastly, I would like to thank the company for the team building, providing a hotel to stay and spending a night to fix the Chinese handwriting.

Note: This is the open source version of Excalidraw, thanks to the community

#1 Excalidraw

Introduce Excalidraw, product features

What is Excalidraw, it’s (probably) the most powerful online collaborative drawing tool, you can try it by visiting Excalidraw.

anatomy_of_an_azure_function.png

If you did not want get a blank diagram, then you can also visit this public panel Excalidraw to join in the creation.

excalidraw-share-room.png

Excalidraw works very well, I summarize a few points.

  • Hand Writing style (Hand Writing) to avoid OCD, what a pixel difference, are gone lie flat in the end
  • No delay in online collaboration, ideal for communication and collaboration in the post-epidemic era
  • The design of the product is excellent: shortcuts, object connection sticking, selected files directly to the local storage and other details are there

excalidraw-homepage.png

After this product was promoted internally by our internal partners, we quickly fell in love with it and put a lot of diagrams on Excalidraw, but it also led to a new problem.

Public SaaS services have data security risks
What to do? I'm going to self hosted it!

#2 Before deploying, let’s understand how Excalidraw works

How Excalidraw works and how self hosted works：

excalidraw-arch.png

So what is the core difficulty of self hosted.

Solving the excalidraw-storage data storage problem, aka. replacing the Google Cloud Platform’s firebase service.

#3 Self hosted PoC

If things don’t work out, ask yourself

- Mencius

It is better to seek from Github than to seek from yourself.

- alswl

Let’s start by looking at Excalidraw’s storage system. Firebase is Google’s Serverless service, formerly an independent company (and quite popular), but later acquired by GCP.

firebase.png

firebase-features.png

I started with the idea of replacing Firebase and found a community service Supabase (found a free SaaS service, amazing)

supabase.png

However, after careful research, I found that Supabase’s API is not compatible with firebase and cannot be simply replaced with .

Excalidraw also relies on Excalidraw+ to provide a paid service. Is there a simple and viable solution from the community? I found a bit of a solution within the community:

They gave a way (although it was later proven that there was still a crooked way).

So I started reviewing their solution, opened the code and saw that I had the right idea (replacing several interfaces of firebase), using my own KV storage (Redis / MySQL / Mongo) to replace it.

jing-shen.png

Attempted deployment and immediately ran into problems with:

Dockerfile build failed
Versions too far behind upstream (2020 -> 2022)
Merged with Rebase Unable to follow Upstream

What a coincidence that I’m Frontend Intern // Community Patching Specialist // Kubernetes Cleaner // YAML Senior Specialist , specializing in these few things.

#4 Let’s do it

Modification code architecture

self-hosted-excalidraw.png

#5 Future(or not)

Excalidraw is a free version of the SaaS service, Excalidraw+ is a paid version , what’s the difference?

excalidraw-price.png

To sum up.

  • More reliable storage, integrated to cloud storage (e.g. iCloud / NAS)
  • User identification, connected to a common identity system
  • More personalized permissions control (password access, targeted sharing), tenant control, project group control
  • Library shared within the domain
  • Integration with other systems (Yuque, Dingtalk Documents, Lark, etc.)

Or, just buy Excalidraw enterprise version!!! Less works, more enjoy.

#6 Chinese handwriting optimization

One problem is that Chinese fonts are not handwritten , which is very incongruous. Let’s see which fonts work first.

Chinese handwriting fonts supported by macOS:

cursive family:

  • PanziPen
  • LingWai
  • Hannotate

hanzipen-sc.png

Windows Chinese support for handwriting is poor, you have to install Office to have more options: 华文行楷; 方正舒体 (release in Office)

If not, only the system’s own italic KaiTi will work.

Finally, relying on my poor front-end level, I made a PoC and submitted a PR to the official: [feat: simple impl of multi font support, for chinese font by alswl - Pull Request #5604 - excalidraw/excalidraw] (https://github.com/excalidraw/excalidraw/pull/5604)

Here is the final result.

chinese-hand-writing.png

Update 2022-12

A few users came to me to ask how to deploy it. So based on the above solution, I provided a set of one-click pull-up services based on Docker Compose: with collaboration, Chinese font support. See alswl/excalidraw-collaboration.

原文链接: Self hosted online collaborative drawing platform Excalidraw | Log4D

3a1ff193cee606bd1e2ea554a16353ee

欢迎关注我的微信公众号：窥豹

窥豹