Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Execute code after initialize #176

Closed
zhum opened this issue Jun 16, 2015 · 8 comments
Closed

Execute code after initialize #176

zhum opened this issue Jun 16, 2015 · 8 comments

Comments

@zhum
Copy link

zhum commented Jun 16, 2015

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
Copy link
Collaborator

knsv commented Jul 2, 2015

Good idea!

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

@zhum
Copy link
Author

zhum commented Jul 20, 2015

Cool! Works well!

@zhum zhum closed this as completed Jul 20, 2015
@pihug12
Copy link

pihug12 commented Aug 25, 2018

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
Copy link

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
Copy link

lhew commented May 31, 2022

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 :/

mgenereu pushed a commit to mgenereu/mermaid that referenced this issue Jun 25, 2022
@Andromelus
Copy link

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
Copy link

@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
Copy link

@BigBlueHat This works. Thanks for sharing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants