Generating Mermaid graph in web assembly

[W. Michael Petullo]

I have been using Go to define programs that I compile to web assembly.
This works well in general, but I do not yet understanding how to express
mermaid graphs (https://mermaid-js.github.io/mermaid/) from Go.

A hard-coded graph looks like this:

<div class="mermaid">
graph TD;
A-->B;
click A "https://www.flyn.org" "FC";
A-->C;
B-->D;
C-->D;
</div>

followed by including the Mermaid JavaScript.

In Go, I am doing this:

div := document.Call("createElement", "div")
div.Call("setAttribute", "class", "mermaid")

parent.Call("appendChild", div)
graph := document.Call("createTextNode", `
graph TD;
A-->B;
click A "https://www.flyn.org" "FC"
A-->C;
B-->D;
C-->D;`)

div.Call("appendChild", graph)

I also tried:

div.Set("innerHTML", `
graph TD;
[...]`)

Neither of my approaches in Go seem to work. What is printed by the
browser is the graph's textual syntax rather than a rendered graph.
In the case of my hard-coded HTML example, the browser prints a rendered
graph.

As best as I can tell, the Mermaid syntax is whitespace/newline sensitive,
and I think Go or JavaScript might be changing the whitespace/newlines
from those in the graph literal string I provide.

Does anyone know how I should go about this? Am I missing something
obvious?

--
Mike

:wq

[Jakob Borg]

I don't know mermaid but it sounded interesting so I took a look, and,

> mermaid listens to the page load event and when fired (when the page has loaded)
> it will locate the graphs on the page and transform them to svg files.

(https://mermaid-js.github.io/mermaid/#/usage)

Presumably your code runs after the page load event, and mermaid has already done its thing by then. You would need to tell mermaid to look again for graphs after generating them.

https://mermaid-js.github.io/mermaid/#/usage?id=calling-mermaidinit looks relevant.

(Not really Go related, but sending to the list anyway for clarity.)

//jb

> --
> You received this message because you are subscribed to the Google Groups "golang-nuts" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to golang-nuts...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/golang-nuts/20200402155449.GA2192046%40imp.

[W. Michael Petullo]

>> I have been using Go to define programs that I compile to web assembly.
>> This works well in general, but I do not yet understanding how to express
>> mermaid graphs (https://mermaid-js.github.io/mermaid/) from Go.

>> [...]

> I don't know mermaid but it sounded interesting so I took a look, and,
> mermaid listens to the page load event and when fired (when the page
> has loaded) it will locate the graphs on the page and transform them to
> svg files.

> (https://mermaid-js.github.io/mermaid/#/usage)

> Presumably your code runs after the page load event, and mermaid has
> already done its thing by then. You would need to tell mermaid to look
> again for graphs after generating them.

> https://mermaid-js.github.io/mermaid/#/usage?id=calling-mermaidinit
> looks relevant.

> (Not really Go related, but sending to the list anyway for clarity.)

Exactly the insight I needed. I overlooked the timing of things,
and calling

js.Global().Get("mermaid").Call("init")

at the end of my web assembly code does indeed fix my problem.

Thank you for the quick response!

--
Mike

:wq