Generate mermaid diagrams using org-mode, org-babel and mermaid.cli.
- 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"))
- Install mermaid.cli
- 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. - Add
mermaid
toorg-babel-load-languages
(org-babel-do-load-languages 'org-babel-load-languages '((mermaid . t) (scheme . t) (your-other-langs . t)))
- Open
org-mode
buffer and create anorg-babel
source block:#+begin_src mermaid :file test.svg sequenceDiagram A-->B: Works! #+end_src
sequenceDiagram A-->B: Works!
- 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.