Editor Mermaid

Editor Mermaid gratuito de Bee Tools. Soporta diagramas de flujo, secuencia, Gantt, clases y ER. Vista previa en vivo, exportación SVG/PNG. Renderiza local.

Dibuja diagramas profesionales con sintaxis de texto y previsualización al instante. Describe cualquier diagrama con la sintaxis declarativa de Mermaid y Bee Tools lo renderizará localmente en tu navegador como un gráfico vectorial nítido. Exporta a PNG o SVG para documentos, diapositivas y blogs.

Resumen de Mermaid

Qué es Mermaid

Mermaid fue creado en 2014 por Knut Sveidqvist como un lenguaje declarativo tipo Markdown para describir diagramas. Frente a herramientas de arrastrar y soltar, te permite versionar los diagramas en tu repositorio.

Referencia rápida

  • flowchart TD/LR — flujos. A-->B es una conexión, A{?} una decisión, A([Inicio]) un rectángulo redondeado.
  • sequenceDiagram — secuencias. Alice->>Bob: Hola envía un mensaje; Bob-->>Alice: Hola es la respuesta.
  • gantt — diagramas Gantt. Define dateFormat y describe tareas con fecha y duración.
  • classDiagram — clases. Define clases y relaciones como herencia Animal <|-- Dog.
  • stateDiagram-v2 — máquinas de estado, ideal para UI/pedidos/pipelines.
  • pie — gráficos circulares con pares "Etiqueta" : valor.

Consejos prácticos

  1. Mantén las etiquetas cortas; las largas rompen la maquetación.
  2. Usa subgraphs para dividir diagramas complejos.
  3. Personaliza colores con classDef para mejor legibilidad.
  4. Añade %% comentarios para mantener el código.

Edita el ejemplo en el panel izquierdo y observa el resultado a la derecha.

Aviso de código abierto: Renderizado con mermaid, MIT License. Copyright (c) 2014-2022 Knut Sveidqvist.

Preguntas frecuentes

¿Qué es Mermaid?
Mermaid es un lenguaje de diagramación en JavaScript creado por Knut Sveidqvist. Con sintaxis similar a Markdown genera diagramas de flujo, secuencias, Gantt y más. Tiene soporte nativo en GitHub, GitLab, Docusaurus y Obsidian.
¿Qué tipos de diagrama se admiten?
Soportamos flowchart, sequenceDiagram, gantt, classDiagram, stateDiagram-v2, pie, erDiagram, gitGraph y requirementDiagram.
¿Mis diagramas se guardan o se suben?
No. Todo el dibujo ocurre dentro de tu navegador. Cerrar la pestaña borra el contenido.
¿La exportación SVG/PNG pierde calidad?
SVG es vectorial, nítido en cualquier escala. PNG se rasteriza al doble de resolución.
¿Cómo incrusto Mermaid en Markdown?
Envuelve el código en un bloque marcado como `mermaid`. GitHub, GitLab, Hugo, Hexo y Obsidian lo renderizan automáticamente.