Using MermaidJS with Pandoc

Author

Dheepak Krishnamurthy

Published

February 18, 2022

Keywords

mermaid, js, pandoc, lua, filter

Quarto supports native MermaidJS integration, so I’ve decided to use that instead. You can use the filter from here: https://github.com/kdheepak/blog/blob/61d1186313f3eb73ac51968a4bd5d051d822da37/pandoc/render.lua.

GitHub recently announced support for MermaidJS. I thought it would be nice to integrate it as part of my blog using Pandoc lua filters. So the following:

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

would be rendered as:

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Reuse

Citation

BibTeX citation:
@online{krishnamurthy2022,
  author = {Krishnamurthy, Dheepak},
  title = {Using {MermaidJS} with {Pandoc}},
  date = {2022-02-18},
  url = {https://kdheepak.com/blog/using-mermaidjs-with-pandoc/},
  langid = {en}
}
For attribution, please cite this work as:
D. Krishnamurthy, “Using MermaidJS with Pandoc,” Feb. 18, 2022. https://kdheepak.com/blog/using-mermaidjs-with-pandoc/.