Diagramas e Fluxogramas

Os diagramas são ferramentas poderosas que podem ajudar as equipes a mapear sistemas complexos, ilustrar hierarquias complicadas, organizar ideias, estruturar sites, planejar implementações e projetar fluxos de usuário.

Eles são essenciais para o sucesso de qualquer projeto – e uma parte fundamental do ritmo e fluxo de um projeto em cada etapa do desenvolvimento e implementação. E, à medida que os projetos evoluem, as equipes precisam de diagramas e fluxogramas atualizados imediatamente disponíveis – para referência, orientação e documentação.

Na Biblioteca de Stencils, você encontrará uma ampla gama de stencils de diagrama de Fluxograma, UML, Caso de Uso e Modelo ERD, todos projetados para se conectar rapidamente aos nossos Conectores inteligentes.

Neste artigo, explicaremos cada uma das nossas categorias de stencils de Diagrama. Também mostraremos como adicionar stencils de diagrama à página e como anexar, formatar e rotular seus Conectores.

Por fim, você aprenderá algumas dicas e truques, como trocar um stencil de diagrama por outro, ou expandir fluxos com um simples clique nas setas Extensor.

Categorias de stencils de diagrama

Na Biblioteca de Stencils, você encontrará quatro categorias de stencils de diagrama. Com eles, sua equipe pode criar e improvisar qualquer tipo de diagrama:

Diagramas de Fluxo

Os fluxogramas são os stencils de diagrama mais flexíveis e adaptáveis. Eles são normalmente usados para brainstorming e ideação, arquitetura de informação, gerenciamento de dados, modelagem de processos de negócios, análise estrutural, engenharia de processos e muito mais.

UML

Os diagramas UML utilizam a Linguagem de Modelagem Unificada para ajudar as equipes a entender a estrutura e o comportamento de soluções de software. Eles visualizam os componentes e interações de um sistema documentando seus objetos, atores, atributos, operações e relacionamentos.

Caso de Uso

Os diagramas de Caso de Uso modelam o conjunto de ações, serviços e funções que um sistema precisa realizar. Ao ilustrar os casos de uso, atores e objetivos específicos de um cenário, esses diagramas comportamentais ajudam as equipes a entender os requisitos funcionais e o escopo de um sistema.

Modelo ERD

Um Diagrama de Entidade-Relacionamento representa a estrutura de um banco de dados mostrando como as entidades nele – pessoas, funções, objetos, produtos ou conceitos – se relacionam entre si. O diagrama representa as entidades, atributos e relacionamentos interconectados dentro do escopo desse sistema.

Para ver exemplos de todos esses tipos de diagramas, confira nossa coleção gratuita e selecionada de Templates de Diagramas e Fluxogramas. Use esses exemplos para dar impulso ao seu projeto, entender as melhores práticas ou apenas para experimentar.

Adicionar, estilizar e nomear stencils de diagrama

Assim como todos os stencils do Moqups, você pode adicionar stencils de diagrama à página, como objetos, por um único clique ou arrastar e soltar. E, como com outros tipos de objetos, você pode estilizá-los usando o Painel de Formato.

Quando você digita texto em qualquer stencil de diagrama, esses stencils adotam automaticamente o texto como nome. Isso facilita a identificação de elementos de diagrama específicos no Painel de Camadas, especialmente em fluxos e diagramas de processo complexos.

Anexar conectores no modo diagrama

Nossos Conectores inteligentes podem ser usados para conectar qualquer objeto, stencil ou imagem do Moqups – não apenas nossos stencils de diagrama dedicados!

Para conectar quaisquer dois objetos na página:

1. Entre no Modo Diagrama clicando no botão Diagrama na barra de ferramentas superior ou pressione D.
2. Você verá imediatamente grupos de pontos azul-claros (pontos de conexão) aparecerem ao redor das bordas dos objetos na página.
3. Clique em um desses pontos e arraste o cursor em direção ao segundo objeto.
4. À medida que o conector se aproxima do segundo objeto, ele irá encaixar e "grudar" – mostrando que está anexado. Você pode conectar a um dos pontos de conexão ou a qualquer outro lugar na borda do objeto. Os conectores permanecem anexados, mesmo quando você move, redimensiona ou gira objetos.
5. Para sair do Modo Diagrama, basta clicar em qualquer lugar em uma superfície vazia na página, ou pressionar D ou Esc.

Formatar conectores

Os Conectores podem ser usados para conectar qualquer objeto do Moqups, mas são projetados para funcionar – e ser estilizados – em combinação com nossos stencils de diagrama. Novos conectores herdam o estilo do último conector usado nessa página.

Você pode formatar conectores no Modo de Edição, individualmente ou como uma seleção. Clicar em qualquer conector abrirá a seção Estilo do Conector do Painel de Formato.

Quando você seleciona um único conector, o nome desse conector é exibido no topo do painel. Isso facilita localizar e identificar esse conector no Painel de Camadas.

Quando você seleciona múltiplos conectores, o painel exibe o número de conectores nesse grupo, para ajudá-lo a confirmar sua seleção antes de aplicar quaisquer alterações de estilo ou transformações.

Você pode definir a cor, largura, estilo de traço do conector e escolher entre uma gama de estilos de linha (ortogonal, ortogonal arredondado, curvo ou reto). Você também pode escolher entre uma gama de marcadores de início e fim, ajustar a opacidade do conector e adicionar Sombra Projetada e Desfoque.

A menos que você faça uma alteração, todos os conectores que você desenhar daqui para frente adotarão essas configurações de estilo.

Rotular conectores

Um componente essencial para diagramação é a capacidade de adicionar rótulos diretamente às linhas de conector. Isso é especialmente importante para diagramas de fluxo de trabalho, onde pode ser necessário indicar decisões de Sim ou Não. Os rótulos também são úteis para delinear linhas de conector em diagramas complexos, facilitando a identificação e navegação.

Para adicionar um ou mais rótulos a qualquer conector, basta dar um duplo clique na linha do conector. E, uma vez que você adicione um rótulo ao conector, ele permanecerá automaticamente anexado a essa linha – e se ajustará de forma inteligente à medida que você modifica e atualiza seu diagrama.

E você pode reutilizar rapidamente seus rótulos clonando-os. Copie e cole, ou apenas arraste um rótulo enquanto segura a tecla Alt/Option – exatamente como faria com qualquer outro objeto do Moqups.

Também projetamos um ótimo recurso para acelerar seu fluxo de trabalho: A capacidade de desanexar e reconectar rótulos. Basta clicar e puxar qualquer rótulo de uma linha; o rótulo se desanexará automaticamente e, enquanto você o arrasta em direção a uma linha diferente, ele se encaixará de forma inteligente e fluida no lugar.

Extensores de diagrama

Os Extensores de Diagrama tornam a expansão dos seus fluxos tão simples quanto um atalho de teclado, e funcionam em todos os stencils de diagrama.

Selecionar qualquer stencil de diagrama na página revelará setas em todos os quatro lados desses objetos. Clicar em qualquer seta duplicará esse objeto, os conectará automaticamente e, em seguida, abrirá o modo de edição de texto do novo objeto para renomeação rápida.

Quando há um stencil de diagrama desbloqueado imediatamente adjacente ao que você está 'estendendo', clicar nos extensores conectará automaticamente esses dois objetos. Caso contrário, o extensor criará um novo objeto de diagrama.

Containers fixos

Dentro da categoria Diagramas de Fluxo, o stencil Container é usado para criar diagramas de processo e swimlane, e para agrupar objetos em diagramas de rede.

Por causa de seus casos de uso específicos, o container tem alguns recursos de formatação únicos: fixidez e orientação.

Fixidez do Container

O stencil de container é fixo por padrão – de três maneiras diferentes! Você pode…

1. Usar o container para capturar objetos já na página
2. Adicionar objetos ao container da biblioteca de stencils ou da página
3. Usar o efeito magnético para conectar múltiplos containers

Uma vez que os objetos são capturados ou adicionados a um container, eles se movem com esse container. Isso facilita agrupar e organizar o conteúdo do seu diagrama.

Você pode ativar e desativar a fixidez de um container na seção Comportamento Fixo do Painel de Formato.

Orientação do Container

Quando você adiciona um container à página, pode escolher sua orientação – vertical ou horizontal – na seção Orientação do Container do Painel de Formato.

Você pode usar containers para agrupar e organizar qualquer tipo de objeto, e por qualquer motivo – na verdade, incentivamos você a improvisar – mas existem três casos de uso principais que vale a pena mencionar aqui:

Diagramas de Processo

Use containers para criar swimlanes e pools para todos os tipos de diagramas de processo – delineando áreas de responsabilidade e esclarecendo quem faz o quê.

Diagramas de Rede

Os containers permitem que sua equipe identifique, agrupe e rotule componentes relacionados ao mapear qualquer tipo de rede complexa.

Quadros Kanban

Os containers são ótimos para construir quadros Kanban que ajudam equipes ágeis a visualizar, gerenciar, analisar e otimizar seu fluxo de trabalho.

Substituir stencils de diagrama

Você pode atualizar e substituir rapidamente stencils de diagrama que já fazem parte de um diagrama na página. Para trocar um stencil, basta arrastar o novo stencil sobre um existente e soltar quando o símbolo 'substituir' aparecer.

A substituição funciona em todos os stencils de Diagrama de Fluxo e em stencils de Caso de Uso selecionados quando apropriado.

Colar listas e dados CSV em formato de diagrama

Nosso recurso Colar no Formato facilita transformar suas listas e dados em fluxogramas instantaneamente preenchidos:

1. Copie uma lista ou CSV do seu computador
2. Use Ctrl/Cmd + V para colar esses dados na sua página do Moqups
3. Clique no botão Fluxograma no modal Escolher um formato