Using MermaidJS with Pandoc

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}},
  pages = {undefined},
  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.