Add Mermaid Plugin (Re-PR)

[Tim-Siu]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• DevOps
• Improve developer experience
• Others, please explain:

Overview of changes:
Identical to #2475 Re-PRed due to technical reasons
Related to #2052
Related to #1663 for pie-chart
Related to #984 for diagramming tool

This pull request is a continuation of the work done in the previously closed pull request #2052. It builds upon the changes and addresses the diagrams not rendered inside Vue components issue.

I would like to acknowledge and give credit to the original author, @tlylt , for his initial contribution and efforts in the closed pull request. Their work laid the foundation for the changes proposed in this new pull request.

Some changes include:

1. Upgrade the usage of Mermaid to v10.
2. Migrate JavaScript to TypeScript.
3. Drop the configuration customization as it seems no longer relevant (given loading issues are solved)

Please review the changes and provide any further feedback or suggestions for improvement. Thank you!

Anything you'd like to highlight/discuss:

function genScript(address: string) {
  return `<script type="module">
    import mermaid from '${address || DEFAULT_CDN_ADDRESS}';
    document.addEventListener('DOMContentLoaded', () => {
      Vue.directive('mermaid', {
        inserted: function(el) {
          mermaid.run({
            nodes: [el]
          });
        }
      });
    });
  </script>`;
}

Based on my ''ablation studies'', it seems like that importing the script will results in automatic initialization (for diagrams outside of Vue components) and the Vue directive will initialize the diagrams inside Vue components.

Testing instructions:

Proposed commit message: (wrap lines at 72 characters)

Support Mermaid

---

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No unrelated changes

---

Reviewer checklist:

Indicate the SEMVER impact of the PR:

• Major (when you make incompatible API changes)
• Minor (when you add functionality in a backward compatible manner)
• Patch (when you make backward compatible bug fixes)

At the end of the review, please label the PR with the appropriate label: r.Major, r.Minor, r.Patch.

Breaking change release note preparation (if applicable):

• To be included in the release note for any feature that is made obsolete/breaking

Give a brief explanation note about:

• what was the old feature that was made obsolete
• any replacement feature (if any), and
• how the author should modify his website to migrate from the old feature to the replacement feature (if possible).