# Editor de diagramas Mermaid

> Previsualiza diagramas saneados y exporta SVG o PNG.

[Open tool](https://www.toolcabana.com/es/mermaid-diagram-editor) · [Juegos, creatividad y música](https://www.toolcabana.com/es/category/games-creative-work-and-music)

Tool ID: mermaid-diagram-editor. Requested language: es. Description language: es. Complete guide translation: yes.

## 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 (es)

Previsualiza diagramas saneados y exporta SVG o PNG.

## Steps (es)

1. Pega la fuente en el editor de entrada o carga el ejemplo integrado.
2. Configura el formato de descarga.
3. Ejecuta el editor de diagramas Mermaid, revisa la salida y usa los controles disponibles para copiar o descargar.

## Settings

- Formato de descarga (es; key: format; type: select): SVG [es], PNG [es]

## Limitations (es)

Las imágenes usan el límite de lienzo existente de 32 megapíxeles. Se permiten hasta 100 imágenes de origen donde sea admitido. El HTML pegado está limitado a 200,000 caracteres; los diagramas Mermaid a 20,000 caracteres y 300 líneas. La generación de SVG y PNG requiere un navegador.

## Example input

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

## Privacy and connections (es)

Esta operación procesa su fuente en tu navegador. Copiar y descargar son acciones explícitas; la entrada de origen no se guarda en una cuenta ni en un historial.

## Questions (es)

### 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.

### ¿Dónde se procesa mi entrada?

Esta operación procesa su fuente en tu navegador. Copiar y descargar son acciones explícitas; la entrada de origen no se guarda en una cuenta ni en un historial.

### ¿Cuáles son los límites de entrada?

Las imágenes usan el límite de lienzo existente de 32 megapíxeles. Se permiten hasta 100 imágenes de origen donde sea admitido. El HTML pegado está limitado a 200,000 caracteres; los diagramas Mermaid a 20,000 caracteres y 300 líneas. La generación de SVG y PNG requiere un navegador.

## Related tools

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