ob-mermaid
ob-mermaid copied to clipboard
arnm
Generate mermaid diagrams within Emacs org-mode babel
- ob-mermaid
Generate [[https://mermaidjs.github.io/][mermaid]] diagrams using org-mode, org-babel and [[https://github.com/mermaidjs/mermaid.cli][mermaid.cli]].
- Setup
If you use [[https://github.com/syl20bnr/spacemacs][Spacemacs]], use the [[https://github.com/arnm/mermaid-layer][mermaid Spacemacs layer]].
- Install package from [[https://melpa.org/#/getting-started][Melpa]]
- Install [[https://github.com/mermaidjs/mermaid.cli][mermaid.cli]]
- Specify =mmdc= executable path: #+begin_src elisp (setq ob-mermaid-cli-path "/your-installating-path/node_modules/.bin/mmdc") #+end_src
- Add =mermaid= to =org-babel-load-languages= #+begin_src elisp (org-babel-do-load-languages 'org-babel-load-languages '((mermaid . t) (scheme . t) (your-other-langs . t))) #+end_src
- Open =org-mode= buffer and create an =org-babel= source block: #+begin_src org ,#+begin_src mermaid :file test.png sequenceDiagram A-->B: Works! ,#+end_src #+end_src #+begin_src mermaid :file test.png sequenceDiagram A-->B: Works! #+end_src
- 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.
arnm