Mermaid Diagram Web Part for SharePoint Online

Last modified on March 16, 2025

I created this web part to add Mermaid diagram support in SharePoint Online as part of my tutorial series. While working on it, I found this discussion thread: Displaying Mermaid Diagrams in SharePoint Online Markdown Web Parts, which highlights the need for a proper solution.

View on GitHub Download from GitHub

CLIENT SIDE DEV: React

SPFX VERSION: 1.20.0

References

Build your first SharePoint client-side web part

Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.