Mermaid para SVG: exporte um diagrama de sequência para documentos
Exporte Mermaid para SVG para documentos e diapositivos. Experimente uma sequência curta, descarregue SVG e PNG e verifique o resultado na sua app.
Um diagrama nítido no editor pode perder definição quando é ampliado num diapositivo. A exportação de Mermaid para SVG cria um ficheiro vetorial que pode redimensionar para documentação e apresentações. Abra o conversor de Mermaid para imagem e guarde o código com o resultado.
- Abra a ferramenta e clique no diagrama para editar o código.
- Cole o código Mermaid e clique fora do editor para ver o resultado.
- Abra as Definições, selecione Saída e escolha SVG.
- Feche as definições e carregue em Descarregar imagem. Abra o SVG num navegador e teste-o depois no documento ou diapositivo de destino.
O editor aceita código Mermaid. Se o guardar num bloco de código Markdown, cole apenas o conteúdo desse bloco.
O exemplo mostra quatro mensagens entre quem escreve, o editor e o exportador. As legendas são curtas para deixar espaço às setas. Cole o código na ferramenta para reproduzir o diagrama.
```mermaid
sequenceDiagram
participant Writer
participant Editor
participant Exporter
Writer->>Editor: Paste diagram source
Editor-->>Writer: Show preview
Writer->>Exporter: Choose SVG
Exporter-->>Writer: Download diagram
```
Os dois ficheiros foram descarregados pelos controlos de exportação da ferramenta a partir do mesmo código. Confirme os três participantes, as quatro mensagens e a marca por baixo do diagrama. Para alargar a interação, consulte o guia de sintaxe de sequências do Mermaid.
Abra o ficheiro na aplicação onde o vai utilizar antes de concluir o documento. Verifique as fontes, as pontas das setas, as legendas e o limite inferior da imagem. Amplie para observar os detalhes e volte depois ao tamanho de leitura.
Se a ferramenta de publicação só aceitar imagens rasterizadas, escolha PNG nas mesmas definições e exporte novamente. Verifique também essa imagem no tamanho previsto. Em sequências longas, encurte as legendas ou distribua a interação por vários diagramas.
Conserve o texto Mermaid com a imagem. Quando uma mensagem mudar, edite o código e exporte um SVG novo. Junte uma legenda breve que explique o ponto principal da interação. Pode criar o SVG aqui.