File workflow

Open a .mmd or Markdown File and Export the Diagrams

Drag a file onto the box below, upload it, or paste the text. A .mmd file opens as a single diagram; a README, Obsidian note or docs page gives you every fenced diagram in it to pick from. Export as PNG, SVG, JPG, WebP, or PDF.

No signup · No watermark · Parsed in your browser · The file is never uploaded

Paste, drop or upload

Drop a file on the box below, or paste a README, Obsidian note or docs page. The tool reads ```mermaid and ~~~mermaid blocks locally, and takes a bare .mmd file as one diagram.

Upload a file

# 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 · Clean Docs

Render & export

Export controls activate after your diagram renders locally.

Sequence

Mode

Default renderNative MermaidOptimized exportStyled download

Export style

Clean DocsGitHub READMEGitHub DarkTransparent DocsWarm Editorial✦ ProWhiteboard Sketch✦ ProAurora Noir✦ ProBlueprint✦ ProChampagne✦ ProEmerald Suite✦ ProEditorial✦ Pro

Scale

1x2x4x

Or exact width, e.g. 1200px wide

Output: White · comfortable padding

Size: calculated after render

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

What this reads

A bare .mmd or .mermaid file — no fences needed — opens as one diagram, ready to style and export.

A Markdown document gives you every ```mermaid or ~~~mermaid block to choose from: READMEs, Obsidian notes, Joplin exports, static-site posts, specs.

Diagrams come out one at a time, as images — the document itself is not converted. Need to debug a block first? Use the Mermaid Syntax Checker.

FAQ

What does this do that the main editor does not?

The editor takes Mermaid code. This takes a whole Markdown document — a README, an Obsidian note, a docs page — finds every fenced Mermaid block inside it, and lets you pick which diagram to render and export. You do not have to hunt for the code yourself.

Which fences are detected?

Both triple backtick and tilde fences, so ```mermaid and ~~~mermaid blocks are found. Parsing happens in your browser; the document is not uploaded.

Can I export the diagram as a PDF or SVG?

Yes. Once a diagram is selected it opens in the full exporter, so PNG, JPG, WebP, SVG, and PDF are all available, with the same free no-watermark standard styles as the main editor.

Can it export every diagram in the document at once?

Not yet — diagrams are exported one at a time. Pick a block, export it, then pick the next one.

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.

Is Mermaid Online 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.