fester/ob-mermaid

Generate mermaid diagrams within Emacs org-mode babel

ob-mermaid

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

Setup

If you use Spacemacs, use the mermaid Spacemacs layer.

1. Install package from Melpa
2. Install mermaid.cli
3. Specify mmdc executable path:

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

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)))
       

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

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

   sequenceDiagram
    A-->B: Works!
       

   Loading
6. Exporting the org-mode document or invoking the org-babel-execute-src-block function to generate diagram.

Supported properties

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.