Mermaid scaling to increse the quality of the genrated PNG files

[slohat-enestit]

Mermaid scaling to increse the quality of the genrated PNG files

Link to issue

https://www.notion.so/medtech-os/Mermaid-Diagram-Export-Resolution-25ff235c3b48809b9976ea0bb23d7a1f

Describe Your Changes

We have updated the configurations settings while genrating the PNG output.
Initially , the output PNG was not so readable and clear in the output DOCX file because of the way the MS Word renderizes the mermaid diagram.

The first step i.e mermaid_config plays a crucial role and controls the structure and how the diagram looks.
Hence , we set up some theme variables that affect the various visual aspects of mermaid flowchart and configured it to use full available width to enhance clarity

The pupeeter config renders the image in a headless browser and I added the scaling factor in its config so that it renders the
mermaid diagram into a image with high pixel density.

Finally , before showing the final output PNG to the user , I added a scaling factor of 3 , which acts as a "zooming" factor
and enhances readability of the output image.

How Did You Test It

We have tested it on local machine using diffrent mermaid digrams from the notion page

notion_export_png.docx

[johndgiese]

Are the theme and themeVariables necessary? If not, I suggest we remove them. If you could show an image with/without the theme that'd be great.

Also, would setting the theme here prevent user's from customizing the theme themselves if they wanted to?

[slohat-enestit]

These variables create bold effect on the text that is present above the lines and arrows in the mermaid flowchart in the final output PNG.

Here is the diffrance if it's fine then we can remove this theme related variables

With Theme Changes

Without Theme Changes

[johndgiese]

would setting the theme here prevent user's from customizing the theme themselves if they wanted to