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