Mermaid Preview Exporter

English | 简体中文

Export Mermaid diagrams directly from VS Code's native Markdown preview—without replacing the built-in preview experience.

Demo

Open VS Code's native Markdown preview, hover a rendered Mermaid diagram, then choose a visual preset or export action from the floating toolbar:

Theme ▾   SVG↓   PNG↓   PNG⧉   PPTX↓

The image below is a real complex-flowchart PNG exported by the extension using the Blue preset. It demonstrates subgraphs, decision nodes, loops, connectors, arrowheads, and mixed Chinese/English labels.

For editable PPTX export, the same flowchart structure is recreated as native PowerPoint/WPS shapes, text boxes, and connectors instead of being embedded as one picture.

Features

Hover any rendered Mermaid diagram in Markdown: Open Preview to access:

• Five visual presets: native, clean light, blue, dark, and monochrome.
• SVG↓ — save a standalone, presentation-safe SVG.
• PNG↓ — save a transparent PNG at 2× resolution.
• PNG⧉ — copy a PNG to the system clipboard.
• PPTX↓ — export flowcharts as editable PowerPoint shapes, text, connectors, line styles, and arrowheads.

The selected visual preset is applied to both the preview and exported files.

Requirements

• VS Code 1.121 or newer.
• Mermaid must be rendered by VS Code's native Markdown preview.

Usage

1. Open a Markdown file containing a Mermaid code block.
2. Run Markdown: Open Preview.
3. Hover the diagram.
4. Choose a theme and export format from the toolbar.

Try this example:

```mermaid
flowchart LR
    A[Write Markdown] --> B[Open native preview]
    B --> C{Choose an export}
    C -->|Vector| D[SVG]
    C -->|Image| E[PNG or clipboard]
    C -->|Editable| F[PPTX]
```

The export toolbar appears when the pointer is over the rendered diagram. Theme changes are previewed immediately and are also applied to the exported file.

SVG and PNG exports inline the computed diagram styles and remove embedded HTML, scripts, external links, and residual stylesheets. This avoids common browser rasterization failures and Office's “content has been disabled” warning.

Editable PPTX scope

Editable PPTX export currently supports Mermaid flowcharts. Nodes, labels, straight connectors, dash styles, and arrowheads are exported as native Office objects and remain editable in Microsoft PowerPoint and WPS Presentation.

Curved Mermaid edges are represented as editable straight connectors between the same endpoints. Other Mermaid diagram families can still be exported as SVG or PNG.

Privacy

The extension processes diagrams locally. It contains no telemetry and does not send Markdown or diagram content to external services.

Development

npm install
npm run check
npm run package

Install the generated VSIX and reload VS Code to test the extension.

License

MIT