Markdown extension to Mermaid using (codeBlock syntax)

[ricardojlrufino]

Summary

Allow use mermaid diagrams using same syntax of Gitlab ```mermaid not $$mermaid

Screenshots

Additional context

This will allow diagrams(in README.md) to be compatible with both Gitlab and Github.

Ref: https://docs.gitlab.com/ee/user/markdown.html#mermaid https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/

Related questions:
https://github.com/nhn/tui.editor/issues/1797 https://github.com/leeonfield/editor-plugin-video/issues/9

[ricardojlrufino]

Sample rendering on Github using ```mermaid syntax

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end

[ricardojlrufino]

My sample code (for $$mermaid syntax)

import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';

// Step 1: Define the user plugin function
function drawioPlugin() {
    const toHTMLRenderers = {

      // Demo https://mermaid.live/edit
      mermaid(node) {

        // se possivel usar esse timer do typescript
        // https://github.com/nhn/tui.editor/blob/master/plugins/chart/src/index.ts#L332

        // TODO: existe uma chance desse metodo ser chamado mais de uma vez (para cada diagrama).
        setTimeout(()=>{
          mermaid.init();
          console.log("mermaid.init()");
        }, 200);

        return [
          { type: 'openTag', tagName: 'pre', outerNewLine: true , attributes: { 'class': "mermaid" }},
          { type: 'html', content: node.literal },
          { type: 'closeTag', tagName: 'pre', outerNewLine: true }
        ];
      },

    }

    return { toHTMLRenderers }
  }

  export {drawioPlugin};

[jwlee1108]

Sorry for the late reply. Your request is difficult to deal with due to our specifications. For now, you have to use $$mermaid as you work on it.

[stale[bot]]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[kabachello]

Here is an example, that works for me via codeBlock syntax provided that mermaid is available on the page (e.g. included in HTML head, required, or whatever else).

This basically renders mermaid diagrams every time the preview is rendered. There seems to be some trouble in tab-style preview. I'm using previewStyle:'vertical' though.

var ed = new toastui.Editor({
    el: document.querySelector('#your-id-here'),
    events: {
        beforePreviewRender: function(sHtml){
            setTimeout(function(){
                mermaid.init(undefined, '.toastui-editor-md-preview code[data-language="mermaid"]');
            }, 0);
        }
    }
});
mermaid.initialize({
    startOnLoad:true,
    theme: 'default'
});