O laboratório está aberto! Apresento o The Little Mermaid Editor! (#mermaid #mermaidjs #diagram #web #pwa)

Se você já precisou montar um diagrama rapidinho e se viu lutando com ferramentas travadas, criando uma conta que nunca mais vai usar, se perguntando quem está espionando enquanto você desenha a arquitetura do seu sistema, ou se todo o seu trabalho confidencial vai ser usado para treinar alguma IA... eu te entendo. Foi exatamente por isso que criei o The Little Mermaid Editor.

O que é Mermaid?

Resumindo, é uma sintaxe em markdown para criar diferentes tipos de fluxogramas. Leva um tempinho para se acostumar, mas quando pega o jeito, dá pra criar diagramas bem bacanas e compartilhá-los como texto em arquivos readme ou salvá-los como imagens.

Aqui vai um exemplo:

1flowchart TD
2    A[Programar um pouco] --> B{Tá funcionando?}:::decision
3    B -- Sim --> C{Só na sua máquina?}:::decision
4    B -- Não --> A
5    C -- Sim --> A
6    C -- Não --> D[Beleza! Manda pra produção!]

O que é o editor?

É um editor de diagramas Mermaid que roda inteiramente no seu navegador:

1. Nenhuma funcionalidade de IA que ninguém pediu sendo enfiada goela abaixo.
2. Nenhuma assinatura necessária.
3. Nenhum rastreamento.
4. Nenhuma criação de conta.
5. Nenhum anúncio.

Você abre, digita a sintaxe Mermaid, e vê o diagrama. Simples assim.

Pode experimentar agora mesmo: The Little Mermaid Editor

Funcionalidades

Aqui vai um resumo do que o editor oferece:

• Pré-visualização ao vivo: digite de um lado, veja o diagrama se atualizar do outro em tempo real.
• Links compartilháveis: gere uma URL que codifica o seu diagrama, permitindo compartilhar com qualquer pessoa sem precisar criar conta ou fazer upload de nada.
• 20+ tipos de diagrama: fluxogramas, diagramas de sequência, diagramas de classe, diagramas ER, gráficos de Gantt, mapas mentais, timelines, C4, e mais. Se o Mermaid suporta, o editor suporta.
• Múltiplos layouts: divisão horizontal, divisão vertical, só editor ou só pré-visualização. Alterne com um clique ou com Alt+1 até Alt+4.
• Múltiplas abas: trabalhe em vários diagramas ao mesmo tempo, cada um com seu próprio histórico de desfazer.
• Modo escuro: porque claro que sim.
• Temas de diagrama: alterne entre default, dark, forest e neutral para combinar com o seu estilo.
• Templates: salve seus próprios templates de diagrama e carregue-os quando precisar de um ponto de partida.
• Histórico automático: o editor salva snapshots automaticamente a cada 30 segundos de inatividade, então você sempre pode voltar atrás se precisar. Também dá pra salvar snapshots manualmente.
• Exportação: baixe seu diagrama como SVG ou PNG, com opções configuráveis.
• Copiar para área de transferência: copie como código-fonte, bloco Markdown, SVG ou PNG. Ótimo para colar direto em documentos ou no chat.
• Arquivos: abra e salve arquivos .mmd diretamente. Também dá pra arrastar e soltar arquivos no editor.
• Formatação automática: formate o código Mermaid com um clique.
• Documentação contextual: o editor detecta qual tipo de diagrama você está editando e linka diretamente para a documentação relevante do Mermaid.
• Atalhos de teclado: um conjunto completo de atalhos para quem gosta de produtividade. Aperte F1 para ver todos.
• Pré-visualização interativa: zoom com scroll, arraste para mover, clique duplo para ajustar à tela, e clique em qualquer nó para pular para a linha correspondente no editor.
• Instalável (PWA): você pode instalar como um app independente e usar totalmente offline.

Por que mais um editor de Mermaid?

Existem outros editores de Mermaid por aí, e alguns são até bem bons (e gratuitos). Mas eu queria algo simples: abrir uma página, desenhar um diagrama, exportar, pronto. Sem atrito, sem dados saindo do meu navegador, sem precisar me preocupar com como o editor está me rastreando ou com vazamento de dados.

Experimente

Aqui está o link: The Little Mermaid Editor

É gratuito, é aberto e respeita a sua privacidade. Espero ter ajudado! :)