Mermaid

Renderiza diagramas do Mermaid (fluxo, sequência, classes, estados, gantt…) como um web component independente de framework. O <r-mermaid> carrega a biblioteca mermaid sob demanda no primeiro render (aplicações que nunca a usam não pagam nada) e desenha o diagrama no próprio shadow root, ficando isolado dos estilos da página.

Use quando quiser colocar em qualquer página um diagrama escrito como texto sem ligar o mermaid você mesmo, opcionalmente com uma barra de copiar / baixar / tela cheia e um visualizador com deslocamento e zoom.

Início 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'; // ou a entrada independente:
import 'ranui/mermaid';

A fonte do diagrama é lida do conteúdo de texto do elemento ou de um atributo code codificado em URI (use code quando a sintaxe contiver <, por exemplo o <|-- de classDiagram, para que ela sobreviva à análise do HTML):

el.code = 'classDiagram\n  Dog --|> Animal'; // o setter da propriedade codifica em URI para você

Controles

Cada controle é opcional e ligado por um atributo booleano; um <r-mermaid> sem nada é um diagrama estático e limpo. A barra aparece ao passar o mouse (canto superior direito).

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 a fonte do diagrama para a área de transferência.
• download: SVG / PNG / fonte (.mmd); com um único formato baixa direto, com vários mostra um menu. Restrinja com download="svg" ou download="svg png".
• fullscreen: abre uma caixa de luz sem cabeçalho (r-modal) com deslocamento e zoom (roda para ampliar, arrastar para mover, com reinício); fecha pelo ✕, clique no fundo ou Esc.

Referência da API

Atributos

Atributo	Tipo	Padrão	Descrição
code	string (codificado em URI)	—	Fonte do diagrama. Na falta dele, recorre ao conteúdo de texto do elemento.
theme	'auto' | 'light' | 'dark'	'auto'	Tema do mermaid. auto segue a página (.dark / [data-ran-theme]) e re-renderiza ao alternar.
copy	booleano	desligado	Mostra o botão de copiar a fonte.
download	booleano / "svg png source"	desligado	Mostra o botão de download; o valor restringe os formatos oferecidos.
fullscreen	booleano	desligado	Mostra o botão de tela cheia.
sheet	string	—	CSS extra injetado no shadow root.
label-*	string	Inglês	Sobrescreve os rótulos: label-copy, label-download, label-fullscreen, label-zoom-in, label-zoom-out, label-reset, label-diagram (nome do diálogo).

Eventos

Todos os eventos borbulham e cruzam a fronteira do shadow (composed).

Evento	detail	Disparado quando
render	{ ok: true }	um diagrama terminou de renderizar
copied	{ kind: 'source' }	a fonte foi copiada
download	{ format: 'svg' | 'png' | 'source' }	um arquivo foi baixado
error	{ message: string }	o diagrama falhou ao analisar ou renderizar
fullscreenchange	{ open: boolean }	a caixa de luz abriu ou fechou

Partes CSS

Parte	Descrição
mermaid	O invólucro externo.
diagram	O contêiner do diagrama renderizado.
toolbar	A barra de controles que aparece ao passar.
button	Cada botão de ícone da barra.
error	A caixa de mensagem de erro (quando falha).

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

Variáveis CSS

Sobrescreva no elemento (cada uma recorre a um token semântico e depois a um 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

• Carregado sob demanda: o mermaid (e o r-modal usado na tela cheia) são importações dinâmicas, então chegam como blocos assíncronos separados só quando um diagrama renderiza ou a tela cheia abre.
• Fidelidade do render: o <r-mermaid> usa o render do próprio mermaid, então todos os tipos de diagrama e temas são suportados.
• Exportar PNG: diagramas que usam rótulos HTML (htmlLabels do mermaid) são desenhados com <foreignObject>, o que pode contaminar o canvas e fazer a exportação PNG falhar; nesse caso um evento error é despachado. Exportar SVG e a fonte sempre funciona.