Digite setas como User -> API -> Database e receba um diagrama de arquitetura ou de fluxo já organizado. Recolha grupos para ver o todo e numere os passos para um fluxo detalhado.
100%
Digite à esquerda uma linha como User -> App -> Database, ou clique duas vezes aqui para adicionar uma caixa.
Arraste as caixas para movê-las. Clique duas vezes para renomear ou adicionar uma caixa. Arraste o ponto de uma caixa para conectá-la. Ctrl+Z desfaz.
Nada é enviado: o diagrama fica no seu navegador e nos links que você decidir compartilhar.
Sobre Criador de diagramas de sistemas
Num quadro branco digital você desenha cada caixa e cada seta e alinha tudo à mão. Aqui você digita quem fala com quem, uma linha por seta, e o layout é feito sozinho. Agrupe serviços relacionados e recolha o grupo em uma caixa quando quiser ver o todo; abra de novo para o detalhe.
O que faz
Layout automático, da esquerda para a direita ou de cima para baixo, que se atualiza enquanto você digita.
Formas escolhidas pelo nome: DB vira banco de dados, Kafka uma fila, User uma pessoa e um nome terminado em ? uma decisão.
Grupos que se recolhem em uma caixa, para que um diagrama sirva de visão geral e de detalhe.
Também dá para arrastar, conectar, renomear e adicionar caixas na tela; cada mudança é escrita no texto.
Passos numerados, estilo desenhado à mão, exportação PNG e SVG e links de compartilhamento. Nada é enviado.
Como funciona
1Digite linhas como User -> Web App -> Orders DB ou comece por um modelo.
2Adicione grupos com Nome { ... }, rótulos após dois-pontos e --> para chamadas assíncronas.
3Alterne entre Visão geral e Detalhes, ajuste caixas arrastando e exporte ou copie um link.
Perguntas
Qual a diferença para o Excalidraw?
O Excalidraw é um quadro branco livre: você posiciona cada forma e cada seta. Aqui o texto é o diagrama e o layout é automático, então adicionar um serviço é uma linha, não desenhar e realinhar caixas. Para um esboço solto, o Excalidraw ainda é melhor.
Como mostro uma visão geral e uma detalhada?
Coloque as caixas relacionadas num grupo com Nome { ... }. Visão geral recolhe cada grupo em uma única caixa e junta suas setas; Detalhes abre de novo. Também dá para recolher um grupo por vez pelo cabeçalho.
Meu diagrama fica guardado em algum lugar?
Não. Ele é desenhado no seu navegador e mantido no armazenamento local dele. Um link compartilhado leva o diagrama dentro do próprio link, depois do sinal #, que os navegadores nunca enviam ao servidor.
Posso colar um fluxograma do Mermaid?
Não diretamente; não há importação de Mermaid. Linhas simples como A -> B funcionam, mas há três diferenças. Apague o cabeçalho graph TD, senão ele vira uma caixa, e escreva direction: down no lugar. Tire os rótulos do Mermaid entre colchetes, porque aqui o texto entre [ ] é lido como etiquetas de forma e cor. E --> desenha aqui uma seta tracejada para uma chamada assíncrona, enquanto no Mermaid é uma seta comum; use -> para uma seta contínua.
O que mais posso escrever além de A -> B?
A -> B: texto coloca um rótulo na seta, A --> B desenha uma seta tracejada, A <-> B uma de mão dupla e A <- B aponta para trás. Nome [db, blue] define forma e cor; as formas são service, db, cache, queue, actor, client, storage, external, decision, terminal e note. title: dá nome ao diagrama, direction: down organiza de cima para baixo e uma linha que começa com # ou // é um comentário. Um diagrama comporta até 300 caixas, 600 setas e 20.000 caracteres de texto.