mermaid
mermaid copied to clipboard
mermaid-js
Adding LaTeX math support via Katex
Is your feature request related to a problem? Please describe. Currently, there is no way to typeset mathematical equations in diagrams created with Mermaid.
Describe the solution you'd like. To remedy this, I propose implementing Katex into Mermaid
Describe alternatives you've considered MathJax is another similar library for typesetting mathematical equations and provides direct SVG support, but it is slower in creating the desired output. This could cause a longer delay when updating Mermaid diagrams after making modifications.
Additional context
- This issue is similar to the closed issue #1387
- I've already started on a rudimentary implementation for flowcharts to assess the difficulty and time needed to implement this. Currently, it involves adding an additional step after processing the regex for FontAwesomeIcons, which searches for a LaTeX equation surrounded by a delimiter and converts it to stringified HTML. I'd like to hear the core maintainers thoughts before I proceed further with my implementation.
I decided to experiment further and I have it working between v1 and v2 of flowcharts. There are a still kinks to work out however (in this instance, the flowchart system of equations don't render properly and the backgrounds are still missing for flowchart edges).
The biggest issue I encountered was deciding how to include the stylesheets for Katex. I've mentioned this on slack but I'm a little lost on the purpose of the sass files. The loaders are mentioned in the webpack config but appear to not be in use, or even installed for that matter. I handled it by adding the dependencies, along with style-loader, and adding a new rule for css files. The katex is then imported from mermaid.js.
This unfortunately adds stylesheet bloat for users who aren't interested in this feature, and directly importing the file could conflict if Katex is in use and imported elsewhere in the end-user's project. The 2nd option I can think of would be requiring end-users to manually add the file through whichever means they see fit, and adding a flag to explicitly enable Katex for the Mermaid chart. There could of course be other options that I haven't thought of at the moment.
I've added my current code to a branch on my fork of Mermaid (https://github.com/NicolasNewman/mermaid/tree/feature/2776_katex_math). Let me know if you'd prefer I move this over to a PR.
Since I was testing in Firefox, which has MathML implemented, everything appeared fine. Unfortunately I'm running into issues when it fullbacks to CSS rendering. It most likely has to do with how the style sheet is being is being loaded by Webpack. I unfortunately don't have enough spare time at the moment due to course work, so I won't be able to find a proper solution until mid early May at the latest.
A bit of a status update. The main issue I ran into while discussing this PR's draft was that the stylesheets needed significantly increased the bundle size. Unfortunately the only way to avoid this is waiting until MathML gets implemented in Chromium as most other major browsers already support it. As per this post on Chrome status MathML is getting significantly closer to making it to live. I'll revisit this PR once this happens.
Hi @NicolasNewman, thanks for putting in the work, as this would make mermaid even more useful to a lot of people!
Just pinging you because the chromestatus post you linked, seems to indicate that MathML is shipping with chromium now, so maybe it makes sense to revisit this once (and if) you get around to it
Hi @NicolasNewman, thanks for putting in the work, as this would make mermaid even more useful to a lot of people!
Just pinging you because the chromestatus post you linked, seems to indicate that MathML is shipping with chromium now, so maybe it makes sense to revisit this once (and if) you get around to it
I plan on revisiting my PR next week but it will still take time until we can expect users to have MathML support. Caniuse shows we're still only at 63% coverage. Once most Chrome users update it should jump up an additional 23%, and another 4% for Edge users.
Progress update: I've updated my branch to the latest version of develop and started testing it on Chromium browsers. Unfortunately at the moment there are some rendering inconsistencies present. I'm currently looking into why that's the case and where the problem stems from.
Once the implementation details are finalized for flow charts I'll add support to the others as well.
This is exactly what I am looking for. Could you please share the mermaid code for this? If this feature is not yet merged, then please raise a merge request for this.
I decided to experiment further and I have it working between v1 and v2 of flowcharts. There are a still kinks to work out however (in this instance, the flowchart system of equations don't render properly and the backgrounds are still missing for flowchart edges).
The biggest issue I encountered was deciding how to include the stylesheets for Katex. I've mentioned this on slack but I'm a little lost on the purpose of the sass files. The loaders are mentioned in the webpack config but appear to not be in use, or even installed for that matter. I handled it by adding the dependencies, along with style-loader, and adding a new rule for css files. The katex is then imported from mermaid.js.
This unfortunately adds stylesheet bloat for users who aren't interested in this feature, and directly importing the file could conflict if Katex is in use and imported elsewhere in the end-user's project. The 2nd option I can think of would be requiring end-users to manually add the file through whichever means they see fit, and adding a flag to explicitly enable Katex for the Mermaid chart. There could of course be other options that I haven't thought of at the moment.
I've added my current code to a branch on my fork of Mermaid (https://github.com/NicolasNewman/mermaid/tree/feature/2776_katex_math). Let me know if you'd prefer I move this over to a PR.
This is exactly what I am looking for. Could you please share the mermaid code for this? If this feature is not yet merged, then please raise a merge request for this.
This is exactly what I am looking for. Could you please share the mermaid code for this? If this feature is not yet merged, then please raise a merge request for this.
#2885 is the open PR for this feature. It's been slow getting it merged since it wasn't until this March that MathML support reached an acceptable level so I had to halt work until recently.
@NicolasNewman How to try this PR?
You'll need to clone the repository and switch to the branch linked in the PR. You can then run the dev server to see the demos as shown above, or modify them yourself to run your own tests.
@NicolasNewman How to try this PR?
You'll need to clone the repository and switch to the branch linked in the PR. You can then run the dev server to see the demos as shown above, or modify them yourself to run your own tests.
Excuse my ignorance on this, but how to run the dev server; I have installed npm dependencies and then npm build I have now the output files (library files) packages/mermaid/dist, what do I do next?
@NicolasNewman How to try this PR?
You'll need to clone the repository and switch to the branch linked in the PR. You can then run the dev server to see the demos as shown above, or modify them yourself to run your own tests.
Excuse my ignorance on this, but how to run the dev server; I have installed npm dependencies and then
npm buildI have now the output files (library files)packages/mermaid/dist, what do I do next?
- Run
npm dev - Navigate to localhost:xxxx (the default port is 9000, the one in use can be seen from the command output)
If you'd like to change what is rendered, navigate to /demos/flowchart.html and search for "Sample 20". To update the page save your changes and reload the browser page.
@NicolasNewman How to try this PR?
You'll need to clone the repository and switch to the branch linked in the PR. You can then run the dev server to see the demos as shown above, or modify them yourself to run your own tests.
Excuse my ignorance on this, but how to run the dev server; I have installed npm dependencies and then
npm buildI have now the output files (library files)packages/mermaid/dist, what do I do next?1. Run `npm dev` 2. Navigate to localhost:xxxx (the default port is 9000, the one in use can be seen from the command output)If you'd like to change what is rendered, navigate to
/demos/flowchart.htmland search for "Sample 20". To update the page save your changes and reload the browser page.
Clear as crystal! Thank you!
I just wanted to point out that sequenceDiagram turned out to be a great way to describe cryptographic protocols, or even reduction proofs to prove cryptographic security of some schemes. Having tex in those diagrams would be soooo lovely.
Here is a tiny example: https://crypto.erhant.me/modern-cryptography/prgs-and-prfs.html
I just wanted to point out that
sequenceDiagramturned out to be a great way to describe cryptographic protocols, or even reduction proofs to prove cryptographic security of some schemes. Having tex in those diagrams would be soooo lovely.Here is a tiny example: https://crypto.erhant.me/modern-cryptography/prgs-and-prfs.html
Agreed
Awesome to see that this was merged, great work to everyone!
My understanding is that this will only be available in FlowChart though, could we have it work for Sequence Diagram as well perhaps? 🥺
Awesome to see that this was merged, great work to everyone!
My understanding is that this will only be available in FlowChart though, could we have it work for Sequence Diagram as well perhaps? 🥺
Sequence diagrams are supported as well!