Generate mermaid diagrams using org-mode, org-babel and mermaid-cli.
If you use Spacemacs, use the mermaid Spacemacs layer.
- Install package from Melpa
- Install mermaid-cli
- Ensure
mmdc
(the mermaid-cli executable) is available in your PATH, or specify its full path:;; If mmdc is in your PATH, this is optional: (setq ob-mermaid-cli-path "mmdc") ;; Or specify the full path if needed: ;; (setq ob-mermaid-cli-path "/your-installation-path/node_modules/.bin/mmdc")
- Add
mermaid
toorg-babel-load-languages
(along with any other languages you use):(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.png sequenceDiagram A-->B: Works! #+end_src
sequenceDiagram A-->B: Works!
- Export the
org-mode
document or invokeorg-babel-execute-src-block
(e.g. withC-c C-c
on a block) to generate the diagram.
file
- Output file. It should be either svg, png or pdf.
width
- Width of the page. Optional.
height
- Height of the page. Optional.
scale
- Scale factor 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.
puppeteer-config-file
- JSON configuration file for puppeteer. Optional.
pdf-fit
- Scale PDF to fit chart. Optional.
cmdline
- Additional command line arguments to pass to mmdc. Optional.
To run all test diagrams and verify outputs:
./dev-test.sh batch
This will:
- Execute all Mermaid code blocks in
test-example.org
- Generate output files (PNG, SVG, PDF) for each block
- Report which files were created or missing
Clean up all generated test files with:
./dev-test.sh clean
To open Emacs with the test environment and test interactively:
./dev-test.sh interactive
This will open Emacs with test-example.org
loaded. Place the cursor on any Mermaid code block and press C-c C-c
to execute and generate the diagram.
Test outputs (e.g., test-*.png
, test-*.svg
, test-*.pdf
) and Emacs backup files are git-ignored and cleaned by the script.