Mermaid Editor

Editor mermaid online grátis, visual e código no mesmo lugar

A maioria dos editores mermaid dá uma caixa de texto e uma pré-visualização. Este também dá uma tela: clique para adicionar um bloco, arraste uma seta, agrupe elementos em áreas — e o código mermaid escreve-se sozinho. Mude para o separador de código e edite-o à mão; a tela acompanha.

  • Renderiza à medida que escreve

    O motor mermaid real, redesenhado poucas centenas de milissegundos depois da última tecla.

  • Código e tela sincronizados

    Edite qualquer um dos lados. O outro acompanha — sem copiar e colar entre duas ferramentas.

  • 14 formas de nó

    Retângulo, arredondado, pílula, círculo, losango, base de dados, hexágono e as restantes, um clique cada.

  • Grátis, sem cadastro

    Sem teste nem marca d'água — o editor abre na hora. Entre só se quiser mais de um diagrama.

Uma tela, não só uma caixa de texto

O separador visual é um editor real sobre o diagrama renderizado: clique num nó para o selecionar, clique duas vezes para o renomear no local, arraste em qualquer ponto para deslocar a vista.

  • Clique para construirAdicione um bloco, aponte uma seta para outro, coloque um texto na seta. Sem sintaxe para memorizar antes de começar.

  • Escolha uma formaCatorze formas de fluxograma mermaid — losangos de decisão, cilindros de base de dados, subrotinas — num único seletor.

  • Colora o que quiserOito predefinições mais um seletor de cor, aplicadas a um único nó ou a uma área inteira.

Código mermaid que continua seu

O separador de texto é mermaid puro — a mesma sintaxe que o GitHub, o GitLab, o Notion e o Obsidian já renderizam. Nada aqui é um formato proprietário.

  • Escreva à mãoEscreva mermaid diretamente e veja-o renderizar. Seis exemplos prontos para começar.

  • Vai e voltaOs fluxogramas que cola são interpretados de volta para a tela — nós, formas, cores, subgráficos e tudo o resto.

  • Todos os tipos de diagramaFluxograma, sequência, classes, estados, ER, gantt, git graph, circular — a pré-visualização renderiza tudo o que o mermaid suporta.

Diagramas grandes continuam legíveis

Diagramas de arquitetura rapidamente ultrapassam um ecrã. Deslocar, ampliar e agrupar foram pensados para isso, em vez de lutar contra isso.

  • Áreas e aninhamentoAgrupe blocos em subgráficos, aninhe uma área dentro de outra, mova uma subárvore inteira num só gesto.

  • Zoom de 2% a 1600%Deslize para mover a vista, ctrl+deslize para ampliar, ou recentre com um botão.

  • Guardado automaticamenteSeu diagrama é salvo automaticamente no navegador enquanto você edita. Se entrar, ele é salvo na sua conta e acompanha você em qualquer dispositivo.

Exporte e siga em frente

Nada fica preso. Leve a imagem, leve a fonte, ou leve um bloco Markdown pronto para colar num documento.

  • Sem paywallTodas as funcionalidades, incluindo a exportação, são grátis. Não há nenhum plano pago para o qual atualizar.

  • Renderizado no seu navegadorA renderização acontece no seu navegador; sem conta, o diagrama nunca sai dele, e com conta o documento salvo acompanha você em qualquer dispositivo.

  • SVG, PNG, .mmd, .mdCopie o código SVG, transfira um PNG a 2x, guarde a fonte mermaid, ou obtenha um bloco Markdown delimitado.

Como se compara às opções habituais

As ferramentas de diagrama-como-código obrigam a escrever tudo à mão. As ferramentas de arrastar e largar dão uma imagem que não se pode comparar por diferenças. Este recusa-se a escolher um lado.

Começar

IQ Mermaid: Clique duas vezes na tela e aparece um nó. Pode aprender a sintaxe mais tarde, ou nunca.

Ferramenta típica: Leia primeiro a referência de sintaxe, ou aceite uma ferramenta de desenho sem qualquer representação em texto.

O formato de saída

IQ Mermaid: Mermaid puro — o mesmo texto que o GitHub, o GitLab e o Notion renderizam nativamente.

Ferramenta típica: Um ficheiro proprietário que só abre na ferramenta que o criou.

Editar mais tarde

IQ Mermaid: Altere o código ou mova os blocos. As duas direções funcionam no mesmo diagrama.

Ferramenta típica: Só numa direção: as ferramentas centradas em código não têm tela, as centradas em tela não têm fonte.

Preço

IQ Mermaid: Grátis — nem e-mail.

Ferramenta típica: Plano gratuito limitado a alguns diagramas, com exportação ou colaboração atrás de uma subscrição.

Onde ficam os dados

IQ Mermaid: No seu navegador, ou na sua conta se quiser que acompanhe você em qualquer dispositivo.

Ferramenta típica: Uma conta no servidor de outra pessoa, com os seus diagramas associados a ela.

Perguntas sobre o editor mermaid

Para começar, basta abrir a página.

O que é o mermaid?

Mermaid é uma sintaxe de texto para diagramas: descreve nós e setas em poucas linhas, e um motor de renderização desenha a imagem. O GitHub, o GitLab, o Notion e o Obsidian renderizam-no dentro do Markdown, por isso um bloco mermaid continua legível num pull request ou numa página de wiki.

Este editor mermaid é mesmo grátis?

Sim. Todos os recursos, incluindo a exportação para SVG e PNG, são gratuitos, e você pode usar o editor sem criar nada. Uma conta gratuita opcional acrescenta mais diagramas salvos e sincronização entre dispositivos — não há plano pago e nada é retido.

Preciso de saber a sintaxe mermaid?

Não. Comece no separador visual: clique duas vezes na tela para adicionar um bloco, selecione-o e desenhe uma seta até outro. O código mermaid é gerado automaticamente e pode lê-lo sempre que quiser aprender a sintaxe.

Que tipos de diagrama são suportados?

O separador de código renderiza tudo o que o mermaid suporta — fluxograma, sequência, classes, estados, entidade-relacionamento, gantt, git graph, circular e mais. A tela visual edita fluxogramas especificamente, que é o que a maioria dos diagramas são.

Posso exportar para PNG ou SVG?

Sim. Copie o código SVG para a área de transferência, transfira o ficheiro SVG, ou transfira um PNG renderizado a 2x para apresentações e documentos. Também pode guardar a fonte mermaid como .mmd ou como um bloco Markdown delimitado.

Onde fica guardado o meu diagrama?

Sem conta, seu único diagrama é salvo no navegador, então ele está lá quando você volta no mesmo dispositivo. Se entrar, ele é salvo na sua conta e pode acompanhar você em outro dispositivo. Exporte a fonte se quiser uma cópia sua.

Posso colar um diagrama mermaid já existente?

Sim. Cole-o no separador de código; um fluxograma é interpretado de volta para a tela visual com os seus nós, formas, cores e subgráficos intactos. Outros tipos de diagrama renderizam na pré-visualização mas continuam apenas em código.

Funciona offline?

A renderização acontece inteiramente no navegador: depois que a página carrega, o editor funciona sem conexão.

Abra o editor. Grátis — sem cadastro.

Uma tela em branco, um separador de código e todas as opções de exportação — grátis, no seu navegador, agora mesmo.