Un bloque ```` ```mermaid ```` es un diagrama; `::mermaid` con una prop `code`
es el mismo componente.

## Uso

```mermaid
flowchart LR
  A[app.config.ts] --> B[resolveSources]
  B --> C[collections]
  B --> D[resolvedSources]
  C --> E[Content]
  D --> F[theme]
```

`````md
```mermaid
flowchart LR
  A[app.config.ts] --> B[resolveSources]
  B --> C[collections]
```
`````

## API

### Props

| Prop   | Tipo     | Por defecto | Notas                                                     |
| :----- | :------- | :---------- | :-------------------------------------------------------- |
| `code` | `string` | —           | El código fuente del diagrama, cuando no se usa un bloque  |

## Notas

Se carga bajo demanda y solo en el navegador: mermaid pesa aproximadamente medio
megabyte y arrastra su propio parser, y un sitio en el que tres páginas de
sesenta llevan un diagrama no debe hacer que las otras cincuenta y siete lo
paguen.

Eso también significa que el diagrama se renderiza en el cliente — la salida del
servidor es el texto fuente, que es el recurso honesto para un lector sin
JavaScript.

Los cambios del código vuelven a dibujar el diagrama. Cada instancia tiene identificadores SVG distintos. Los cambios rápidos de tema no pueden reemplazar un resultado nuevo por uno anterior. La sintaxis inválida deja visible el código original.