mirror of
https://github.com/BookStackApp/BookStack.git
synced 2026-02-06 09:09:38 +03:00
MermaidJS Support #2718
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 @tiredofit on GitHub (Mar 21, 2022).
Describe the feature you'd like
To complement the diagramming features provided by Diagrams.net, I constantly find myself spending more time aligning my shapes getting them pixel perfect as opposed to just getting my diagram in place. I recently found Mermaid.js which is described as a "Markdown Syntax for Diagrams" and after realizing it exists in my Gitlab Wiki Instance, I see the value of it also being a feature within Bookstack.
Describe the benefits this would bring to existing BookStack users
Can the goal of this request already be achieved via other means?
I'm not sure. Yes, but not with a great user experience and would involve a third party service. A Button to create a "code block" to enter in the diagram would be easier, and allow it to be rendered upon save.
Have you searched for an existing open/closed issue?
How long have you been using BookStack?
1 to 5 years
Additional context
Have a peek at their live editor to see how effective it is to write diagrams in code. Yes, there are other renderers out there (ala PlantUML and the like) I feel Mermaid is a great stepping stone.
@ssddanbrown commented on GitHub (Mar 21, 2022):
Hi @tiredofit,
I feel that issue #566 already covers the fundamental request here so I'm going to close this off as a duplicate.
UML was also suggested in #495 with request for mermaid.
I took some discovery time for math and UML/mermaid a couple of years back, my resultant thoughts of which can be seen on this issue comment: https://github.com/BookStackApp/BookStack/issues/495#issuecomment-628919106
@cdrfun commented on GitHub (May 6, 2022):
Mermaid syntax is supported via diagrams.net https://www.diagrams.net/blog/mermaid-diagrams
@tiredofit commented on GitHub (May 6, 2022):
Yes, Diagrams/DawIO does support importing diagrams, but in a different fashion where each shape is an import of mermaid syntax - This request was more so that it could be read and inserted into the markdown editor and also legible when exported.
I haven't had the same success with the the Diagrams.net integration.
@cdrfun commented on GitHub (May 6, 2022):
I understand that this is not exactly what you are looking for. You want to insert the Mermaid code directly into the markdown editor. I want to point out, though, that it is possible to create and edit the diagram using mermaid syntax.
@mwatermolen commented on GitHub (May 26, 2022):
@cdrfun this is not ideal as it vastly inflates the underlying code to store the mermaid diagram and not really a solution as draw.io has limitations to what mermaid it can render
@cdrfun commented on GitHub (May 30, 2022):
@mwatermolen live rendering mermaid in the browser has it's own disadvantages, too. As I've said "I understand that this is not exactly what you are looking for" - but it could be a solution compared to no solution. Could you elaborate on whats possible with MermaidJS, but not with Diagrams?
@ravensorb commented on GitHub (Jan 16, 2024):
@cdrfun I am curious if you might reconsider this request with the idea of leveraging something like https://kroki.io/ to help with the implementation? Benefit would be a lot of additional rendering options come with it.
For a "why" this would be useful - its as simple as it is "easier" to write some markdown and have it rendered then always jumping over to yet another app working in it and the n coming back. That is one of the things that text to diagram visualizer have started becoming more and more popular in that it can be "good enough".
@cdrfun commented on GitHub (Jan 16, 2024):
Hi @ravensorb,
I'm not the maintainer, and I don't feel a urge to implement this feature by myself. I just pointed out, that you can do mermaid syntax diagrams in bookstack. The maintainer of bookstack, ssddanbrown, already commented and closed this issue;
@ravensorb commented on GitHub (Jan 16, 2024):
@cdrfun sorry about that -- I was mostly just responding to the list entry in the issue. I should have looked at #566 in more detail as this is pretty much what I was thinking too.