Diagrama de blocos
O diagrama de blocos é composto por blocos e conectores, para representar visualmente sistemas, processos ou arquiteturas complexas. Os blocos representam componentes ou funcionalidades básicas, e os conectores mostram as relações ou o fluxo entre esses componentes; o diagrama de blocos é fundamental em diversas áreas, como engenharia, desenvolvimento de software e gestão de processos.
Copiar
Incorporar
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:#f96,stroke:#333,stroke-width:4px
Usos do diagrama de blocos
O principal objetivo do diagrama de blocos é fornecer uma visão de alto nível do sistema, permitindo que as pessoas o entendam e analisem com facilidade, sem precisar conhecer em profundidade os detalhes complexos de cada componente. Isso torna o diagrama de blocos especialmente útil para simplificar sistemas complexos e explicar a estrutura geral e as interações dos componentes dentro de um sistema.
Cenários de uso
O diagrama de blocos tem ampla aplicação em diversos setores e disciplinas, incluindo principalmente:
- Arquitetura de software: no desenvolvimento de software, o diagrama de blocos pode ser usado para ilustrar a arquitetura de uma aplicação. Isso inclui mostrar como os módulos ou serviços interagem, o fluxo de dados e a interação de componentes de alto nível.
- Topologia de rede: o diagrama de blocos é muito adequado para representar arquiteturas de rede em TI e telecomunicações. Ele pode mostrar como diferentes dispositivos e serviços de rede se conectam entre si, incluindo roteadores, switches, firewalls e o fluxo de dados na rede.
- Fluxo de processo: em negócios e manufatura, o diagrama de blocos pode ser usado para criar fluxogramas. Esses fluxogramas representam as etapas de processos de negócio ou de manufatura, ajudando a visualizar a ordem das etapas, os pontos de decisão e o fluxo de controle.
- Sistema elétrico: engenheiros usam diagramas de blocos para representar sistemas elétricos e circuitos. Eles podem ilustrar a estrutura de alto nível de um sistema elétrico, a interação entre diferentes componentes elétricos e o fluxo de corrente.
- Propósito educacional: o diagrama de blocos também é amplamente usado em materiais educacionais para explicar conceitos e sistemas complexos de forma simplificada. Ele ajuda a decompor e visualizar teorias científicas, princípios de engenharia e sistemas técnicos.
A seguir, vamos nos aprofundar nas formas de criar e manipular diagramas de blocos com o Mermaid, cobrindo tudo, desde a sintaxe básica até configurações e estilos avançados.
Diagrama de blocos simples
Estrutura básica
O diagrama de blocos é composto por blocos que representam diferentes entidades ou componentes; no Mermaid, é fácil criar blocos usando rótulos de texto simples. A forma mais básica de um diagrama de blocos pode ser uma série de blocos sem nenhuma linha de conexão.
Exemplo de diagrama de blocos simples: para criar um diagrama de blocos simples com três blocos rotulados a, b e c, a sintaxe é a seguinte:
Copiar
Incorporar
block-beta
a b c
Este código gerará três blocos dispostos horizontalmente, cada um automaticamente espaçado e alinhado para obter a melhor legibilidade.
Definir o número de colunas a serem usadas
Diagrama de várias colunas
Embora o diagrama de blocos simples seja linear e simples, sistemas mais complexos podem exigir um layout estruturado. O Mermaid permite organizar os blocos em várias colunas, ajudando a criar diagramas mais complexos e detalhados.
Exemplo de diagrama de várias colunas: quando for necessário distribuir os blocos em várias colunas, você pode especificar o número de colunas e organizar os blocos de acordo. A seguir, como criar um diagrama de blocos com três colunas e quatro blocos, em que o quarto bloco aparece na segunda linha:
Copiar
Incorporar
block-beta
columns 3
a b c d
Com esta sintaxe, o Mermaid organiza os blocos a, b, c e d em três colunas e quebra para a linha seguinte conforme necessário. Esse recurso é especialmente útil para representar sistemas hierárquicos ou de várias camadas.
Configuração avançada de blocos
A sintaxe avançada do Mermaid confere maior flexibilidade e complexidade ao design do diagrama, adaptando-se a uma gama mais ampla de casos de uso e cenários.
Ajustar a largura do bloco
Abraçar várias colunas
Em diagramas mais complexos, você pode precisar de blocos que abranjam várias colunas, para enfatizar certos componentes ou representar entidades maiores. O Mermaid permite ajustar a largura do bloco para abranger várias colunas, melhorando a legibilidade e a estrutura do diagrama.
Exemplo: para criar um bloco que abranja duas colunas, você pode especificar a largura desejada para cada bloco:
Copiar
Incorporar
block-beta
columns 3
a["A label"] b:2 c:2 d
Neste exemplo, o bloco rotulado A label ocupa uma coluna, enquanto os blocos b e c abrangem 2 colunas, e d é atribuído à sua própria coluna. Essa flexibilidade no tamanho dos blocos é essencial para representar com precisão sistemas com componentes de diferentes importâncias ou tamanhos.
Criar blocos compostos
Blocos aninhados
Os blocos compostos permitem representar sistemas aninhados ou hierárquicos, em que um componente contém vários subcomponentes.
Exemplo: criar um bloco composto envolve definir um bloco pai e, em seguida, aninhar blocos filhos dentro dele. A seguir, a sintaxe para definir um bloco composto com elementos aninhados:
Copiar
Incorporar
block-beta
block
D
end
A["A: I am a wide one"]
Nesta sintaxe, D é um bloco filho aninhado em um bloco pai maior. Este recurso é especialmente útil para descrever estruturas complexas, como um servidor com vários serviços ou um departamento dentro da estrutura de uma organização maior.
Largura de coluna automática
Ajustar a largura
O Mermaid permite ajustar dinamicamente a largura da coluna de acordo com o conteúdo do bloco. A largura da coluna é determinada pelo bloco mais largo da coluna, garantindo que o diagrama permaneça equilibrado e legível.
Exemplo: em um diagrama com blocos de tamanhos diferentes, o Mermaid ajusta automaticamente a largura das colunas para acomodar o maior bloco de cada coluna.
Copiar
Incorporar
block-beta
columns 3
a:3
block:group1:2
columns 2
h i j k
end
g
block:group2:3
%% columns auto (default)
l m n o p q r
end
Aqui é demonstrado como o Mermaid ajusta dinamicamente a largura das colunas para acomodar o bloco mais largo.
Mesclar blocos horizontalmente: quando for necessário empilhar blocos horizontalmente, isso pode ser feito com a largura da coluna. A seguir, a sintaxe para criar um diagrama de blocos com 4 blocos empilhados juntos:
Copiar
Incorporar
block-beta
block
columns 1
a["A label"] b c d
end
Neste exemplo, a largura dos blocos mesclados é ajustada automaticamente para a largura do maior bloco filho.
Tipos e formas de blocos
O diagrama de blocos do Mermaid não se limita à forma retangular padrão. O Mermaid oferece várias formas de bloco, permitindo uma representação mais detalhada e personalizada de diferentes tipos de informação ou entidades.
Formas de bloco padrão
Retângulo arredondado
Cria um bloco retangular arredondado, que pode ser usado para representar componentes mais suaves ou flexíveis:
Copiar
Incorporar
block-beta
id1("This is the text in the box")
Forma de estádio
O bloco em forma de estádio pode ser usado para representar componentes orientados a processos:
Copiar
Incorporar
block-beta
id1(["This is the text in the box"])
Forma de subprocesso
Usado para representar um subprocesso ou um processo contido, representado por um bloco retangular com linhas verticais duplas:
Copiar
Incorporar
block-beta
id1[["This is the text in the box"]]
Cilindro
O cilindro é ideal para representar bancos de dados ou componentes de armazenamento:
Copiar
Incorporar
block-beta
id1[("Database")]
Círculo
O círculo pode ser usado para representar componentes centralizados ou críticos:
Copiar
Incorporar
block-beta
id1(("This is the text in the circle"))
Forma assimétrica, losango e hexágono
Use losango para decisões e, para processos exclusivos ou especializados, é possível usar a forma assimétrica e o hexágono:
Forma assimétrica
Copiar
Incorporar
block-beta
id1>"This is the text in the box"]
Copiar
Incorporar
block-beta
id1{"This is the text in the box"}
Copiar
Incorporar
block-beta
id1{{"This is the text in the box"}}
Paralelogramo e trapézio
O paralelogramo e o trapézio são ideais para entrada/saída e processos de transição
Copiar
Incorporar
block-beta
id1[/"This is the text in the box"/]
id2["This is the text in the box"]
A[/"Christmas"]
B["Go shopping"/]
Círculo duplo
Para destacar componentes críticos ou de alta prioridade, usar círculos duplos é muito eficaz:
Copiar
Incorporar
block-beta
id1((("This is the text in the circle")))
Blocos de seta e blocos vazios
Bloco de seta
O bloco de seta pode mostrar visualmente a direção ou o fluxo dentro de um processo:
Copiar
Incorporar
block-beta
blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up)
blockArrowId4<["Label"]>(down)
blockArrowId5<["Label"]>(x)
blockArrowId6<["Label"]>(y)
blockArrowId6<["Label"]>(x, down)
Bloco vazio
O bloco vazio pode ser usado para criar espaços em branco, o que é útil para o layout e a legibilidade:
Copiar
Incorporar
block-beta
columns 3
a space b
c d e
Copiar
Incorporar
block-beta
ida space:3 idb idc
Observe que é possível usar o símbolo numérico space:num para definir o número de colunas ocupadas pelo bloco vazio, em que num representa a largura da coluna. Também é possível usar space, cujo padrão é uma coluna.
As formas padrão e especiais do Mermaid ampliam a capacidade de expressão do diagrama de blocos, permitindo representações mais precisas e contextualizadas.
Conectar blocos com linhas
Uma característica fundamental do diagrama de blocos do Mermaid é a capacidade de conectar os blocos usando vários tipos de linhas ou links.
Tipos básicos de conexão e seta
Conectar blocos requer o uso de setas ou linhas; esses conectores descrevem as relações ou o fluxo de informação entre os blocos. O Mermaid oferece uma série de tipos de seta para atender a diferentes necessidades de diagrama.
Link básico
Crie um link simples com uma seta, mostrando a direção ou o fluxo de um bloco para outro:
Copiar
Incorporar
block-beta
A space B
A-->B
Este exemplo ilustra a conexão direta do bloco A para o bloco B.
Texto no link
Além de conectar blocos, geralmente é necessário descrever ou rotular a relação. O Mermaid permite adicionar texto nos links, fornecendo contexto ao link.
Para adicionar texto ao link, a sintaxe é incluir esse texto na definição do link:
Copiar
Incorporar
block-beta
A space:2 B
A-- "X" -->B
Copiar
Incorporar
block-beta
columns 1
db(("DB"))
blockArrowId6<[" "]>(down)
block:ID
A
B["A wide one in the middle"]
C
end
space
D
ID --> D
C --> D
style B fill:pink,stroke:#333,stroke-width:4px
Estilo e personalização
Além da estrutura e do layout do diagrama de blocos, o Mermaid oferece muitas opções de estilo; esses recursos de personalização permitem criar diagramas com mais identidade visual e mais informativos.
Estilo de bloco individual
O Mermaid permite fazer estilos detalhados em blocos individuais; você pode aplicar várias propriedades CSS, como cor, traço e espessura da borda.
Personalizar o estilo de um bloco individual
Para aplicar um estilo personalizado a um bloco, você pode usar a sintaxe style, seguida do identificador do bloco e das propriedades CSS desejadas:
Copiar
Incorporar
block-beta
id1 space id2
id1("Start")-->id2("Stop")
style id1 fill:pink,stroke:#333,stroke-width:4px
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
Estilo de classe
O Mermaid suporta a aplicação de estilos a classes. Se você quiser aplicar um conjunto específico de estilos a vários elementos, é mais fácil usar a definição de estilo, pois basta vincular esses elementos a uma classe.
Definir estilo para uma classe individual
Copiar
Incorporar
block-beta
A space B
A-->B
classDef blue fill:pink,stroke:#333,stroke-width:4px;
class A blue
style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
Aqui, é definida a classe chamada blue e aplicada ao bloco A, enquanto o bloco B recebe um estilo separado.
Casos de uso
Quando os diagramas modulares de diagrama de blocos do Mermaid são aplicados a cenários reais, sua versatilidade fica evidente.
Exemplos detalhados de várias funcionalidades
Por meio de estrutura, links e elementos de estilo, podemos criar diagramas de blocos do Mermaid que desempenham papéis específicos em diferentes contextos.
Arquitetura do sistema
A seguir está uma arquitetura de sistema de software simples com componentes interconectados:
Copiar
Incorporar
block-beta
columns 3
Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down)
Disk left<[" "]>(left) Database[("Database")]
classDef front fill:pink,stroke:#333;
classDef back fill:#f96,stroke:#333;
class Frontend front
class Backend,Database back
Este exemplo mostra uma arquitetura básica com frontend, backend e banco de dados, em que cada bloco tem uma representação diferente para distinguir os tipos de componente.
Processo de negócio
A seguir está um processo de negócio com pontos de decisão e várias etapas:
Copiar
Incorporar
block-beta
columns 3
Start(("Start")) space:2
down<[" "]>(down) space:2
Decision{{"Make Decision"}} right<["Yes"]>(right) Process1["Process A"]
downAgain<["No"]>(down) space r3<["Done"]>(down)
Process2["Process B"] r2<["Done"]>(right) End(("End"))
style Start fill:pink;
style End fill:pink;
Esses casos reais evidenciam o valor prático do diagrama de blocos do Mermaid para simplificar informações complexas e permitir uma comunicação eficaz entre áreas.
Solução de problemas
Criar diagramas de blocos complexos com a sintaxe do Mermaid às vezes apresenta desafios; aqui estão listados erros de sintaxe comuns e dadas dicas para gerenciar estruturas de diagrama mais complexas.
Erros de sintaxe comuns
Evitar erros de sintaxe comuns é fundamental para usar o diagrama de blocos do Mermaid sem problemas.
Erro de link
Usar a sintaxe de link incorreta pode causar resultados inesperados ou um diagrama corrompido:
Copiar
Incorporar
block-beta
A - B
Correção: certifique-se de usar corretamente as setas de conexão (--> ou ---) para conectar os blocos, a fim de definir a direção e o tipo de conexão. Além disso, um dos princípios básicos do diagrama de blocos é dar ao autor controle total sobre a posição dos blocos; portanto, no caso acima, é preciso adicionar espaços entre os blocos:
Copiar
Incorporar
block-beta
A space B
A --> B
Desalinhamento de estilo
Aplicar estilos em um contexto errado ou com sintaxe incorreta pode fazer com que o estilo não seja aplicado conforme esperado:
Copiar
Incorporar
block-beta
A
style A fillpink;
Correção: certifique-se de separar corretamente as propriedades de estilo por vírgula e usar o formato correto das propriedades CSS para corrigir a sintaxe:
Copiar
Incorporar
block-beta
A
style A fill:pink,stroke:#333;
