Skip to content
A vscode extension to wrap mermaid.cli in order to export mermaid diagrams to image files
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Mermaid Export

Adds a command Mermaid Export: Export which calls mermaid.cli to convert a Mermaid diagram source file to an image file. The command is available from the standard command prompt (Press F1 or ctrl+shift+P, and type mermaid).

The image file will be generated alongside the source file, replacing the extension with the extension for the selected output type, with .png being the default.

The source file should just contain mermaid code and should be saved before exporting.

If it doesn't work as expected, the command Mermaid Export: Show Log, will show the command generated and other information in a output window.


  • export diagrams from inside Markdown source


Setting Default Function
mermaid-export.outputType png Output file type (svg, png or pdf )
mermaid-export.outputWidth 0 Override the width of the output diagram (set to 0 for automatic sizing)
mermaid-export.outputHeight 0 Override the height of the output diagram (set to 0 for automatic sizing)
mermaid-export.theme default Theme for output file (default, dark, forest or neutral)
mermaid-export.config Extra configuration options file (see
mermaid-export.css CSS styling file

The paths for the config and css files can be absolute, or relative to the workspace folder.

The configuration file is JSON format, e.g.:

    "sequence": {
        "diagramMarginX": 10,
        "diagramMarginY": 20


You can install the latest version of the extension via the Visual Studio Marketplace here.

Source Code

The source code is available on GitHub here.


Icons made by Smashicons from is licensed by CC 3.0 BY

Uses the mermaid.cli command line interface package.

You can’t perform that action at this time.