mermaid.md

Mermaid extension

Use this extension to render Mermaid expression. In addition, the extension can render on the fly when editing expressions and give hints of errors.

Options

HTMLAttributes

Custom HTML attributes that should be added to the rendered HTML tag.

Mermaid.configure({
  HTMLAttributes: {
    class: "my-custom-class",
  },
});

dictionary

If you need to internationalize this extension, you can use this option.

Mermaid.configure({
  dictionary: {
    name: "Mermaid",
    inputHelp: "Help",
    inputGraph: "Enter or paste the mermaid code",
  },
});

Commands

setMermaid()

Insert a new Mermaid expression.

editor.commands.setMermaid("graph TD;\n  A-->B;  A-->C;\n  B-->D;\n  C-->D;");

InputRules

:::mermaid

Markdown

:::mermaid
graph TD;
  A-->B;  A-->C;
  B-->D;
  C-->D;
:::