Execute code after initialize

[zhum]

I need to add tooltips to nodes. I want to use 'tipsy' library (like this http://bl.ocks.org/ilyabo/1373263), but it is called before real svg nodes are created. How to call my code AFTER mermaid finished?

[knsv]

Good idea!

Perhaps a callback method as an optional parameter to mermaid.init could do the trick.

[zhum]

Cool! Works well!

[pihug12]

I can't get it to work with Mermaid 7.1.2 (https://unpkg.com/[email protected]/dist/mermaid.min.js).

<div class="mermaid">
    graph TB
        nat_a --- nat_b
        click nat_a pouet
</div>
<script src="mermaid.min.js"></script>
<script>
    mermaid.initialize({
        startOnLoad:true,
        callback:function(id) {
            console.log("test");
            console.log(id,' rendered');
        },
        logLevel:1
    });
</script>

Demo with old version: https://unpkg.com/[email protected]/test/web.html
Is there something wrong? ( @tylerlong )

[ammarcoux]

I had the same problem and after looking at the source I go it to work like this:

mermaid.initialize({
    startOnLoad: true,
        htmlLabels: true,
        flowchart: {
            useMaxWidth: false,
            curve: 'basis'
        },
        mermaid: {
            callback:function(id) {
                $('.mermaid').css('opacity', '');
            }
        }
});

[lhew]

I had the same problem and after looking at the source I go it to work like this:

mermaid.initialize({
    startOnLoad: true,
        htmlLabels: true,
        flowchart: {
            useMaxWidth: false,
            curve: 'basis'
        },
        mermaid: {
            callback:function(id) {
                $('.mermaid').css('opacity', '');
            }
        }
});

Ir seems nice but on version 8+ there's no types that support such implementation :/

[Andromelus]

Is there any doc/news from this ?
None of the above work with mermaid 10 and I can't find anything about it in the docs.

[BigBlueHat]

@Andromelus I found some content in the changelog. Looks like you can do the following in >= 10:

<script type="module" async>
      import mermaid from '${src}';
      mermaid.run({
        querySelector: '.mermaid',
        postRenderCallback: (id) => {
          console.log(id);
        }
      });
</script>

[fnick851]

@BigBlueHat This works. Thanks for sharing.