Use Mermaid.js in the Markdown Editor

Use Mermaid.js in the Markdown Editor

MD Editor now supports Mermaid.js diagrams. Mermaid is a JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify charts dynamically.

Now you can use MD Editor to add diagrams using Mermaid.js while writing with MD Editor. Just like any other code block add a code snippet with the language set as mermaid. For example, the following code snippet can render a sequence diagram!

sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

The above code snippet produces the following diagram as output.

When you export your work using one of the supported formats, it will contain the rendered diagram. Also, check out Mermaid.js docs for more examples of diagrams that you could create using it.

Excited about the features? Try it out for free.