Forum Discussion
Displaying Mermaid diagrams in Sharepoint Online Markdown web parts
Hello,
I have been trying to find a way to incorporate/visualize Mermaid diagrams in Sharepoint Online Markdown web parts. Currently, when I try to add Mermaid diagram code to the md content, the diagram does not display, only the underlying code displays.
I understand that it is possible to convert Mermaid diagrams to images and then add them to the Sharepoint page, but this breaks apart what would otherwise be intact md file content that can be transferred and displayed elsewhere if needed or pulled from a repository.
Any help or pointers to make this work would be greatly appreciated.
6 Replies
Hey Team, You can find a simple WebPart that I created, which renders a mermaid diagram.
https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-mermaid-diagram
- Adding mermaid would be a good step forward.
We are currently using mermaid on Azure Devops Wiki and would be great to do it also on Sharepoint. This would be great to have as soon as possible. Replying for post bump
tiongleeMicrosoft
+1
This is a must have in Sharepoint.
tmayrand Any luck?
From what I'm seeing https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/ there is a syntax to announce mermaid.
I tried this```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ```Or also this
:::mermaid graph TD; A-->B; A-->C; B-->D; C-->D; :::within a Markdown WebPart of SharePoint.
However neither worked.
I'm unsure if it's because my syntax is wrong, or if we just need for Microsoft to roll out an update where mermaid would be recognized.
Alternatively, what's a good way to do diagrams within SharePoint?
My previous company used Atlassian Confluence and I find the library of webpart in Sharepoint to be limited.
