Unable to integrate with markdown-it as plugin

julianlam commented 5 years ago

Hi there. Looking at #4, I was able to get the plugin registered with markdown-it, but as it stands right now it is not doing anything.

Here is my code:

// `parser` is the object you get from `new MarkdownIt()`
parser.use(require('markdown-it-mermaid').default);

console.log(parser.render(`\`\`\`mermaid
graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
\`\`\``));

The following code is output:

<div class="mermaid">graph TD
        A[Christmas] -->|Get money| B(Go shopping)
        B --> C{Let me think}
        C -->|One| D[Laptop]
        C -->|Two| E[iPhone]
        C -->|Three| F[Car]</div>

So it doesn't look like it's generating any SVG code... unless I am misunderstanding something with the implementation?

Thanks for any help you can provide!

KCErb commented 4 years ago

This means mermaid.initialize is not being called at a point where that div is actually in the DOM.

EverSeenTOTOTO commented 3 years ago

I'm using mermaid@8.10.2, it seems there is a init method need to be call...

// each time when dom is changed: 
mermaid.initialize({
      // startOnLoad: true,
      theme: 'default',
      gantt: {
        axisFormatter: [
          ['%Y-%m-%d', (d) => {
            return d.getDay() === 1;
          }],
        ],
      },
    });
mermaid.init();

PeterWone commented 8 months ago

See https://github.com/mermaid-js/mermaid/issues/3886

They won't fix it because without a browser they can't measure label strings in the layout engine. If you ask me, CSS control for font-family and font-size is far less important that being able to run headless, but it's not my project and if I forked it to impose common sense, I would then be saddled with maintaining it.

tylingsoft / markdown-it-mermaid

Unable to integrate with markdown-it as plugin #9