Pular para o conteúdo
duxt

Mermaid

Um diagrama a partir de um bloco de código ou de uma prop.

Um bloco ```mermaid é um diagrama; ::mermaid com uma prop code é o mesmo componente.

Utilização

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

API

Props

PropTipoPor omissãoNotas
codestring—O código do diagrama, quando não há um bloco

Notas

Carregado a pedido e só no navegador: o mermaid tem perto de meio megabyte e traz consigo o seu próprio parser, e um site onde três páginas em sessenta transportam um diagrama não pode obrigar as outras cinquenta e sete a pagar por isso.

Isso também significa que o diagrama é apresentado no cliente — o resultado do servidor é o texto de origem, que é o recurso honesto para um leitor sem JavaScript.

As alterações ao código voltam a desenhar o diagrama. Cada instância tem identificadores SVG distintos. Mudanças rápidas de tema não substituem um resultado novo por um anterior. A sintaxe inválida mantém o código original visível.

Esta página foi útil?