Mermaid.js is a great tool to make diagrams in plain text, I use it a lot and I wanted to have a way to see previews of the code I was writing.
There are some options to do that but they require to have a mermaid-cli installed, which requires nodejs as well.
Emacs has a built-in webkit browser, in case it was compiled with --with-xwidgets flag, and mermaid run on js so it should be possible to just run the code I want in the browser and see it there.
This function makes the magic, it just take a region previously selected, which have the mermaid code, create a temp file and write some HTML there(including our mermaid code).
(defun my/preview-mermaid () "Render region inside a webit embebed browser." (interactive) (unless (region-active-p) (user-error "Select a region first")) (let* ((path (concat (make-temp-file (temporary-file-directory)) ".html")) (mermaid-code (buffer-substring-no-properties (region-beginning) (region-end)))) (save-excursion (with-temp-buffer (insert "<body> <pre class=\"mermaid\">") (insert mermaid-code) ;; js script copied from mermaid documentation (insert "</pre> <script type=\"module\"> import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true }); </script> </body>") (write-file path))) (xwidget-webkit-browse-url (format "file://%s" path)))) Demo
Top comments (0)