How to integrate a MermaidEditor?

[pixeleet]

Similar to what is available on the Mermaid Live Editor would be amazing to have.
Currently from what I can tell Mermaid is not supported by default.

What steps should we take for integration?
Open to suggestions.

[petyosi]

My line of thought on such integration is to make it convenient for the developer to build editors for custom markdown constructs. Something I published today is support for custom directive editors. I am thinking about enabling something similar for JSX components as well. As far as I can tell, this should work for the Mermaid editor, as long as they have any kind of a React component editor.

What do you think about this? How would you store the mermaid code in markdown?

[pixeleet]

By convention the code blocks with mermaid meta are simply treated as mermaid graphs.

graph TD
    A[n] --> B{n < 2}
    B -- Yes --> C[Return n]
    B -- No --> D[Call fib n-1]
    D --> E[Call fib n-2]
    E --> F[Add results]
    F --> G[Return result]

Loading

[pixeleet]

In this case similar to other live blocks, the combination of live mermaid would yield the editable view.

[petyosi]

Cool, I did not know about this integration. Seems very useful.

I think that this is easy to be implemented with a few architecture changes. The code block editors should be made configurable like the custom directive ones.

[pixeleet]

Probably have to check if it's feasible to get a Sandpack compatible component out that wraps Mermaid.
For simply rendering it we can use already existing mermaid react integrations.

[petyosi]

@pixeleet - v0.11.0 is out and it makes it easy to include custom code block editors. Take a look here: https://mdxeditor.dev/editor/docs/code-blocks#build-a-custom-code-block-editor.

Happy to get any feedback you have. Thank you!

[pixeleet]

I'll have a look, I'm getting close to finishing a prototype of a project that I'll need to rebuild with react/remix ^^

[shaipetel]

Any success on integrating mermaid into this editor?
This editor is great for my needs except for lacking this required integration on my project.

[petyosi]

Here's an example of a mermaid editor that's using a simple text area for the code editing + a live preview: 0b49d74#diff-f67e140f11018a1de383b5a17b6b6377f158024ae7dfe44c83c83ffe2be477f9