Markdown workflow

Export Mermaid Diagrams from Markdown

Paste a README, Obsidian note, documentation page, or Markdown article. The tool extracts Mermaid fenced code blocks, lets you pick a diagram, and exports it as PNG, JPG, and WebP.

No signup · No watermark · Parses Markdown locally · Export selected diagrams from your browser

Paste Markdown

Paste a README, Obsidian note, docs page, or Markdown post. The tool detects ```mermaid and ~~~mermaid blocks locally.

Upload .md

# API Authentication Flow

This Markdown document contains a Mermaid diagram.

```mermaid
sequenceDiagram
  participant User
  participant App
  participant API
  User->>App: Sign in
  App->>API: Validate token
  API-->>App: Session created
  App-->>User: Open dashboard
```

## Database relationship

~~~mermaid
erDiagram
  USER ||--o{ SESSION : creates
  USER ||--o{ DOCUMENT : owns
~~~

Extracted Sequence Diagram code

This code comes from the previous step. Edit it there if needed.

sequenceDiagram
  participant User
  participant App
  participant API
  User->>App: Sign in
  App->>API: Validate token
  API-->>App: Session created
  App-->>User: Open dashboard

Live previewSample preview · GitHub README

Render & export

Export controls activate after your diagram renders locally.

Sequence

Mode

Default renderNative MermaidOptimized exportStyled download

Export style

Clean DocsGitHub READMENotion DocWhiteboard SketchTransparent DocsGitHub DarkLinear DarkTokyo NightSlide TransparentSlide DarkExecutive DeckEditorial Card

Scale

1x2x4x

Output: White · comfortable padding

Size: calculated after render

Filename: mermaid-sequence-white-2x.png

Supported Markdown Mermaid blocks

Supports triple backtick and tilde fences such as ```mermaid and ~~~mermaid.

Best for README files, Markdown docs, Obsidian notes, Joplin exports, static-site posts, and technical specs.

Need to debug a broken block first? Use the Mermaid Syntax Checker.

FAQ

Is this Mermaid to PNG converter free?

Yes. The core tool lets you export PNG, JPG, WebP, SVG, and PDF without signup or watermark. Future paid features may focus on batch workflows, API access, or advanced export automation.

Does my Mermaid code get uploaded?

For the core editor and export workflow, Mermaid code is processed locally in your browser and is not uploaded to our server.

Can I export with a transparent background?

Yes. Choose Transparent in the export style settings, then download PNG or WebP for slides, docs, and design tools.

How high can I export?

The free tool supports 1x, 2x, and 4x image/PDF export. Higher scales may be added later for Pro workflows if browser memory allows.

Is this affiliated with Mermaid.js or Mermaid Chart?

No. This is an independent tool and is not affiliated with Mermaid.js, Mermaid Chart, or their maintainers.