Generate mermaid diagrams using org-mode, org-babel and mermaid.cli.

1. Install this package from source, as this fork is not avaialable from MELPA. For example, using elpaca:

   (use-package ob-mermaid
     :elpaca (ob-mermaid
              :host github
              :depth nil
              :repo "cfclrk/ob-mermaid"))
       

2. Install mermaid.cli
3. Specify mmdc executable path:

   (setq ob-mermaid-cli-path "/your-installating-path/node_modules/.bin/mmdc")
       

   This step isn’t necessary if (executable-find "mmdc") already works.

4. Add mermaid to org-babel-load-languages

   (org-babel-do-load-languages
    'org-babel-load-languages
    '((mermaid . t)
      (scheme . t)
      (your-other-langs . t)))
       

1. Open org-mode buffer and create an org-babel source block:

   #+begin_src mermaid :file test.svg
     sequenceDiagram
       A-->B: Works!
   #+end_src
       

   sequenceDiagram
     A-->B: Works!
       

   Loading
2. To generate the diagram, you can either evaluate the source block or export the document. Note that the GitHub UI automatically renders the mermaid graph in the src block, even if there is no #+RESULTS block.

file - Output file. It should be either svg, png or pdf.

width - Width of the page. Optional.

height - Height of the page. Optional.

theme - Theme of the chart, could be default, forest, dark or neutral. Optional.

background-color - Background color. Example: transparent, red, ‘#F0F0F0’. Optional.

mermaid-config-file - JSON configuration file for mermaid. Optional.

css-file - CSS file for the page. Optional.

pupeteer-config-file - JSON configuration file for puppeteer. Optional.