mirror of
https://github.com/BookStackApp/BookStack.git
synced 2026-02-08 03:09:39 +03:00
[Feature Request] Math & UML #423
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @Zottelchen on GitHub (Sep 5, 2017).
Desired Feature: Math & UML
I would really like a simple way to write down Math and UML. There are enough libaries which support Markdown and WYSIWYG (at least Math, not sure about UML). Also if Math is going to be included please don't forget an easy way to paste special symbols.
@noxify commented on GitHub (Sep 5, 2017):
For the UML part, do you mean something like this?
@Zottelchen commented on GitHub (Sep 11, 2017):
Yes, exactly. Both seem to give enough options to explain a process visually.
@TBK commented on GitHub (Jan 19, 2018):
For the math part of your feature request would https://www.mathjax.org/ suffice?
@noxify commented on GitHub (Jan 19, 2018):
For Mathjax, here the MD / TinyMCE implementation:
@DagW commented on GitHub (Jan 24, 2018):
+1 for Mermaid!
@TBK commented on GitHub (Mar 18, 2019):
@ssddanbrown could this be a v0.27.0 target? 🙏
@JHenneberg commented on GitHub (Apr 15, 2019):
I also would appreciate this very much :)
@nicobbg commented on GitHub (Apr 15, 2019):
Mermaid is available in Gitlab and is easy to use. It would be great to have this feature in Bookstack as well.
@ltDan79 commented on GitHub (May 9, 2019):
+1 :)
@schuepp commented on GitHub (May 23, 2019):
+1 mermaid looks super dope
@ThomasF34 commented on GitHub (Aug 18, 2019):
+1 for Mermaid features :)
@eceforge commented on GitHub (Nov 25, 2019):
For the math side of this might I recommend KaTeX https://katex.org/ instead of mathjax -- it's significantly faster and has no dependencies. I've had partial success in fact simply adding the required javascript include to the customer header section of bookstack. The problem comes when attempting to bind the auto-rendering to a javascript event as it seems to break the image insertion as described in #1588
@Lerke commented on GitHub (Dec 9, 2019):
Another +1 from me. Having embedded UML support via Mermaid or PlantUML instead of having to render it locally and upload would be a great feature!
@gkostkowski commented on GitHub (Jan 20, 2020):
+1 for Mathjax or KaTeX
@Zeigren commented on GitHub (Jan 22, 2020):
The included draw.io has support for PlantUML
@kwm1800 commented on GitHub (Apr 5, 2020):
+1 Seriously need this support. A lot of stuffs cannot be written well without math equations.
@ssddanbrown commented on GitHub (Apr 5, 2020):
I'll probably consider Math as part of the "Editor Alignment & Review" on the roadmap.
If you need something to get by for now, it is possible to insert math via the draw.io integration as described in my comment here:
https://github.com/BookStackApp/BookStack/issues/639#issuecomment-597112337
For markdown editor users, markdown is converted to HTML on the front-end using markdown-it. Looks like there's a few math based markdown-it plugins out there. We fire some events for the editors for people to "hook" into. Details of this can be found here:
https://www.bookstackapp.com/docs/admin/hacking-bookstack/#bookstack-editor-events
You may be able to use a plugin and the above editor hooks to implement this for your own system. An example of doing this for a different markdown-it plugin can be seen here:
https://github.com/BookStackApp/BookStack/issues/1671#issuecomment-607480496
Note, any custmomizations like this are out-of-support so could get broken in future updates.
@eceforge commented on GitHub (Apr 12, 2020):
So I have been successful in adding KaTeX rendering with just a simple addition to the custom header. This code snippet works only on the main content of an entry so it won't work in the editor or in page titles etc. I did that on purpose because the KaTeX auto-render plugin has some unintended effects when run on the parts of the DOM that include the add-image icon in the editor.
I'm no javscript expert -- feel free to suggest changes, I just couldn't stand not having math in my wiki pages.
The process of writing math would be a lot easier I think if we included the "preview" plugin for the tinyMCE GUI editor, I haven't gotten around to re-building the assets for bookstack to include that plugin though. So as of now you have to write the math in latex, and save the page to get it to render. The primary problem with just enabling it in editor is if you enable it then proceed to save the rendered math you get issues in the finished page. So either we need a button to "un-render" the math before the save or the preview function. Maybe a good use of the the new editor hooks?
@coffeepenbit commented on GitHub (Apr 28, 2020):
+1 I would really appreciate this feature. Right now I'm resorting to writing an equation and taking a screenshot of it.
@Bart-van-Ingen commented on GitHub (May 14, 2020):
+1 this would make bookstack an even better contender to confluence for example! the work around with draw.io, just isnt great ...
@ssddanbrown commented on GitHub (May 15, 2020):
Just had a quick review/think about this, Putting down some thoughts so I don't forget them:
@ascii78 commented on GitHub (May 17, 2020):
Would be nice if we could get some content like drawio from: https://www.mathcha.io. I do not think they are opensource though so that would be a problem, maybe you could get some ideas from it.
Some other nice graphical things would be:
But tbh. only a little bit of latex like it is in most markdown processors would be enough for me.
@ascii78 commented on GitHub (Jul 13, 2020):
Just noticed that the embedded draw.io app now features math support, even in the bookstack demo. It's under extra's -> mathematical typesetting. It's mathjax and works great:
"Not available in offline versions of draw.io", not sure how that would impact bookstack.
@davidjgraph commented on GitHub (Jul 31, 2020):
Not available offline is incorrect. Previously, draw didn't have a way to generate client-side PNG if Math was included, but now does.
@noahlove commented on GitHub (Sep 6, 2020):
+1 this would be an amazing feature
@dean-mrack commented on GitHub (Nov 11, 2020):
Mermaid or PlantUML is very amazing in Markdown editor +1
@MFYDev commented on GitHub (Dec 28, 2020):
+1 Really need this feature.
@dopoljak commented on GitHub (Jan 6, 2021):
+1
@Bruno4l commented on GitHub (Feb 3, 2021):
+1
@cadavre commented on GitHub (Mar 8, 2021):
Currently I'm using BookStack in such a way I create Mermaid graph in Live Editor which gives me PNG and I use it as a image. But below I paste source Markdown for future edit purposes. Having it built-in would be wonderful.
PS Having it in such a way with draw.io would albo be wonderful. ;) Currently draw.io once saved is not editable – it hurst, but it's different story. :)
@nightsparc commented on GitHub (Mar 8, 2021):
Would also love to have Mermaid around :)
That's not true...you can re-edit any draw.io diagram by just double-clicking on the image in the preview :)
@cadavre commented on GitHub (Mar 8, 2021):
Oh my... 😅 You just changed my life to better! Thank you! :)
@nightsparc commented on GitHub (Mar 8, 2021):
You're welcome :)
@paolobasso99 commented on GitHub (Dec 27, 2021):
Since I really wanted Latex support I developed a little hack that correctly display math both while viewing and editing a page (using markdown).
Firstly I include Katex in the head:
Then the following script add the event listeners to correctly displaying latex:
As you can see I use a MutationObserver.
I only use the markdown editor so I have implemented a solution only for that one but using MutationObserver and the
editor-tinymce::setupevent it should be easy to port this solution to tinymce.If you ever need to export as pdf or html you could export a markdown file and then convert it using, for example, pandoc which supports the KaTeX syntax.
@paolobasso99 commented on GitHub (May 1, 2022):
Apparently, the little hack I developed does not work anymore on the edit screen.
In particular
const pageContent = markdownDisplay.contentWindow.document.getElementsByClassName("page-content")[0];does not works and theiframeappears to have no source when using the developers tools (I do not understand why that is).The
loadelement of theiframeis not fired anymore too.@cdrfun commented on GitHub (May 6, 2022):
Mermaid syntax is supported via diagrams.net https://www.diagrams.net/blog/mermaid-diagrams
@dean-mrack commented on GitHub (May 6, 2022):
awesome, thank you )
Let me make just a little remark. The Mermaid diagram has a clear advantage over PlantULM, that allows you to select a text or search for it on page with diagram. In the implementation diagrams.net an image is formed, as well as silt at PlantUML. That's great, but Mermaid is better in its search capability.
But there is also a great https://kroki.io which in my opinion is even more interesting than Mermaid.
@cdrfun commented on GitHub (May 6, 2022):
Yeah, this is a good point and also an issue with the current diagrams implementation apart from using mermaid. Maybe it would be an option to extract all text from the diagram and add it somehow to the document?
@tacerus commented on GitHub (Oct 2, 2022):
@Zeigren
Is there any information on how to use this? The provided link unfortunately returns a 404. We run PlantUML ourselves and it would be great to integrate it with our BookStack instance.
@sceptri commented on GitHub (Dec 22, 2022):
As @paolobasso99 mentioned later, this unfortunately doesn't work. But today I played around with it a lot and it seems I got it working like so:
I know it is not the best solution, but it (kinda) works. Hopefully someone finds it useful 😄
@vfosnar commented on GitHub (Aug 29, 2023):
+1 for kroki
@pada57 commented on GitHub (Jan 12, 2024):
+1 for support of UMl as text based
This solution will be much better for developers as can maintain only one place in git their designs and push to bookstack as is without any picture convertion.
Plant or mermaid or both support will be a killer feature
Seems support is available at least on draw.io
https://www.drawio.com/blog/plantuml
@end-user commented on GitHub (Feb 10, 2025):
I'm still not clear on what the resistance is to mermaid support, and it doesn't seem to be a low-demand issue. Using diagram.net is a poor substitute because the diagram is just imported as an image, but the source of that is lost. We really need to keep the source of the diagram in the document so that it can be edited.
@ssddanbrown commented on GitHub (Feb 10, 2025):
@end-user Just to confirm, the drawing source is retained in the rendered diagram.net PNG files for re-editing, which is why you can re-edit diagrams you create via the editor. You can also import/drag-in these PNG files to other diagrams.net instances/windows for full drawing editing.
@end-user commented on GitHub (Feb 11, 2025):
@ssddanbrown Ah, I was not aware. It should be noted somewhere that this functionality is not available if the user is editing in markdown mode; images can only be re-edited through the WYSIWYG editor.
--I guess my remaining complaint about draw.io is: I'm not a designer, don't want to do all the layout. What I like about mermaid is that I can just feed it all the pieces of the flow/graph/diagram and it will do the layout. I don't see that to be the case on draw.io.--
Nevermind, I found where I can put the mermaid code (under "+", advanced).
@AstonishingStone commented on GitHub (May 28, 2025):
I made a PR to integrate Mermaid into BookStack, can you give it visibility please ?
https://github.com/BookStackApp/BookStack/pull/5630
@mallewski commented on GitHub (Nov 12, 2025):
+1 for PlantUML.
It’s more powerful and expressive than Mermaid or draw.io, especially for modeling complex systems, organizational processes, and software architectures. Native support would make BookStack far more versatile for technical and business documentation.