# Criador de diagramas de sistemas

URL: https://discuvr.org/system-diagram/?hl=pt
Last updated: 2026-11-08
MCP tool: `draw_system_diagram`

Desenhe diagramas de arquitetura e de fluxo digitando A -> B. Layout automático, grupos recolhíveis, passos numerados, exportação PNG e SVG.

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

1. Digite linhas como User -> Web App -> Orders DB ou comece por um modelo.
2. Adicione grupos com Nome { ... }, rótulos após dois-pontos e --> para chamadas assíncronas.
3. Alterne 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.

**O que acontece com as setas quando recolho um grupo?**

As setas entre caixas dentro do grupo recolhido ficam ocultas, e as que cruzam a borda dele passam a começar ou terminar na caixa do grupo. Várias setas entre as mesmas duas caixas se fundem em uma seta mais grossa que mantém o primeiro rótulo e acrescenta uma contagem. Exemplo: com Payments API e Ledger dentro de Payments { ... }, as linhas Checkout -> Payments API e Checkout -> Ledger viram uma única seta Checkout -> Payments x2 na Visão geral. Um grupo dentro de um grupo recolhido é recolhido junto e, com Passos ativado, os números seguem as setas ainda visíveis, na ordem em que foram escritas.

## Mais em Ferramentas para desenvolvedores

- [Formatador JSON](https://discuvr.org/json-formatter/?hl=pt)
- [Formatador Python](https://discuvr.org/python-formatter/?hl=pt)
- [Visualizador de HTML](https://discuvr.org/html-viewer/?hl=pt)
- [Calculadora de Sub-rede IP](https://discuvr.org/ip-subnet-calculator/?hl=pt)

## Usado frequentemente com

- [Comparar textos](https://discuvr.org/text-diff/?hl=pt)

---

Part of Discuvr (https://discuvr.org/): Discuvr is a collection of free, focused tools for day-to-day professional work - office and data utilities, legal and compliance helpers, privacy and security checks, and developer formatters. Every tool has its own page, and most can also be called from ChatGPT or Claude over MCP.