search

mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
68.69k stars 6.07k forks source link

Mermaid Compatibility with Salesforce Lightning Web Components (LWC) #5538

Open isalew opened 1 month ago

isalew commented 1 month ago

Description

mermaid.min.js does not load when used as a Third-Party JavaScript Library static resource in Salesforce Lightning Web Components.

The standard mermaid.min.js file uses a structuredClone() method, which is unsupported in Salesforce's javascript security models: Lightning Locker and Lightning Web Security.

mermaid.min.js can be modified so that diagrams successfully render in Salesforce (example: https://github.com/isalew/mermaid-sf) by replacing structuredClone(#) with JSON.parse(JSON.stringify(#)).

# Download the latest version of mermaid.js
npm i mermaid@10.9.0
# Copy the minified file to overwrite the current static resource
cp node_modules/mermaid/dist/mermaid.min.js force-app/main/default/staticresources/mermaid.js
# Replace all `structuredClone()` methods with a simple `JSON.parse(JSON.stringify())` object copy:
sed -i '' 's/structuredClone(/JSON.parse(JSON.stringify(/g' force-app/main/default/staticresources/mermaid.js
# Push the updated static resource to the org
sf project deploy start

I would like this to work "out of the box" so that it is easier to embed Mermaid.js into Salesforce implementations.

Steps to reproduce

  1. Setup a sample project using https://github.com/isalew/mermaid-sf and deploy to a test environment.
  2. Open the sample app and see that Mermaid works
  3. Replace the mermaid static resource with the latest unmodified mermaid.min.js file and deploy to the test environment.
  4. Open the sample app and inspect the javascript console. You will see mermaid is unable to properly load.

Screenshots

No response

Code Sample

No response

Setup

Suggested Solutions

mermaid.min.js can be modified so that diagrams successfully render in Salesforce (example: https://github.com/isalew/mermaid-sf) by replacing structuredClone(#) with JSON.parse(JSON.stringify(#)).

# Download the latest version of mermaid.js
npm i mermaid@10.9.0
# Copy the minified file to overwrite the current static resource
cp node_modules/mermaid/dist/mermaid.min.js force-app/main/default/staticresources/mermaid.js
# Replace all `structuredClone()` methods with a simple `JSON.parse(JSON.stringify())` object copy:
sed -i '' 's/structuredClone(/JSON.parse(JSON.stringify(/g' force-app/main/default/staticresources/mermaid.js
# Push the updated static resource to the org
sf project deploy start

Additional Context

No response