Adding Mermaid support in dart

So I have been trying to integrate the Mermaid API into flutter using this library Dart JS interop for Mermaid but failed miserably . Iam not experienced in web development so bear with me 🙂

I just wanted to preview Mermaid code as a graph in flutter.

I don’t understand how the library should be used , the documentation isn’t so clear and both examples lead to either to no results or a page like this one :-

I think maybe I added the JS calling Mermaid and the html key in the wrong file, I added them here :-

This is what I had followed and understood from the ambiguous documentation : –

    // adding this field is to somehow secure the nodes from bad content before rendering them
    
    final nullSanitizer_SVGCantBeInsertedWithoutIt = NullTreeSanitizer();

    /// out of the SVG file.
    class NullTreeSanitizer implements NodeTreeSanitizer {
      @override
      void sanitizeTree(Node node) {}
    }
    // the Mermaid code
    const testMarkdownWithMermaid = """
     [Sequence Diagram](http://mermaid-js.github.io/mermaid/#/./sequenceDiagram)
     ------------------
     ```mermaid
    sequenceDiagram
        actor Alice
        actor Bob
        Alice->>Bob: Hi Bob
        Bob->>Alice: Hi Alice
     ```
     """;
    ```
    // initializing the Api's configuration
    
        MermaidApi.initialize(Config(
          securityLevel: SecurityLevel.Strict,
          logLevel: LogLevel.Error,
          startOnLoad: false,
          arrowMarkerAbsolute: true,
          flowchart: FlowChartConfig(htmlLabels: true),
          sequence: SequenceDiagramConfig(),
          gnatt: GnattConfig(),
        ));
    
    // getting the "html" key
        final htmlDiv = querySelector('#html') as DivElement;
    
    // converting the Mermaid code to HTML and utilizing those Sanitizers
        htmlDiv.setInnerHtml(
          md.markdownToHtml(testMarkdownWithMermaid,
              extensionSet: md.ExtensionSet.gitHubWeb),
          treeSanitizer: nullSanitizer_SVGCantBeInsertedWithoutIt,
        );
    
    // finally rendering the graph 
        mermaidRender(htmlDiv.querySelectorAll('code.language-mermaid'));

I don’t know even why it just covered the webpage or how I got those results (https://i.stack.imgur.com/qLBaD.png[tag:result])] .

I tried adding the html of the htmlDiv in an HtmlWidget as well as the Mermaid code directly as the author of the library stated that the rendering can work with an html element that has the code . I also tried adding a WebView Scaffold with the HTML script , also that failed .

I am totally frustrated that even chatgpt couldn’t help , a funny tragedy :(:) .