Unable to export mermaid diagrams as images in PDF format

[lldxflwb]

Markdown Preview Enhanced (MPE) allows users to preview classDiagram using mermaid code blocks and export them as HTML successfully. However, when the users try to export the diagrams as PDF files, they only get the code and not the corresponding image. For instance, the following mermaid code:

classDiagram
    class GetBodyInterface
    class DealEveryItemBody
    class DealAllItemFromTotal
    class DealAllItemFromTotalAssignPort
    class DealSubIitem
    class GetDataByDate
    class DealSubItemInfo
    class DealSubItemMergeInfo
    class GetDataFromXXXBox
    class DealEveryItemBodyPost
    class DealXXXXXXNEW
    class DealXXXIDnew 
    class DealXXXXXXNEW
    class GetYYYNEW 
    class GetDataByDateFromHtml
    DealEveryItemBody --|> GetBodyInterface
    DealAllItemFromTotal --|> DealEveryItemBody
    DealAllItemFromTotalAssignPort --|> DealAllItemFromTotal
    DealSubIitem --|> DealAllItemFromTotal
    GetDataByDate --|> DealAllItemFromTotal
    DealSubItemInfo --|> DealAllItemFromTotal
    DealSubItemMergeInfo --|> DealAllItemFromTotal
    GetDataFromXXXBox--|> DealEveryItemBody
    DealEveryItemBodyPost --|> DealEveryItemBody
    DealXXXXXXNEW --|> DealEveryItemBody
    DealXXXIDnew --|> DealXXXXXXNEW
    GetYYYNEW --|> GetDataFromXXXBox
    GetXXXNEW --|> GetDataFromXXXBox
    GetDataByDateFromHtml --|> GetDataByDate

When exported as PDF, it appears as plaintext and not as an image.

Expected Behavior: The users should be able to export mermaid diagrams as images in PDF format when using MPE.

Steps to Reproduce:

1. Create a new markdown file in MPE.
2. Insert a mermaid code block with classDiagram.
3. Export the file as PDF.
4. Observe that the diagram appears as plaintext instead of an image. Issue Title: Unable to export mermaid diagrams as images in PDF format

Possible Solution: Provide an option to export mermaid diagrams as images in PDF format.

Environment:

• Operating System: [win11]
• MPE Version: [v0.6.8] Possible Solution: Provide an option to export mermaid diagrams as images in PDF format.

[cuixing158]

Same issue, any solution please? I recently updated Vscode to the following version as well as updating the MPE version to the latest v0.8.10, and as a result, mermaid can't be exported properly to display images in pdf either, it's tiled plaintext.

Version: 1.83.1 (system setup) Commit: f1b07bd25dfad64b0167beb15359ae573aecd2cc Date: 2023-10-10T23:48:05.904Z Electron: 25.8.4 ElectronBuildId: 24154031 Chromium: 114.0.5735.289 Node.js: 18.15.0 V8: 11.4.183.29-electron.0 OS: Windows_NT x64 10.0.18363

[lolo120916]

Effectively, preview with pandoc correctly renders mermaid diagram in vscode. When asking to export via pandoc, this is not the case, contrary to what might be expected from a user point of view.

As a workaround, you need to install node, npm and mermaid-filter.cmd by following instructions in https://github.com/raghur/mermaid-filter/blob/master/README.md and then put in the front-matter of your document something like, eg:

title: "title" author: yourname date: 11/12/2023 output: pdf_document: pandoc_args: ["-F B:\node_path\mermaid-filter.cmd"]

On my Windows setup (node installed as portable), this should work. However, when trying to export to pdf in vscode, vscode complains that the corresponding command failed: Error running filter B:\node_path\mermaid-filter.cmd: Could not find executable B:\node_path\mermaid-filter.cmd. no matter what I tried to do.

But, if I execute the corresponding pandoc command inside a .bat file, and adding B:\node_path to Windows PATH variable, it works!

It is not really straightforward, and If someone has a better solution, please indicate it.