Feature request: inline mermaid graphs

[nahuel]

It will be nice to render ```mermaid blocks in the buffer when markup hiding is toggled on, just like the VSCode markdown extension does in his live preview pane:

[ghosty141]

This would be a huge upgrade, we use mermaid quite a lot for documentation at work.

[DavidEdell]

+1. Support already exists for org-mode, and is integrated here on github.

Mermaid-mode can be invoked on a region. So, a temporary workaround is:

• M-x install mermaid-mode
• In a Markdown file, manually highlight the region of a diagram (excluding the quote tags)
• M-x mermaid-compile-region

To integrate that support more cleanly in the Markdown plugin we could start with something as simple as a shortcut to select and invoke the mermaid-compile-region command. Live preview and/or inline display would be a bonus for the future.

I think a basic integration could be done by

• Extend "markdown-do" (invoked by C-c d) to include a case that recognizes the mermaid quotation tag
• If found, the action would be to select the region body and invoke the mermaid-compile-region command to display preview in a new buffer
• Note: This integration approach could also apply to PlantUML by substituting the regex and invoking the appropriate plantuml command instead.

[Cerebus]

If you use embark (and you should), the following function selects a fenced code block and returns an embark region target:

(Edited: Now with some simple error handing so it won't find a target if the head or tail fence quotes aren't found--like if point is at the beginning or end of a file. Will still find a region between fenced blocks, but IMHO this is good enough.)

(defun my-markdown-fenced-code-block ()
  (save-excursion
    (let* ((head (search-backward "```" nil t))
	   (start (progn (forward-line)
			 (point)))
	   (tail (search-forward "```" nil t))
	   (end (progn (beginning-of-line)
		       (point))))
      (when (and head tail)
	`(region ,(buffer-substring start end) . (,start . ,end))))))

(with-eval-after-load 'embark
  (add-to-list 'embark-target-finders 'my-markdown-fenced-code-block))

With point in the fenced block, C-. C-SPC M-x mermaid-compile-region should work. If embark-target-finders gets reordered, you may have to cycle the target until you get the right one.

If you bind a key to mermaid-compile-region, you can use it in place of M-x mermaid-compile-region.

What's nice about embark approach is you can apply any region evaluation function; so a PlantUML fenced block can be evaluated with C-. C-SPC M-x plantuml-preview.