Editor de diagramas técnicos

Crie um fluxo ou uma arquitetura com blocos nomeados e conexões direcionadas.

Carregue o exemplo ou adicione blocos com nomes claros. Em diagramas grandes, busque pelo nome ou ID estável.

Funciona no seu navegador. Nenhum diagrama é enviado. Não exige conta, Python nem GPU.

O módulo de disposição é baixado deste site ao gerar. Seu diagrama permanece neste dispositivo.

1. Descreva o seu diagrama

Renomeie os blocos, escolha suas conexões e gere o diagrama. Os rótulos e o título aceitam até 200 unidades UTF-16.

Ir para a prévia

Blocos

Conexões

Editar conexões
Voltar aos blocos
Usar JSON de um assistente de IA

Cole um diagrama na versão 1 do esquema. Se o JSON for inválido, o formulário permanece intacto. Esta ação não chama nenhum modelo de IA.

Remover um bloco mantém suas conexões para correção. As edições invalidam as exportações até gerar novamente. Os dados ficam na memória e desaparecem ao sair ou recarregar a página.

2. Confira e exporte

SVG · texto editável

Conferir os rótulos e as conexões originais

O JSON mantém os ID originais, os rótulos exatos e o sentido das conexões. Confira antes de compartilhar.

Voltar à edição

Confira o significado antes de compartilhar. As fontes podem variar em outros visualizadores SVG; setas muito próximas podem se sobrepor. Esta ferramenta organiza grafos; não simula diagramas de sequência nem circuitos.

É necessário um navegador moderno com Canvas, Web Workers e Intl.Segmenter.

Licenças do mecanismo de disposição e do código-fonte
Como usar

O que é um editor de diagramas técnicos?

Crie um fluxo ou uma arquitetura com blocos nomeados e conexões direcionadas. Edite a estrutura, confira a disposição e salve SVG e JSON com versão. A ferramenta organiza o desenho; não deduz etapas ausentes nem certifica um projeto técnico.

Passo a passo

  1. Carregue o exemplo ou adicione blocos com nomes claros. Em diagramas grandes, busque pelo nome ou ID estável.
  2. Adicione conexões, selecione origem e destino e escolha disposição vertical ou horizontal. Excluir um bloco mantém suas conexões para corrigir os extremos ou restaurar o bloco.
  3. Gere e confira nomes e sentidos das setas. Ajustar à visualização mostra o conjunto; o tamanho real permite rolar. Uma estrutura válida não garante a legibilidade de setas muito próximas.
  4. Baixe SVG e JSON. Reaplicar o JSON recupera a estrutura editável. Alterar o SVG em outro editor não atualiza o JSON. Salve as cópias antes de sair.

Como escolher as configurações

OpçãoO que muda
Fluxo / arquiteturaAmbos usam blocos nomeados e conexões direcionadas. A escolha não acrescenta regras específicas de sequências, circuitos ou outros domínios.
TB / LRDe cima para baixo / da esquerda para a direita. O idioma da interface não inverte o diagrama.
Busca e páginas10 itens editáveis por página. Filtrar altera os controles visíveis, não o diagrama completo gerado ou exportado.
SVG / JSONSVG contém formas vetoriais e texto. JSON preserva ID, rótulos e extremos da versão 1, sem as coordenadas geradas.

Exemplo e resultado esperado

Um fluxo de revisão com 3 blocos e 2 conexões exporta todos os 3 blocos e as duas conexões. Busque e renomeie um bloco, gere novamente e confira no JSON o novo rótulo e os extremos inalterados. Os números ilustram o processo, sem prever dimensões ou tempo de execução.

Se não funcionar

  • Aplique ou descarte alterações JSON pendentes antes de gerar. Corrija o caminho indicado no erro e tente novamente.
  • Se faltar um extremo, restaure o bloco excluído ou selecione um existente. Nenhuma conexão é excluída silenciosamente.
  • Se exceder o tempo ou um limite de saída, cancele e simplifique uma cópia salva antes de tentar novamente. Alterar a entrada invalida o resultado anterior; somente o resultado atual bem-sucedido pode ser baixado.
  • Limpar oferece uma única restauração na página. Sair ou recarregar libera a tarefa; não há salvamento automático. Se o acesso à área de transferência falhar, selecione o JSON e use o atalho de cópia ou baixe-o.
  • Salvar o JSON de entrada mantém um diagrama válido e editável sem coordenadas de disposição. Se o mecanismo não carregar, salve-o antes de recarregar a página e abra o arquivo JSON. Aplique ou descarte o rascunho JSON colado antes de salvar. A importação aceita JSON UTF-8 de até 1,000,000 bytes; arquivos inválidos não alteram o formulário. A leitura pode ser cancelada; uma edição também invalida a leitura anterior. A entrada não é enviada nem salva automaticamente.

Formatos e limites

Entrada pelo formulário ou JSON do esquema versão 1, até 1,000,000 bytes UTF-8. De 1 a 100 blocos e de 0 a 200 conexões. Títulos e rótulos: até 200 unidades UTF-16; título e nomes dos blocos obrigatórios, rótulos de conexão opcionais. ID de 1–40 caracteres ASCII: letras, dígitos, _ ou -, começando por letra.

A disposição para após 15 segundos. Saída limitada a 16,384 pixels por lado, 64,000,000 pixels no total e 5,000,000 bytes SVG. Campos ou versões desconhecidos, ID duplicados e extremos inexistentes são recusados. Não importa Mermaid, CAD ou arquivos de circuitos.

Não exige GPU nem Python. Um Worker do navegador usa recursos fixos da mesma origem. O texto SVG não é convertido em caminhos; fontes de outro visualizador podem alterar sua aparência. Confira o SVG no aplicativo de destino.

Perguntas frequentes

Cria o projeto técnico para mim?

Não. Você fornece blocos, rótulos e conexões. As verificações cobrem estrutura e limites de saída, não a correção do projeto.

Qual direção escolher?

TB para um fluxo vertical e LR para uma cadeia horizontal de dependências. Gere novamente e confira a adaptação ao destino.

Por que um diagrama válido ainda fica apertado?

Conexões completas podem se sobrepor visualmente. Encurte rótulos, simplifique uma cópia e confira o tamanho real antes de compartilhar.

Por que não consigo gerar ou o JSON é recusado?

Aplique ou descarte o JSON pendente. Confira caminho, versão, limites, ID únicos e extremos existentes.

Meu diagrama é enviado ao servidor ou à IA?

Não. Entrada e resultados ficam na memória da página. Os recursos fixos vêm deste site; nenhum modelo é chamado. Um assistente pode preparar esse mesmo esquema, mas esta página não se conecta à sua conta de IA.