MarkBind / markbind

MarkBind is a tool for generating content-heavy websites from source files in Markdown format
https://markbind.org/
MIT License
135 stars 124 forks source link

Add Mermaid Plugin (Re-PR) #2531

Closed Tim-Siu closed 5 months ago

Tim-Siu commented 5 months ago

What is the purpose of this pull request?

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: :ballot_box_with_check:


Reviewer checklist:

Indicate the SEMVER impact of the PR:

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):

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).