Mermaid
Un diagrama a partir de un bloque de código o de una prop.
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]
```
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.