abrochard / mermaid-mode Goto Github PK
View Code? Open in Web Editor NEWEmacs major mode for working with mermaid graphs https://mermaidjs.github.io/
License: GNU General Public License v3.0
Emacs major mode for working with mermaid graphs https://mermaidjs.github.io/
License: GNU General Public License v3.0
(add-to-list 'auto-mode-alist '("\\.mmd\\" . mermaid-mode))
should be (add-to-list 'auto-mode-alist '("\\.mmd\\'" . mermaid-mode))
.
\\'
is used to end the string.
Once mermaid-mode has been loaded, indentation in git-commit-mode
among others seems to be using mermaid-indent-line
. It effectively seems to insist 4 space indents on all lines.
The variable mermaid-mmdc-location
is set as "~/node_modules/.bin/mmdc"
. Pressing C-c C-c
in the code block generates the error error: option
-i, --input ' argument missing. There is also a [ob-mermaid](https://github.com/arnm/ob-mermaid). I can use
ob-mermaidwhen
mermaid-modeis not installed. However, when
mermaid-modeis installed, pressing
C-c C-c` in org mode generates the above error.
When using mermaid-compile-region, if the mermaid diagram has a syntax error and has been previously rendered, then it fails silently and displays the old version of the diagram.
It should be able to detect that the compiler gave an error and display a warning in the mini-buffer or the full error message in a new buffer (or logged to *Messages).
Would be great if we could use regions for compiling and editing online, especially the latter.
Hello, thanks for a great package!
Do you think we could add a way to specify cli flags?
I run this in WSL (Windows subsystem for linux) and i have to be able to specify the "-p" flag for puppeteer-config.json, otherwise mermaid won't run.
When I try to open in a browser (C-c C-o
) i get:
mermaid-open-browser: Symbol’s function definition is void: browse-url-default-browser
Is there something I have to configure?
I'm using emacs 26.1 on Ubuntu 19.04.
Thanks in advance!
Probably the issue affects more than just the first line but that is easiest to demonstrate.
With emacs -Q
, I get:
classDiagram
class A
class B
Instead of
classDiagram
class A
class B
Melpa 20230905.1916.
GNU Emacs 29.1 (build 1, x86_64-pc-linux-gnu, GTK+ Version 3.24.38, cairo version 1.17.8)
Mermaid documentation says that any line beginning with %%
is a comment (source). I don't believe this is reflected in mermaid-mode, resulting in comments not getting assigned the typically expected font face.
Both mermaid-mode
and ob-mermaid
defines the org-babel-execute:mermaid
function who controls the evaluation of org-mode mermaid src blocks. When loading both packages, the loading order will determine which one will be applied. This can be confusing. For example, if the mermaid-mode
one is the active and you use the :theme
parameter (supported by ob-mermaid
but not by mermaid-mode
), it will be silently ignored.
I think the correct thing to do is to integrate ob-mermaid
with mermaid-mode
or remove org-babel-execute:mermaid
from mermaid-mode
.
Something like:
(add-to-list 'auto-mode-alist '("\\.mmd$" . mermaid-mode)))
See also mermaid-js/mermaid#147.
I picked mmd
because github seems to support that.
Hi Abrochard,
So nice of you to make this. I'm looking forward to using mermaid on emacs. But which do I choose? Your mermaid-mode or op-mermaid?
I'm asking you because it seems you uploaded this in 2019 whereas the other was started in 2018 on github. You've updated your code more recently Mar 2020 versus Aug 2019.
So what was your motivation to write different code? What do you find missing in ob-mermaid? Does yours contain everything from ob-mermaid? What are the strengths and weaknesses of each?
Thankfully
Thank you for this! Love using mermaid-mode with ob-mermaid.
Unfortunately at the moment it only seems to support Graphs and Sequence diagrams.
Creating this issue to discuss about adding support for ERDiagrams!
Just as above. I will be creating a PR shortly to add the keyword.
I tried chinese in mermaid liveeditor, it seems ok.
but when I use chinese in emacs mermaid-mode, and compile it, it cause syntax error.
how can i use chinese in mermaid-mode? or how to construct mermaid cli command to support chinese?
I am in win10, emacs 29.0.50, mermaid file encoding with GBK or UTF-8 cause same thing.
thanks.
Thanks for the package! I personally use Evil mode, but when I press Enter to go to the next line, the indentation appears after my cursor, so my cursor is not indented.
The following configuration will allow rendering mermaid charts without needing to install nodejs+mermaid-cli to the local OS. Instead it will execute mmdc via the mermaid-cli docker image. Figured it'd make sense to note this somewhere in case someone else found it useful:
(setq mermaid-mmdc-location "docker")
(setq mermaid-flags "run -u 1000 -v /tmp:/tmp ghcr.io/mermaid-js/mermaid-cli/mermaid-cli:9.1.6")
Some explanation of the docker run
arguments:
-u 1000
ensures that the resulting output png file has a matching UID to the current user, avoiding permissions issues when deleting or overwriting the png. The 1000 is my UID on my machine. There might be a way to figure out the UID directly in emacs.-v /tmp:/tmp
mounts the host /tmp
to /tmp
inside the container. This ensures that mmdc inside the container will be reading/writing to the host /tmp
when rendering.9.1.6
: Latest stable version as of this writing. Can check available tags hereA declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.