starred/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2026-02-09 03:09:38 +03:00
Code Issues 784 Packages Projects Releases 10 Wiki Activity

Diagram/graph feature on wiki via markdown syntax #479

New Issue
Open
opened 2026-02-04 20:22:50 +03:00 by OVERLORD · 16 comments
OVERLORD commented 2026-02-04 20:22:50 +03:00
Owner
Copy Link

Originally created by @tuedang on GitHub (Oct 20, 2017).

For Feature Requests

Desired Feature:

It would be nice if we can support to transform chart/graph from markdown, it's perfect for developer in case of drawing diagram for visualize the things.

Expected Behavior

I have tried to play around on BookStack, and it somehow will be like this

markdown-graph

Technically, if we worry about performance because of expensive loading resource, we can apply lazyloading to load the graph resource.

Originally created by @tuedang on GitHub (Oct 20, 2017). ### For Feature Requests Desired Feature: It would be nice if we can support to transform chart/graph from markdown, it's perfect for developer in case of drawing diagram for visualize the things. ##### Expected Behavior I have tried to play around on BookStack, and it somehow will be like this ![markdown-graph](https://user-images.githubusercontent.com/7925077/31802764-26c463ca-b57a-11e7-93bf-eb4cfe1fcae6.png) Technically, if we worry about performance because of expensive loading resource, we can apply lazyloading to load the graph resource.
OVERLORD added the 🛠️ Enhancement> Markdown Editor labels 2026-02-04 20:22:50 +03:00
OVERLORD commented 2026-02-04 20:22:53 +03:00
Author
Owner
Copy Link

@andunix commented on GitHub (Nov 29, 2019):

This could be done by integrating mermaid. But I don't know, if it is only client side (rendering in browser).

@andunix commented on GitHub (Nov 29, 2019): This could be done by integrating [mermaid](https://mermaid-js.github.io/mermaid/#/). But I don't know, if it is only client side (rendering in browser).
OVERLORD commented 2026-02-04 20:22:58 +03:00
Author
Owner
Copy Link

@henri9813 commented on GitHub (Mar 27, 2020):

This feature would be awesome, we need this functionnality, currently, we draw network scheme on draw.io and after save it on the bookstack, but it's difficult to maintain ...

@henri9813 commented on GitHub (Mar 27, 2020): This feature would be awesome, we need this functionnality, currently, we draw network scheme on draw.io and after save it on the bookstack, but it's difficult to maintain ...
OVERLORD commented 2026-02-04 20:23:01 +03:00
Author
Owner
Copy Link

@cdrfun commented on GitHub (May 6, 2022):

Mermaid syntax is supported via diagrams.net https://www.diagrams.net/blog/mermaid-diagrams

@cdrfun commented on GitHub (May 6, 2022): Mermaid syntax is supported via diagrams.net https://www.diagrams.net/blog/mermaid-diagrams
OVERLORD commented 2026-02-04 20:23:07 +03:00
Author
Owner
Copy Link

@ravensorb commented on GitHub (Jan 16, 2024):

This would make it a lot easier to work with Bookstack. Would love to see this implemented -- maybe integration with something like https://kroki.io/ could help simplify (and add support for a number of different visualizations)?

@ravensorb commented on GitHub (Jan 16, 2024): This would make it a lot easier to work with Bookstack. Would love to see this implemented -- maybe integration with something like https://kroki.io/ could help simplify (and add support for a number of different visualizations)?
OVERLORD commented 2026-02-04 20:23:16 +03:00
Author
Owner
Copy Link

@recalcitrant-matter commented on GitHub (Mar 20, 2024):

Hello, we currently have implemented a simple work-around that allows us to render mermaid diagrams client side using the mermaid syntax.
image

To get this working we imported the mermaid rendering module using the Custom HTML Head Content option under customization according to the documentation https://mermaid.js.org/config/usage.html#using-mermaid.

image

Now just put your mermaid syntax in a <pre class='mermaid> element like this:

<pre class="mermaid">
flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
</pre>

and it should get rendered.

This hack is very similar to the Tex/LaTex (Hack https://www.bookstackapp.com/hacks/mathjax-tex/) and all the same limitations apply.

@recalcitrant-matter commented on GitHub (Mar 20, 2024): Hello, we currently have implemented a simple work-around that allows us to render mermaid diagrams client side using the mermaid syntax. ![image](https://github.com/BookStackApp/BookStack/assets/33179984/76c8c415-c96b-4d4b-aa1f-a4d006728635) To get this working we imported the mermaid rendering module using the **Custom HTML Head Content** option under customization according to the documentation https://mermaid.js.org/config/usage.html#using-mermaid. ![image](https://github.com/BookStackApp/BookStack/assets/33179984/c7eebb02-dd6b-42c9-a1b7-811dbfa74b37) Now just put your mermaid syntax in a `<pre class='mermaid>` element like this: ``` <pre class="mermaid"> flowchart TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car] </pre> ``` and it should get rendered. This hack is very similar to the Tex/LaTex (Hack https://www.bookstackapp.com/hacks/mathjax-tex/) and all the same limitations apply.
OVERLORD commented 2026-02-04 20:23:18 +03:00
Author
Owner
Copy Link

@A9G-Data-Droid commented on GitHub (Oct 21, 2024):

It would be nice to have a simple plugin interface in the settings. So that turning on mermaid could be a button that downloads the latest version. Makes update simple too, allowing updates to mermaid without updating BookStack. Maybe many JS libraries could benefit from this sort of modularity, including the highly requested math rendering.

@A9G-Data-Droid commented on GitHub (Oct 21, 2024): It would be nice to have a simple plugin interface in the settings. So that turning on mermaid could be a button that downloads the latest version. Makes update simple too, allowing updates to mermaid without updating BookStack. Maybe many JS libraries could benefit from this sort of modularity, including the highly requested math rendering.
OVERLORD commented 2026-02-04 20:23:24 +03:00
Author
Owner
Copy Link

@A9G-Data-Droid commented on GitHub (Oct 22, 2024):

Just to show how many places where Mermaid is used: https://mermaid.js.org/ecosystem/integrations-community.html

I got into it because it is the only way to make diagrams in GitHub readme pages. I would like to take my GitHub readme files and move them to BookStack, when migrating a wiki or whatnot.

@A9G-Data-Droid commented on GitHub (Oct 22, 2024): Just to show how many places where Mermaid is used: https://mermaid.js.org/ecosystem/integrations-community.html I got into it because it is the only way to make diagrams in GitHub readme pages. I would like to take my GitHub readme files and move them to BookStack, when migrating a wiki or whatnot.
OVERLORD commented 2026-02-04 20:23:29 +03:00
Author
Owner
Copy Link

@virtadpt commented on GitHub (Oct 22, 2024):

After playing around with it, this would be really helpful for drawing network maps and suchlike. I'll look into integrating that theme hack..

@virtadpt commented on GitHub (Oct 22, 2024): After playing around with it, this would be really helpful for drawing network maps and suchlike. I'll look into integrating that theme hack..
OVERLORD commented 2026-02-04 20:23:40 +03:00
Author
Owner
Copy Link

@Grovkillen commented on GitHub (Dec 12, 2024):

It may be an option to use the CLI implementation of Mermaid? https://github.com/mermaid-js/mermaid-cli

PHP: https://github.com/JBZoo/Mermaid-PHP

@Grovkillen commented on GitHub (Dec 12, 2024): It may be an option to use the CLI implementation of Mermaid? https://github.com/mermaid-js/mermaid-cli PHP: https://github.com/JBZoo/Mermaid-PHP
OVERLORD commented 2026-02-04 20:23:44 +03:00
Author
Owner
Copy Link

@Grovkillen commented on GitHub (Dec 12, 2024):

The same goes for Math: https://katex.org/docs/cli.html

@Grovkillen commented on GitHub (Dec 12, 2024): The same goes for Math: https://katex.org/docs/cli.html
OVERLORD commented 2026-02-04 20:23:54 +03:00
Author
Owner
Copy Link

@AstonishingStone commented on GitHub (May 26, 2025):

I'd like to start on this feature and do it - @ssddanbrown, would you be okay with me implementing Mermaid into BookStack ?

@AstonishingStone commented on GitHub (May 26, 2025): I'd like to start on this feature and do it - @ssddanbrown, would you be okay with me implementing Mermaid into BookStack ?
OVERLORD commented 2026-02-04 20:24:04 +03:00
Author
Owner
Copy Link

@AstonishingStone commented on GitHub (May 28, 2025):

I did it guys, can you check it out and tell me if it fits your need ?
https://github.com/BookStackApp/BookStack/pull/5630

@AstonishingStone commented on GitHub (May 28, 2025): I did it guys, can you check it out and tell me if it fits your need ? https://github.com/BookStackApp/BookStack/pull/5630
OVERLORD commented 2026-02-04 20:24:07 +03:00
Author
Owner
Copy Link

@ssddanbrown commented on GitHub (Jun 27, 2025):

Alexander-Wilms via Codeberg has contributed a hack for adding mermaid rendering (via a interactive viewer) on page view, which can be found here on the BookStack site: https://www.bookstackapp.com/hacks/mermaid-viewer/

@ssddanbrown commented on GitHub (Jun 27, 2025): [Alexander-Wilms via Codeberg](https://codeberg.org/bookstack/hacks/pulls/9#issue-1823490) has contributed a hack for adding mermaid rendering (via a interactive viewer) on page view, which can be found here on the BookStack site: https://www.bookstackapp.com/hacks/mermaid-viewer/
OVERLORD commented 2026-02-04 20:24:09 +03:00
Author
Owner
Copy Link

@nacesprin commented on GitHub (Nov 5, 2025):

Hello, we currently have implemented a simple work-around that allows us to render mermaid diagrams client side using the mermaid syntax. image

To get this working we imported the mermaid rendering module using the Custom HTML Head Content option under customization according to the documentation https://mermaid.js.org/config/usage.html#using-mermaid.

image

Now just put your mermaid syntax in a <pre class='mermaid> element like this:

<pre class="mermaid">
flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
</pre>

and it should get rendered.

This hack is very similar to the Tex/LaTex (Hack https://www.bookstackapp.com/hacks/mathjax-tex/) and all the same limitations apply.

That code renders through CodeMirror, and removes tag:

<div>
  <div class="cm-editor ͼ1 ͼ2 ͼ4 ͼ1p">
    <div class="cm-announced" aria-live="polite"></div>
    <div tabindex="-1" class="cm-scroller">
      <div class="cm-gutters" aria-hidden="true" style="min-height: 123.125px; position: sticky;">
        <div class="cm-gutter cm-lineNumbers">
          <div class="cm-gutterElement" style="height: 0px; visibility: hidden; pointer-events: none;">9</div>
          <div class="cm-gutterElement" style="height: 19.1875px; margin-top: 4px;">1</div>
          <div class="cm-gutterElement" style="height: 19.1875px;">2</div>
          <div class="cm-gutterElement" style="height: 19.1875px;">3</div>
          <div class="cm-gutterElement" style="height: 19.1875px;">4</div>
          <div class="cm-gutterElement" style="height: 19.1875px;">5</div>
          <div class="cm-gutterElement" style="height: 19.1875px;">6</div>
        </div>
      </div>
      <div spellcheck="false" autocorrect="off" autocapitalize="off" writingsuggestions="false" translate="no" contenteditable="true" style="tab-size: 4;" class="cm-content" role="textbox" aria-multiline="true" aria-readonly="true" data-hl-applied="true">
        <div class="cm-line">flowchart TD</div>
        <div class="cm-line"> A[Christmas] --&gt;|Get money| B(Go shopping)</div>
        <div class="cm-line"> B --&gt; C{Let me think}</div>
        <div class="cm-line"> C --&gt;|One| D[Laptop]</div>
        <div class="cm-line"> C --&gt;|Two| E[iPhone]</div>
        <div class="cm-line"> C --&gt;|Three| F[fa:fa-car Car]</div>
      </div>
      <div class="cm-layer cm-layer-above cm-cursorLayer" aria-hidden="true" style="z-index: 150; animation-duration: 1200ms;">
        <div class="cm-cursor cm-cursor-primary" style="left: 27px; top: 6px; height: 14px;"></div>
      </div>
      <div class="cm-layer cm-selectionLayer" aria-hidden="true" style="z-index: -2;"></div>
    </div>
    <button type="button" class="cm-copy-button">
      <svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
        <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path>
      </svg>
    </button>
  </div>
</div>

Any solution about that?
@nacesprin commented on GitHub (Nov 5, 2025): > Hello, we currently have implemented a simple work-around that allows us to render mermaid diagrams client side using the mermaid syntax. ![image](https://github.com/BookStackApp/BookStack/assets/33179984/76c8c415-c96b-4d4b-aa1f-a4d006728635) > > To get this working we imported the mermaid rendering module using the **Custom HTML Head Content** option under customization according to the documentation https://mermaid.js.org/config/usage.html#using-mermaid. > > ![image](https://github.com/BookStackApp/BookStack/assets/33179984/c7eebb02-dd6b-42c9-a1b7-811dbfa74b37) > > Now just put your mermaid syntax in a `<pre class='mermaid>` element like this: > > ``` > <pre class="mermaid"> > flowchart TD > A[Christmas] -->|Get money| B(Go shopping) > B --> C{Let me think} > C -->|One| D[Laptop] > C -->|Two| E[iPhone] > C -->|Three| F[fa:fa-car Car] > </pre> > ``` > > and it should get rendered. > > This hack is very similar to the Tex/LaTex (Hack https://www.bookstackapp.com/hacks/mathjax-tex/) and all the same limitations apply. That code renders through CodeMirror, and removes <code class="language-mermaid"> tag: ``` <div> <div class="cm-editor ͼ1 ͼ2 ͼ4 ͼ1p"> <div class="cm-announced" aria-live="polite"></div> <div tabindex="-1" class="cm-scroller"> <div class="cm-gutters" aria-hidden="true" style="min-height: 123.125px; position: sticky;"> <div class="cm-gutter cm-lineNumbers"> <div class="cm-gutterElement" style="height: 0px; visibility: hidden; pointer-events: none;">9</div> <div class="cm-gutterElement" style="height: 19.1875px; margin-top: 4px;">1</div> <div class="cm-gutterElement" style="height: 19.1875px;">2</div> <div class="cm-gutterElement" style="height: 19.1875px;">3</div> <div class="cm-gutterElement" style="height: 19.1875px;">4</div> <div class="cm-gutterElement" style="height: 19.1875px;">5</div> <div class="cm-gutterElement" style="height: 19.1875px;">6</div> </div> </div> <div spellcheck="false" autocorrect="off" autocapitalize="off" writingsuggestions="false" translate="no" contenteditable="true" style="tab-size: 4;" class="cm-content" role="textbox" aria-multiline="true" aria-readonly="true" data-hl-applied="true"> <div class="cm-line">flowchart TD</div> <div class="cm-line"> A[Christmas] --&gt;|Get money| B(Go shopping)</div> <div class="cm-line"> B --&gt; C{Let me think}</div> <div class="cm-line"> C --&gt;|One| D[Laptop]</div> <div class="cm-line"> C --&gt;|Two| E[iPhone]</div> <div class="cm-line"> C --&gt;|Three| F[fa:fa-car Car]</div> </div> <div class="cm-layer cm-layer-above cm-cursorLayer" aria-hidden="true" style="z-index: 150; animation-duration: 1200ms;"> <div class="cm-cursor cm-cursor-primary" style="left: 27px; top: 6px; height: 14px;"></div> </div> <div class="cm-layer cm-selectionLayer" aria-hidden="true" style="z-index: -2;"></div> </div> <button type="button" class="cm-copy-button"> <svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg"> <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path> </svg> </button> </div> </div> ``` Any solution about that?
OVERLORD commented 2026-02-04 20:24:17 +03:00
Author
Owner
Copy Link

@Grovkillen commented on GitHub (Nov 5, 2025):

Client side render is no problem but to be able to export the documents a server side render is needed. It's two different things.

@Grovkillen commented on GitHub (Nov 5, 2025): Client side render is no problem but to be able to export the documents a server side render is needed. It's two different things.
OVERLORD commented 2026-02-04 20:24:26 +03:00
Author
Owner
Copy Link

@artofactbe commented on GitHub (Feb 4, 2026):

Any update on this implementation? This is a must-have feature. Current AI tools can already generate these graphs, and they can be kept in sync easily with the information stored in BookStack.

@artofactbe commented on GitHub (Feb 4, 2026): Any update on this implementation? This is a must-have feature. Current AI tools can already generate these graphs, and they can be kept in sync easily with the information stored in BookStack.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
🎨 Design
📖 Docs Update
🐛 Bug
🐛 Bug
:cat2:🐈 Possible duplicate
💿 Database
☕ Open to discussion
💻 Front-End
🐕 Support
🚪 Authentication
🌍 Translations
🔌 API Task
🏭 Back-End
⛲ Upstream
🔨 Feature Request
🛠️ Enhancement
🛠️ Enhancement
🛠️ Enhancement
❤️ Happy feedback
🔒 Security
🔍 Pending Validation
💆 UX
📝 WYSIWYG Editor
🌔 Out of scope
🔩 API Request
:octocat: Admin/Meta
🖌️ View Customization
❓ Question
🚀 Priority
🛡️ Blocked
🚚 Export System
♿ A11y
🔧 Maintenance
> Markdown Editor
pull-request
Mirrored from GitHub Pull Request
No Label 🛠️ Enhancement > Markdown Editor
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
OVERLORD
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/BookStack#479
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?