Cfernandes spfx branch

[cfernandes-muhimbi]

By submitting this pull request, you agree to the contribution guidelines

If you aren't familiar with how to contribute to open-source repositories using GitHub, or if you find the instructions on this page confusing, sign up for one of our Sharing is Caring events. It's completely free, and we'll guide you through the process.

To submit a pull request with multiple authors, make sure that at least one commit is a co-authored commit by adding a Co-authored-by: trailer to the commit's message. E.g.: Co-authored-by: name <[email protected]>

Put an x in all the items that apply ([x], no spaces between the [, the x, and the ] ), make notes next to any that haven't been addressed.

• New sample
• Bug fix/update
• Related issues: fixes #X, partially #Y, mentioned in #Z

What's in this Pull Request?

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.

Since the native Markdown web part in SharePoint Online does not support Mermaid diagrams, I built this SPFx web part to enable rendering Mermaid syntax directly. I'm sharing this in case others find it useful or have suggestions for improvements.

Node Version

v18.20.3

Node version used:

Checklist

This checklist is used to automatically pre-process your pull request; It is meant to help process pull requests in a timely manner, rather than hoops to jump through.

Put an x in all the items that apply ([x], no spaces between the [, the x, and the ] ). Make notes next to any that haven't been addressed.

• My pull request affects only ONE sample.
• My sample builds without any warnings
• I have updated the README.md file's Version history. For new samples, created a new README.md file matching this template
• My README.md has at least one static high-resolution screenshot (i.e. not a GIF) located in the assets folder.
• My README.md contains complete setup instructions, including pre-requisites and permissions required
• My solution includes a .nvmrc file indicating the version of Node.js

[github-actions]

Sample PR validation for #5424

⚠️ Validation status: warnings

We automatically validate all pull requests against our contribution guidance to ensure that all samples provide a consistent experience to our community.

In order to merge this PR in a timely manner, the following criteria must be met:

Validation	Status
Pull request affects only one folder	✅ Succeeded
Sample folder name follows naming convention	✅ Succeeded
README.md contains visitor stat image	⚠️ Warning
Sample requires a .nvmrc file	⚠️ Warning
Sample requires a README.md	✅ Succeeded
Sample requires a screenshot .png in assets folder	✅ Succeeded
No .sppkg file	✅ Succeeded
No node_modules folder	✅ Succeeded
No lib folder	✅ Succeeded

@cfernandes-muhimbi please address the above issues and push new changes to this branch.
For more information, see the contribution guidance.

[github-actions]

Sample PR validation for #5424

⚠️ Validation status: warnings

We automatically validate all pull requests against our contribution guidance to ensure that all samples provide a consistent experience to our community.

In order to merge this PR in a timely manner, the following criteria must be met:

Validation	Status
Pull request affects only one folder	✅ Succeeded
Sample folder name follows naming convention	✅ Succeeded
README.md contains visitor stat image	⚠️ Warning
Sample requires a .nvmrc file	✅ Succeeded
Sample requires a README.md	✅ Succeeded
Sample requires a screenshot .png in assets folder	✅ Succeeded
No .sppkg file	✅ Succeeded
No node_modules folder	✅ Succeeded
No lib folder	✅ Succeeded

@cfernandes-muhimbi please address the above issues and push new changes to this branch.
For more information, see the contribution guidance.

[github-actions]

Sample PR validation for #5424

⚠️ Validation status: warnings

We automatically validate all pull requests against our contribution guidance to ensure that all samples provide a consistent experience to our community.

In order to merge this PR in a timely manner, the following criteria must be met:

Validation	Status
Pull request affects only one folder	✅ Succeeded
Sample folder name follows naming convention	✅ Succeeded
README.md contains visitor stat image	⚠️ Warning
Sample requires a .nvmrc file	✅ Succeeded
Sample requires a README.md	✅ Succeeded
Sample requires a screenshot .png in assets folder	✅ Succeeded
No .sppkg file	✅ Succeeded
No node_modules folder	✅ Succeeded
No lib folder	✅ Succeeded

@cfernandes-muhimbi please address the above issues and push new changes to this branch.
For more information, see the contribution guidance.

[github-actions]

Sample PR validation for #5424

✅ Validation status: success

We automatically validate all pull requests against our contribution guidance to ensure that all samples provide a consistent experience to our community.

In order to merge this PR in a timely manner, the following criteria must be met:

Validation	Status
Pull request affects only one folder	✅ Succeeded
Sample folder name follows naming convention	✅ Succeeded
README.md contains visitor stat image	✅ Succeeded
Sample requires a .nvmrc file	✅ Succeeded
Sample requires a README.md	✅ Succeeded
Sample requires a screenshot .png in assets folder	✅ Succeeded
No .sppkg file	✅ Succeeded
No node_modules folder	✅ Succeeded
No lib folder	✅ Succeeded

[hugoabernier]

Thank you @cfernandes-muhimbi for your sample! Always appreciated!

We'd love to have your sample featured in one of our future community calls.

If haven't done so yet, and you'd be interested on showing this great sample in a public community call, please fill in following form and we'll get you scheduled - aka.ms/community/request/demo

Thank you for sharing your sample with others - you rock! 👏🥇👩‍💻