Preview Mermaid diagrams in the Content Editor
Problem to solve
When working in the Content Editor you get a rich text Markdown editing experience. There are, however, some types of content that are still written in code. Mermaid diagrams are an example. The syntax supported inside code blocks and they can be written in the content editor. But to get a preview of the diagram, you have to switch over to the raw source editor and use the Preview tab there. You shouldn't have to leave the content editor to preview the Mermaid diagram.
Proposal
Introduce a Preview button, icon, or tab in the Mermaid diagram blocks in the content editor. Clicking this will generate a preview of the diagram and a way to return to the editing mode.
Toolbar | Blank state | Popup | Preview |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
Edited by Michael Le