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

Custom JS not working for mermaid #73

Closed
michaelritsema opened this issue Aug 16, 2016 · 5 comments
Closed

Custom JS not working for mermaid #73

michaelritsema opened this issue Aug 16, 2016 · 5 comments

Comments

@michaelritsema
Copy link

I'm passing in some custom JS to the mermaid sequenceDiagram config. It is not working. I think perhaps the JS gets included before the mermaid object gets created? If that is the case it would be nice to be able to upload JS runs after everything else. Or perhaps there is an loaded event I can hook into?

example JS:

mermaid.sequenceConfig = {
diagramMarginX:50,
diagramMarginY:10,
boxTextMargin:5,
noteMargin:10,
messageMargin:35,
mirrorActors:true
};

@tylerlong
Copy link
Owner

Hi @michaelritsema there does exist such a hook: https://github.com/tylingsoft/markdown-core/blob/master/markdown-core-browser.js#L46

This hook method is called every time the preview is re-rendered.

@tylerlong tylerlong changed the title Custon JS not working for mermaid Custom JS not working for mermaid Aug 25, 2016
@tylerlong
Copy link
Owner

Hi @michaelritsema I just realized that there might be a simpler solution:

$(function(){
    mermaid.sequenceConfig = {
        diagramMarginX:50,
        diagramMarginY:10,
        boxTextMargin:5,
        noteMargin:10,
        messageMargin:35,
        mirrorActors:true
    };
});

@michaelritsema
Copy link
Author

michaelritsema commented Aug 25, 2016

@tylerlong neither approach seems to be working. Perhaps the mermaid object is already created at this time and doesn't get recreated on each preview?

My test file is at: https://michaelritsema.github.io/ziften.js

@tylerlong
Copy link
Owner

tylerlong commented Aug 25, 2016

Your code is not to create a new mermaid object. It is instead to change the configuration of mermaid. I have no idea why it doesn't work at the moment. I don't think it's specific to markdown-plus. It's probably a JS issue. Can you make your code working out of markdown-plus?

Here is how I change the config of gatt diagram: https://github.com/tylingsoft/markdown-core/blob/master/markdown-core-browser.js#L15

@tylerlong
Copy link
Owner

tylerlong commented Aug 31, 2016

I confirm that this issue has nothing to do with Markdown Plus.

Open http://mdp.tylingsoft.com/ with chrome, open the JS console, paste and excute the following code:

mermaid.ganttConfig = {
    axisFormatter: [
        ['%d-%m-%Y', function(d) {
        return d.getDay() == 1;
        }]
    ]
};

And you can see that the axis format for gantt diagram changes to '%d-%m-%Y'.

This proves that Markdown Plus does support changing the config of mermaid.

But why doesn't mermaid.sequenceConfig = ... work? I don't know. An issue should be created for the mermaid project.

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

2 participants