VS Code extension to expand your markdown mermaid tags to PNG and vice versa.
If you have a markdown file using mermaid and you want to publish it to sites that don't render mermaid you can use this extension.
This will allow you to transform all the mermaid tags to PNG.
It will also enable you to do the reverse and retrieve the original text from the PNGs back to the markdown file.
See it in action. Converting Markdown with Mermaid blocks to PNG:
Converting Markdown with PNGs back to Mermaid code:
You can test this with this sample.md file:
#Markdown example file
A graph:
```mermaid
graph LR
Start --> Stop
```
A sequence diagram:
```mermaid
sequenceDiagram
participant A as Alice
participant L as Luis
A->>L: Hello Luis, how are you?
L->>A: Great!
```
A pie chart:
```mermaid
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
```After executing the command "Convert Markdown code to PNG" it will be transformed to this file and 3 png files are created in the same folder:
#Markdown example file
A graph:
]
A sequence diagram:
]
A pie chart:
]
Running the command "Convert Markdown Mermaid PNGs to Code" the file will be transformed to the original state.
Note: If you edit the PNG files and not preserve the metadata, you'll lose the ability to revert to the original markdown file.
Note: File newline delimeter must be CRLF
-
JIMP for Image conversion - JPG to PNG
-
Mermaid.ink for Mermaid source conversion to JPG
Fix documentation
Initial release.
For the solution to run there is an http call to mermaid server (mermaid.ink).