Mermaid diagrams should allow switching from "editing" to "rendering" mode a la markdown

[RikkiGibson]

Is your feature request related to a problem? Please describe. I'd like to present Mermaid diagrams in my notebook, without people necessarily having to see or think about the Mermaid code which made those diagrams.

Describe the solution you'd like Allow Mermaid cells to use the "Edit Cell"/"Stop Editing Cell" commands a la Markdown cells. Alternatively, render mermaid blocks within Markdown as Mermaid diagrams.

Describe alternatives you've considered I could always render the Mermaid to svg, then embed the svg in the notebook instead. But it's not as good of an authoring experience.

[colombod]

@rebornix what do you think? Github markdown does support mermaid language already, is this something that could be done in vscode notebooks? Maybe some way to contribute languages to fenced blocks like markdig framework?

[rebornix]

@colombod this is a good question. @mjbvz added extensibility support for the markdown cell rendering, meaning that we can build a mermaid extension to extend how markdown cells are rendered in the notebook editor. @mjbvz actually has built a mermaid extension for markdown preview so I guess it would be not hard to support notebook.

With that said, we don't support what's being asked originally in the issue: editing a cell with language mermaid and allow switching from editing to preview. We did discuss about this before and that's one of the reason why we now use Markup terms instead of Markdown in our API. The idea is we can support Markup to have a different language/mimeType combination, extensions can then contribute language support and renderer for the mimeType. All Markup cells can then support the Editing/Rendering state switch.

[claudiaregio]

@RikkiGibson This may help in the meantime -> if you double click to the left of the cell (in the red region below), it will collapse the code and only preview the first line.

To expand it back, you can double click anywhere along the previewed line of code.

[RikkiGibson]

Thanks, that definitely helps!

[marklnz]

Describe the solution you'd like Allow Mermaid cells to use the "Edit Cell"/"Stop Editing Cell" commands a la Markdown cells. Alternatively, render mermaid blocks within Markdown as Mermaid diagrams.

I might be missing your point here but you can write mermaid in a Markdown cell. Just wrap the mermaid code in a code block, with a language of mermaid:

    ```mermaid
        *your mermaid code here*

The cell editor allows you to collapse the code block also to avoid cluttering your view when editing around it if that diagram forms part of a larger markdown section, otherwise you could just create a separate markdown cell for the diagram alone.  

[colombod]

That will work if you have a notebook cell renderer plugin. this will do https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid