Mermaid

Renderiza diagramas de Mermaid (flujo, secuencia, clases, estados, gantt…) como un web component independiente de cualquier framework. <r-mermaid> carga la biblioteca mermaid de forma diferida en el primer render (las aplicaciones que nunca la usan no pagan nada) y dibuja el diagrama en su shadow root, de modo que queda aislado de los estilos de la página.

Úsalo cuando quieras poner en cualquier página un diagrama escrito como texto sin cablear mermaid tú mismo, opcionalmente con una barra de copiar / descargar / pantalla completa y un visor con desplazamiento y zoom.

Inicio rápido

graph LR; A[Request] --> B[Validate]; B --> C[Store]; C --> D[Respond]

<r-mermaid>graph LR; A[Request] --> B[Validate]; B --> C[Store]</r-mermaid>

import 'ranui'; // o la entrada independiente:
import 'ranui/mermaid';

El origen del diagrama se lee del contenido de texto del elemento o de un atributo code codificado en URI (usa code cuando la sintaxis contenga <, por ejemplo el <|-- de classDiagram, para que sobreviva al análisis del HTML):

el.code = 'classDiagram\n  Dog --|> Animal'; // el setter de la propiedad codifica en URI por ti

Controles

Cada control se activa explícitamente con un atributo booleano; un <r-mermaid> a secas es un diagrama estático y limpio. Los controles activados permanecen visibles sobre el diagrama.

graph TD; A[Start] --> B[Do work]; B --> C[End]

<r-mermaid copy download fullscreen>graph TD; A --> B; B --> C</r-mermaid>

copy: copia el origen del diagrama al portapapeles.
download: SVG / PNG / origen (.mmd); con un solo formato descarga directamente, con varios muestra un menú. Limítalo con download="svg" o download="svg png".
fullscreen: abre una caja de luz sin cabecera (r-modal) con desplazamiento y zoom (rueda para acercar, arrastrar para mover, con reinicio); se cierra con la ✕, un clic en el fondo o Esc.

Referencia de la API

Atributos

Atributo	Tipo	Por defecto	Descripción
`code`	`string` (codificado en URI)	—	Origen del diagrama. Si falta, recurre al contenido de texto del elemento.
`theme`	`'auto' \| 'light' \| 'dark'`	`'auto'`	Tema de mermaid. `auto` sigue a la página (`.dark` / `[data-ran-theme]`) y vuelve a renderizar al cambiar.
`copy`	booleano	apagado	Muestra el botón de copiar el origen.
`download`	booleano / `"svg png source"`	apagado	Muestra el botón de descarga; el valor limita los formatos ofrecidos.
`fullscreen`	booleano	apagado	Muestra el botón de pantalla completa.
`sheet`	`string`	—	CSS extra inyectado en el shadow root.
`label-*`	`string`	Inglés	Sobrescribe las etiquetas: `label-copy`, `label-download`, `label-fullscreen`, `label-zoom-in`, `label-zoom-out`, `label-reset`, `label-diagram` (nombre del diálogo).

Eventos

Todos los eventos burbujean y cruzan el límite del shadow (composed).

Evento	`detail`	Se dispara cuando
`render`	`{ ok: true }`	un diagrama termina de renderizarse
`copied`	`{ kind: 'source' }`	se copió el origen
`download`	`{ format: 'svg' \| 'png' \| 'source' }`	se descargó un archivo
`error`	`{ message: string }`	el diagrama falló al analizarse o renderizarse
`fullscreenchange`	`{ open: boolean }`	la caja de luz se abrió o se cerró

Partes CSS

Parte	Descripción
`mermaid`	El envoltorio exterior.
`diagram`	El contenedor del diagrama renderizado.
`toolbar`	La fila de acciones visible.
`button`	Cada botón de icono de la barra.
`error`	El cuadro de error (cuando falla el render).

r-mermaid::part(toolbar) {
  background: var(--surface);
}

Variables CSS

Sobrescríbelas en el elemento (cada una recurre a un token semántico y luego a un literal): --ran-mermaid-padding, --ran-mermaid-toolbar-background, --ran-mermaid-toolbar-gap, --ran-mermaid-button-size, --ran-mermaid-button-color, --ran-mermaid-button-hover-background, --ran-mermaid-error-color.

Notas

Carga diferida: mermaid (y el r-modal que usa la pantalla completa) son importaciones dinámicas, así que llegan como fragmentos asíncronos aparte solo cuando se renderiza un diagrama o se abre la pantalla completa.
Fidelidad del render: <r-mermaid> usa el render propio de mermaid, así que admite todos los tipos de diagrama y todos los temas.
Exportar a PNG: los diagramas con etiquetas HTML (htmlLabels de mermaid) se dibujan con <foreignObject>, lo que puede contaminar el canvas y hacer fallar la exportación a PNG; en ese caso se despacha un evento error. Exportar SVG y el origen siempre funciona.

Copiar y pantallas estrechas

Los controles activados permanecen visibles en una fila discreta sobre el contenido: objetivos de 32px con puntero preciso, 44px con entrada táctil y una separación de 8px. Sin controles no se reserva espacio. Copiar conserva el foco e impide escrituras duplicadas mientras están pendientes. Los errores o la falta de acceso al portapapeles se muestran localmente en ::part(copy-status) (role="status"), traducible con label-copy-error; el reintento usa el mismo botón. copied solo se emite tras copiar el contenido actual. Cambiar la fuente o el destino de copia invalida las respuestas anteriores. Al cambiar la fuente, el botón conserva el foco y permite copiar la nueva fuente de inmediato.