Sobre o Mermaid Viewer
Quem gere este site e porque é que ele existe.
O que é isto
O Mermaid Viewer é um editor gratuito de diagramas Mermaid que funciona no navegador. Escreve ou cola texto Mermaid à esquerda e o diagrama renderizado aparece à direita enquanto escreve.
A renderização acontece no seu navegador. O seu diagrama não é enviado, guardado nem processado num servidor: o Mermaid corre como JavaScript na sua própria máquina, e um ficheiro que arraste é lido localmente. É por isso que isto funciona com diagramas que não colaria numa ferramenta alojada: arquitetura interna, sistemas com nomes de clientes nas etiquetas, tudo o que esteja abrangido por um acordo de confidencialidade.
Uma ressalva que prefiro dizer a esconder: se ativar a ligação de partilha, o diagrama fica codificado no próprio URL, e um URL que envia a alguém viaja pela rede. Tudo o resto fica na sua máquina.
Porque existe
Precisava de documentar arquitetura de software e queria que os diagramas vivessem no repositório, junto ao código, em vez de numa ferramenta de desenho à parte. O Mermaid era o formato óbvio para isso. O que me faltava era uma boa forma de os ver.
Não comecei por procurar uma ferramenta. Olhei para o problema, achei-o pequeno e calculei que conseguia construir algo limpo em pouco tempo. E foi o que fiz — o primeiro commit deste projeto é de janeiro de 2026.
Construí-o para mim e para mais nada. Queria abrir um diagrama, vê-lo renderizado, aproximar a parte que me interessava e enviar uma ligação a alguém. Outras pessoas encontraram-no mais tarde, e isso mudou aquilo a que dedico tempo, mas não mudou o que a ferramenta é.
Como funciona
O Mermaid trata da renderização. Este site é tudo o que está à volta: um editor ao vivo com pré-visualização instantânea, zoom e deslocação para diagramas grandes demais para um ecrã, três temas, exportação para SVG e PNG, ligações de partilha codificadas no URL, arrastar e largar ficheiros .mmd e .mermaid, e uma interface em 18 idiomas.
A utilização é gratuita e é paga por publicidade não intrusiva.
Contacto
Perguntas e relatos de erros para dominik@malsch.solutions. Os dados do responsável estão no aviso legal.
Escrito por Dominik Malsch · Última atualização: