+
Skip to content

arnm/ob-mermaid

Repository files navigation

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. 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")
        
  4. Add mermaid to org-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)))
        
  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. Export the org-mode document or invoke org-babel-execute-src-block (e.g. with C-c C-c on a block) to generate the 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.

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.

Testing

Automated Batch Test

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

Manual/Interactive Test

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.

Note

Test outputs (e.g., test-*.png, test-*.svg, test-*.pdf) and Emacs backup files are git-ignored and cleaned by the script.

About

Generate mermaid diagrams within Emacs org-mode babel

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published

Contributors 7

点击 这是indexloc提供的php浏览器服务,不要输入任何密码和下载