migrate_visualize-1.0.x-dev/js/mermaid.js

import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
import elkLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-elk@0/dist/mermaid-layout-elk.esm.min.mjs';

(function (Drupal, drupalSettings, mermaid) {
  Drupal.behaviors.migrateVisualize = {
    copySource: () => {
      document.querySelector('.migration-source textarea').select();
      document.execCommand('copy');
    },

    switchToVisualizeMigration: (event) => {
      document.querySelector('.migrate-visualize-migration-switcher').submit();
    },

    attach(context) {
      if (context !== document) {
        return;
      }

      const config = {
        startOnLoad: true,
        flowchart: {
          defaultRenderer: 'elk',
        },
      };

      mermaid.registerLayoutLoaders(elkLayouts);
      mermaid.initialize(config);

      document
        .querySelector('.migration-source .copy-source')
        .addEventListener('click', this.copySource);
      document
        .querySelector(
          '.migrate-visualize-migration-switcher .migration-switcher',
        )
        .addEventListener('change', this.switchToVisualizeMigration);

      document
        .querySelector('.migrate-visualize-migration-switcher .form-actions')
        .remove();
    },
  };
})(Drupal, drupalSettings, mermaid, elkLayouts);