# Mermaid diagram editor

> Preview sanitized diagrams and export SVG or PNG.

[Open tool](https://www.toolcabana.com/hy/mermaid-diagram-editor) · [Games creative work and music](https://www.toolcabana.com/hy/category/games-creative-work-and-music)

Tool ID: mermaid-diagram-editor. Requested language: hy. Description language: en. Complete guide translation: no; untranslated sections use English.

## Overview (en)

The Mermaid diagram editor renders Mermaid text, such as a flowchart LR definition, into a diagram preview and lets you download it as SVG or PNG. Rendering runs in Mermaid's strict security mode, and the SVG is sanitized to remove scripts and embedded HTML. Diagrams can be up to 20,000 characters and 300 lines.

## Supported tasks (en)

Preview sanitized diagrams and export SVG or PNG.

## Steps (en)

1. Paste the source into the input editor, or load the built-in example.
2. Set download format.
3. Run mermaid diagram editor, review the output, then use the available copy or download controls.

## Settings

- Download format (en; key: format; type: select): SVG [en], PNG [en]

## Limitations (en)

Images use the existing 32-megapixel canvas bound. Up to 100 source images are allowed where supported. Pasted HTML is bounded to 200,000 characters; Mermaid diagrams to 20,000 characters and 300 lines. SVG and PNG generation require a browser.

## Example input

```text
flowchart LR
  A[Choose a tool] --> B[Add your input]
  B --> C[Review the result]
```

## Privacy and connections (en)

This operation processes its source in your browser. Copy and download are explicit actions; source input is not saved in an account or history.

## Questions (en)

### How do I export a Mermaid diagram as PNG?

Paste your Mermaid code, set Download format to PNG and run the editor. The sanitized SVG is drawn onto a canvas and saved as diagram.png, capped at 8,000 pixels per side. Choose SVG instead for a scalable vector file.

### Why is my Mermaid init directive or front matter rejected?

Configuration directives such as %%{init: ...}%% and front matter blocks starting with --- are disabled for safety, and the editor returns an error if they appear. Themes and other settings in those blocks are not applied, so remove them before rendering.

### Why do HTML labels not appear in my diagram?

Diagrams render with Mermaid's strict security level and flowchart HTML labels turned off, and the output is sanitized to strip script and foreignObject elements. Use plain-text labels inside node brackets, such as A[Choose a tool], instead of HTML markup.

### Where is my input processed?

This operation processes its source in your browser. Copy and download are explicit actions; source input is not saved in an account or history.

### What are the input limits?

Images use the existing 32-megapixel canvas bound. Up to 100 source images are allowed where supported. Pasted HTML is bounded to 200,000 characters; Mermaid diagrams to 20,000 characters and 300 lines. SVG and PNG generation require a browser.

## Related tools

- [Tournament bracket generator](https://www.toolcabana.com/hy/tournament-bracket-generator)
- [Round robin scheduler](https://www.toolcabana.com/hy/round-robin-scheduler)
- [Sudoku generator and checker](https://www.toolcabana.com/hy/sudoku-generator-and-checker)
- [Word search generator](https://www.toolcabana.com/hy/word-search-generator)