Não comece a partir de um editor em branco. O mermaid.design inclui uma galeria integrada de modelos de diagramas prontos a usar — abra um, ajuste o código e faça dele o seu.
Abrir a galeria
Clique em Modelos na barra de navegação para abrir a galeria do modo de renderização atual:
/templates— modelos renderizados com o motor oficial (SVG) e o seu tema ativo/ascii/templates— os mesmos modelos renderizados como arte ASCII
Cada cartão da galeria é renderizado em tempo real com o seu tema atual, pelo que o que vê é exatamente o que obtém de volta no editor.
Encontrar um modelo
A galeria inclui fluxogramas, diagramas de sequência, diagramas de classes, diagramas de estados, diagramas ER, gráficos de Gantt, gráficos circulares, grafos Git, mapas mentais, jornadas do utilizador e muito mais.
Use os filtros no topo para restringir a lista por tipo de diagrama. Se um modelo não for suportado pelo modo de renderização atual (por exemplo, alguns tipos de diagramas ainda não podem ser renderizados como ASCII), é ocultado automaticamente e um aviso mostra quantos modelos foram filtrados.
Aplicar um modelo
- Clique num cartão de modelo.
- Confirme a caixa de diálogo de substituição — aplicar um modelo substitui o código atualmente no editor. Esta ação não pode ser anulada.
- É levado de volta ao editor com o código do modelo carregado e renderizado.
A partir da galeria, clique em Voltar ao editor na barra de navegação para regressar ao editor sem aplicar nada.
Dicas
- Aplique primeiro um modelo e depois mude o tema — o modelo adota instantaneamente as suas variáveis de tema.
- Os modelos são uma ótima forma de aprender a sintaxe Mermaid: abra um, edite o código e observe a pré-visualização mudar.