Diagramas que você desenha, escreve e ensina.
Monte caixas e setas com o mouse, escreva em Mermaid com cores que mostram a estrutura do código ou apresente uma aula começando pela raiz no topo e descendo pelos ramos.
- Funciona no navegador, sem conta
- Rascunhos salvos neste computador
- Exporta SVG, PNG e Markdown para GitHub
pedidos.mmd
flowchart LR
U([Usuário]) -->|HTTPS| G[Gateway]
G --> S[[Serviço de pedidos]]
S -.-> C[(Cache)]
S ==> D[(Banco de dados)]
Setas
Colchetes
( ) 1º nível[ ] 2º nível{ } 3º nívelPasse o mouse sobre uma linha do código, uma seta ou uma caixa para ver a ligação entre o texto e o desenho.
Comece pelo jeito mais fácil para o que você quer fazer.
São três espaços no mesmo estúdio. Você pode trocar de um para outro a qualquer momento, e o quadro vira código Mermaid com um clique.
Arraste, ligue e pronto.
Adicione caixas, decisões e bancos de dados, arraste cada uma para o lugar certo e ligue com setas. Dois cliques editam o texto e Ctrl+Z desfaz.
- Seis formas e sete cores para destacar o que importa
- Setas com texto e com o sentido que você escolher
- Exporta o desenho em SVG ou PNG
Comece de um modelo pronto.
Escolha um tipo de diagrama e o estúdio abre um quadro já montado para você editar. Na Aula, você também pode começar por uma raiz no topo, criar ramificações ou contar a história no sentido inverso. Se preferir, comece em branco.
- Diagrama de classesClasses, atributos, métodos, herança e associações.
- Diagrama de sequênciaMensagens e ordem temporal entre participantes.
- Casos de usoAtores, objetivos e limites do sistema.
- Máquina de estadosEstados, eventos, guardas e transições.
- Diagrama de atividadesAções, decisões, paralelismo e fluxos.
- Diagrama de componentesComponentes, interfaces e dependências.
- Diagrama de implantaçãoNós físicos, artefatos e ambientes.
- Diagrama de objetosInstâncias e valores em um instante.
- Diagrama de pacotesOrganização lógica e dependências.
- Diagrama de comunicaçãoColaborações e mensagens entre objetos.
- Diagrama de temporizaçãoMudanças de estado ao longo do tempo.
- Visão geral de interaçãoFluxo entre interações relacionadas.
- Diagrama de requisitosRequisitos, satisfação, verificação e rastreabilidade.
- Diagrama de blocos (BDD)Estrutura de sistemas e relações entre blocos.
- Blocos internos (IBD)Partes, portas, conectores e fluxos internos.
- Diagrama paramétricoRestrições e relações quantitativas.
- FluxogramaEtapas, decisões, entradas e saídas.
- BPMN 2.0Eventos, tarefas, gateways, pools e lanes.
- Diagrama de fluxo de dados (DFD)Processos, entidades, depósitos e fluxos de dados.
- Mapa de processoEtapas operacionais e responsáveis.
- SIPOCFornecedores, entradas, processo, saídas e clientes.
- Árvore de decisãoAlternativas, condições e resultados possíveis.
- C4: ContextoSistema, usuários e sistemas externos.
- C4: ContainersAplicações, serviços, armazenamentos e comunicação.
- C4: ComponentesResponsabilidades dentro de um container.
- Arquitetura em camadasApresentação, aplicação, domínio e infraestrutura.
- MicrosserviçosServiços independentes, APIs e eventos.
- Arquitetura hexagonalDomínio, portas e adaptadores.
- Event-drivenProdutores, eventos, brokers e consumidores.
- Clean ArchitectureCasos de uso e limites de dependência.
- Entidade-relacionamento (ERD)Entidades, atributos, chaves e cardinalidade.
- Modelo relacionalTabelas, chaves primárias e estrangeiras.
- Esquema de banco de dadosEstruturas, relações e restrições.
- Data warehouseFatos, dimensões e modelos analíticos.
- Pipeline de dadosIngestão, transformação, armazenamento e consumo.
- Árvore JSONObjetos, arrays e hierarquia de dados.
- Diagrama de redeSub-redes, roteadores, firewalls e endpoints.
- Arquitetura cloudRegiões, zonas, serviços e conectividade.
- KubernetesClusters, namespaces, deployments e services.
- Docker / containersImagens, containers, volumes e redes.
- CI/CDBuild, testes, publicação e implantação.
- Topologia de ambienteDev, staging, produção e dependências.
- Modelo de ameaçasAtivos, limites de confiança, ameaças e mitigação.
- Fluxo de autenticaçãoLogin, tokens, autorização e renovação.
- Zero TrustIdentidades, políticas e pontos de verificação.
- Pirâmide de testesUnitários, integração, contrato e ponta a ponta.
- Plano de testesCenários, dados, execução e critérios de aceite.
- Máquina de estados de testeEstados e transições de execução.
- Jornada do usuárioEtapas, pontos de contato, emoções e oportunidades.
- Fluxo de usuárioCaminhos e decisões da experiência.
- WireframeEstrutura de tela e hierarquia dos elementos.
- RoadmapObjetivos, iniciativas e marcos no tempo.
- KanbanFila, trabalho em andamento e concluídos.
- OrganogramaPapéis, times e linhas de reporte.
- RACIResponsável, aprovador, consultado e informado.
- GanttAtividades, duração, marcos e dependências.
- Matriz de riscosProbabilidade, impacto e mitigação.
- Mapa mentalConceito central e ramificações.
- IshikawaCausas e categorias de um problema.
- SWOTForças, fraquezas, oportunidades e ameaças.
- VennInterseções e diferenças entre conjuntos.
- Matriz 2×2Comparação de opções por dois eixos.
- Pirâmide de conceitosNíveis de abstração e dependência.
Mais 46 padrões de projeto (GoF, arquitetura e sistemas distribuídos) que abrem como diagrama ou como aula.
Abra o estúdio. Já tem um exemplo esperando.
Edite o exemplo, apague tudo ou comece de um modelo da biblioteca.