MarkNode renderiza diagramas diretamente na pré-visualização. Você escreve um diagrama em um bloco de código delimitado usando a sintaxe Mermaid — uma forma em texto simples de descrever fluxogramas, diagramas de sequência e muito mais — e o MarkNode o desenha como uma imagem no lugar do código, totalmente offline.
Escrevendo um Diagrama
Use um bloco de código delimitado com mermaid como identificador de linguagem:
```mermaid
flowchart TD
Start[Start] --> Decision{Need a diagram?}
Decision -->|Yes| Draw[Write it in Markdown]
Decision -->|No| Skip[Keep writing prose]
Draw --> Done[Done]
Skip --> Done
```A pré-visualização substitui o bloco de código pelo fluxograma renderizado. O código-fonte Markdown permanece inalterado — o MarkNode apenas desenha uma imagem a partir dele; se você quiser alterar o diagrama, edite o texto mermaid e a imagem será atualizada.
Tipos de Diagrama com Estilo Completo
Fluxogramas, diagramas de sequência, diagramas de classe e diagramas de estado recebem o tratamento completo do MarkNode — dispostos e compostos tipograficamente para combinar com o restante do seu documento, e não apenas como uma imagem genérica inserida.
Um diagrama de sequência, por exemplo:
```mermaid
sequenceDiagram
participant Writer
participant MarkNode
Writer->>MarkNode: Write a mermaid code block
MarkNode-->>Writer: Render diagram in preview
```
Diagramas de classe e de estado usam o mesmo bloco delimitado mermaid com suas próprias palavras-chave do Mermaid (classDiagram, stateDiagram-v2) e são renderizados com o mesmo nível de refinamento.
Outros Tipos de Diagrama
Muitos outros tipos de diagrama do Mermaid — incluindo gráficos de pizza e gráficos de Gantt — também são renderizados no MarkNode hoje, como diagramas reais estilizados de acordo com o seu tema, e não como código. O mesmo nível de refinamento de layout personalizado que fluxogramas e diagramas de sequência, classe e estado recebem está planejado para esses tipos de diagrama em uma atualização futura.
Combinando com o Seu Tema
Na pré-visualização, os diagramas seguem o tema do aplicativo do seu documento. Troque de tema e todos os diagramas na tela serão reestilizados junto com o restante da pré-visualização — não há nada para configurar separadamente.
As pré-visualizações do Quick Look seguem, em vez disso, a aparência clara/escura do sistema do seu Mac. Fluxogramas e diagramas de sequência, classe e estado combinam em ambos os casos; diagramas de pizza e Gantt atualmente são renderizados com uma única paleta no Quick Look.
Onde os Diagramas Aparecem
Os diagramas são renderizados em todas as superfícies que exibem seu Markdown renderizado:
- O painel de pré-visualização acoplado
- A janela de pré-visualização desacoplada
- Quick Look do macOS (pressione Espaço em um arquivo Markdown no Finder — veja Pré-visualizações do Quick Look)
- Exportação DOCX, como imagem incorporada
Erros
Se a sintaxe Mermaid de um diagrama tiver um erro — um tipo de diagrama não reconhecido, um erro de digitação na sintaxe — o MarkNode exibe o bloco de código delimitado original em vez de uma imagem quebrada ou em branco. O restante do seu documento é renderizado normalmente; apenas aquele bloco é afetado. Corrija o código-fonte e o diagrama aparecerá na próxima vez que a pré-visualização for atualizada.
Sintaxe Suportada
O MarkNode segue a sintaxe do próprio projeto Mermaid. Para conhecer toda a variedade de tipos de diagrama e opções, consulte a documentação oficial do Mermaid — tudo o que for válido lá é o que o MarkNode tenta renderizar.