Add a whiteboard drawing widget

[Muyv]

Describe the feature you'd like

The integration of drawio has proven to be extremely valuable for my daily work.
Hope rich text editor includes ability to create hand-drawn style diagrams like drawing on a whiteboard.

Describe the benefits this would bring to existing BookStack users

• beautiful & easy to use
• freestyle drawing
• lots of materials
• useful for xxx-storming
• supa awesome.

Can the goal of this request already be achieved via other means?

Yes.

Would you consider add this in the editor?
https://github.com/excalidraw/excalidraw

Have you searched for an existing open/closed issue?

• I have searched for existing issues and none cover my fundemental request

How long have you been using BookStack?

6 months to 1 year

Additional context

No response

[ssddanbrown]

Thanks for the request @Muyv.

I'm going to need to re-ask the what the "benefits this would bring to existing BookStack users" are for this request.

What you have provided in that response seem to be the benefits of a whiteboard application in general.
I instead want to know how a "whiteboard widget" would benefit existing users of BookStack:

• What would this allow users to achieve upon the capabilities already provided in BookStack?
• What is the importance of those new abilities?

Personally, from the provided information, this would appear to have a lot of overlap with the existing draw.io integration, so I don't really understand the benefits of "whiteboarding" to make it worthwhile implementation.

[Muyv]

Thank you for your reply @ssddanbrown .

I can describe my own needs, which may overlap with those of some users.

Bookstack is used as the knowledge base of my team. The built-in drawio of bookstack can be perfectly embedded in the article to display and edit the chart seamlessly. I want to use bookstack to record the process and save the data when I initiate the DDD event storming meeting. Excalidraw can be more Good implementation of whiteboard-style drawing (maybe it's just a difference in experience compared to drawio, but experience is very important at this moment), if it is built into bookstack, it can well achieve my needs.

So far, what I have expressed may only be a supplement to the whiteboard tool in terms of specific UX requirements, or it may be an alternative to drawio in most scenarios, or user demand preferences.

If there is anything more valuable about excalidraw, then I think it is remote real-time collaboration.

Just imagine, I can share an online whiteboard with colleagues thousands of miles away in a meeting, edit it in real time (maybe adding some development complexity), and then save the content in bookstack for review, which is a good extension of bookstack scenes to be used.

(🙃 Not good at English, thanks for Google translate)

[ssddanbrown]

Thanks for the further information @Muyv.

If there is anything more valuable about excalidraw, then I think it is remote real-time collaboration.

The reality is that this would introduce a lot more complexity in regards to user management and complexity, since there'd be the expectation of access control aligned with BookStack itself. This would require a lot of specific integration. At that point, I'd rather the platforms are kept completely separate. We don't have real-time collaboration for BookStack content, I don't see it wise to bring that to drawings via an external platform first, I'd want to have real-time collaboration for page content first.

So far, what I have expressed may only be a supplement to the whiteboard tool in terms of specific UX requirements, or it may be an alternative to drawio in most scenarios, or user demand preferences.

Are you aware draw.io (Now called diagrams.net) has a whiteboard mode?: sketch.diagrams.net

I think it would be possible to open the integrated diagrams.net view in that whiteboard mode, would that suit most of your needs?

[Muyv]

Okay, thank you @ssddanbrown . reasonable!

The sketch mode of diagrams.net is useful for some case, i would try to use.

BTW: For now...

In app.diagrams.net there is a menu command to change theme

However, it looks embed.diagrams.net inside bookstack has no such menu

So i have to add ui=sketch param to activate

Do i have to upgrade my bookstack(v22.11.1) to newest version for this case?

[ssddanbrown]

Hi @Muyv, You could change the URL used to embed diagrams.net, to add the parameter yourself, via the DRAWIO env option as described here.

For example:

DRAWIO=https://embed.diagrams.net/?embed=1&proto=json&spin=1&configure=1&ui=sketch

[ssddanbrown]

I'm going to go ahead and close this issue off since, as per my previous messages, I see too much overlap with the current diagrams.net integration, which can be used in a whiteboard mode as per the above setting.

[Muyv]

@ssddanbrown OK, that's the best practices so far, thanks for your attention to this matter!

[helmut72]

Personally, from the provided information, this would appear to have a lot of overlap with the existing draw.io integration, so I don't really understand the benefits of "whiteboarding" to make it worthwhile implementation.

Because Bookstacks primary target audioence is more mixed environments where ease-of-use and low barrier-to-entry take priority, IMHO Excalidraw suits this better than draw.io. Excalidraw is easier to use, with a fresh modern interface. I don't see Excalidraw as a whiteboard only, but a better alternative to the aged-ui and menu-cluttered draw.io. Excalidraw feels also great on iPad with Pencil, because of minimalist menus.

HTML and Markdown editors also have a lot of overlap in Bookstack. Both are there to write content. User experience decide what they use.

[HelloGithubUniverse]

Just as a suggestion: Wouldn't it make sense to give the possibility that the admin can integrate external resources himself? So you can add a button within the editor itself, which then executes JavaScript or just integrate an external resource? I am aware that this is possible via code, but in the sense of persistence after an update as well as simplicity per ux?

[morrolinux]

I'm another supporter of the excalidraw integration. The UI/UX is just better and feels more modern. It would be great if there was at least a plugin or something to integrate it.

[shakedbitan]

I'm going to support the excalidarw integration as well, I'm in a DevOps team that provides platforms in a big scale, we see a huge increasing in the use of excalidraw rather then draw.io, I have been asked multiple times that Bookstack would be able to support excalidraw.
I assume its not your priority but would really appreciate such feature in the future.

[Tomblarom]

+1 from me as well for Excalidraw integration. 🙂 BookStack already offers multiple text editors (WYSIWYG & Markdown) that overlap in purpose but differ in UX and target users. I think the same logic applies for visuals: diagrams.net for structured, formal diagrams and Excalidraw as a more freehand, whiteboard-style option. Let users pick the drawing environment that best fits their way of thinking, just like they can pick their preferred editor.

I'm not entirely sure, but wouldn't it be possible to host excalidraw in its own container, expose it and attach it over the DRAWIO env variable, similar like it's done with PDF-Renderers?