Um Diagrama de Blocos é um motor de layout estruturado usado para representar arquiteturas de software complexas, plataformas de hardware ou modelos organizacionais. Introduzido nativamente no Mermaid.js, o blocomotor trata a área de layout como uma matriz matemática absoluta em grade. Isso fornece controle preciso sobre alinhamentos de colunas, limites de aninhamento de layout isolados, blocos de espaçamento estrutural e configurações explícitas de ligação de portas de borda.
Compreendendo a Estratégia da Matriz de Grade
Diferentemente dos fluxogramas padrão em forma livre que adivinham dinamicamente os rastros de layout, um diagrama de bloco é construído sobre um sistema rígido de grade linear de coordenadas:
- O Limite de Coluna:Você define um teto horizontal rígido usando o
colunasmodificador. Quando a grade se enche com blocos, os elementos adicionais são automaticamente quebrados para a próxima linha de forma limpa. - Dimensionamento por Campos da Grade:Por padrão, cada bloco ocupa uma única posição de coordenada ($1 times 1$). Você pode alterar esse comportamento atribuindo larguras de coluna explícitas para que os elementos se estendam perfeitamente por múltiplos rastros.
Estrutura Básica da Sintaxe
Todo layout começa com o blococabeçalho de declaração. É seguido pela definição da capacidade de largura de linha com a palavra-chave colunase declarando blocos em linhas sequenciais.
bloco
colunas 3
componentA["Primeiro Bloco"]
componentB["Bloco do Meio"]
componentC["Bloco da Direita"]
Referência de Sintaxe
A tabela abaixo detalha os parâmetros de dados fundamentais, palavras-chave de estilização personalizada e contêineres estruturais reconhecidos nativamente pelo interpretador de blocos.
| Componente de Sintaxe | Requisito de Tipo | Descrição e Regras de Layout Visual |
|---|---|---|
| Declaração | Identificador de Palavra-Chave | Inicializa a área de canvas de grade de blocos matriciais. Deve usar exatamente o bloco stringa de cabeçalho. |
| Conjunto de Colunas | Palavra-chave + Inteiro | Define o número total de slots horizontais antes de quebrar as linhas (por exemplo, colunas 4). |
| Bloco Padrão | ID + Rótulo Opcional | Cria uma caixa de dados padrão: id["Texto do Rótulo"]. Decoradores de forma correspondem à sintaxe de fluxograma (por exemplo, (()) para círculos, [()] para bancos de dados). |
| Substituição de Dimensão do Bloco | Bloco de Parâmetro Dois-Pontos | Substitui a área padrão da grade de escala de layout $1 times 1$ atribuindo explicitamente blocos personalizados de largura de coluna: id:largura. |
| Elemento de Espaçamento | Palavra-chave Reservada | Insere um elemento invisível e estrutural de espaçamento $1 times 1$ na linha ativa usando exatamente a palavra-chave espaço palavra-chave. Você pode multiplicar os espaçamentos de largura inline como espaço:2. |
| Seta do Bloco | ID de Entidade Especializada | Renderiza uma caixa de seta transitória grossa e estruturada dentro de uma célula da grade: arrowId<["Rótulo"]>(direção). As direções incluem cima, baixo, esquerda, direita. |
| Envoltório Composto | Bloco / Container Final | Aninha uma matriz de sub-grade isolada e independente diretamente dentro de uma célula de bloco pai: bloco:SubID ... fim. Os sub-blocos podem declarar seus próprios limites de coluna independentes. |
Recursos Avançados: Dimensões de Bloco Explícitas e Modificadores de Espaço
Para layouts assimétricos, você pode passar métricas explícitas de tamanho horizontal diretamente para blocos padrão ou divisores de espaço usando um separador de notação de dois pontos (:largura). Isso força os elementos a se estenderem sobre múltiplas posições da grade de forma limpa.
bloco
colunas 4
wideComponent["Cabeçalho do Painel Ampliado"]:4
leftBar["Barra Lateral"] espaço:2 rightBar["Painel Principal"]
Recursos Avançados: Tipos de Arestas, Direções e Opções de Ligação
Conexões dentro do blocomotor são divididas em linhas semânticas padrão e setas estruturais de bloco de layout. As linhas de conexão padrão suportam a especificação de restrições direcionais explícitas para determinar como as linhas envolvem os elementos.
1. Conectores de Linha Padrão
As conexões de bloco usam os operadores de ligação padrão (-->, --, <-->). No entanto, você pode controlar o roteamento acrescentando direções ou modificadores dentro de parênteses:
A --> B: Desenha uma linha direcional padrão do elemento A ao elemento B.A -- x B: Desenha um caminho de conexão terminado por uma marca “X”, indicando um caminho bloqueado.A -- o B: Desenha um caminho de conexão terminado com um ponto de conexão em círculo aberto.
2. Setas de Bloco de Layout Dinâmico
As setas de bloco são tratadas como componentes de layout reais que ocupam um bloco de índice de coordenadas real na sua matriz de orçamento de linhas. Elas usam propriedades de sintaxe maior que e menor que para mapear caminhos físicos de fluxo:
bloco
colunas 3
produtor["Produtor de Dados"]
setaMeio<["Transformar Tráfego"]>(direita)
consumidor["Consumidor de Dados"]
Recursos Avançados: Aninhamento de Matriz de Sub-Bloco (Agrupamento Composto)
O bloco:idenvoltório funciona como um ambiente de contexto de caixa de layout isolado. Um contêiner de grupo de aplicativo pode estabelecer sua própria contagem única de colunas horizontais dentro de um sub-bloco, permitindo que componentes complexos se agrupem firmemente sem influenciar o espaçamento da grade da matriz de modelo de canvas pai global.
bloco
colunas 2
gatewayRaiz["Gateway Global"]
bloco:clusterMicroservicos
colunas 3
auth["Nó de Autenticação"]
api["API Principal"]
worker["Motor de Trabalho"]
fim
Plano Real: Infraestrutura de Várias Camadas com Cache
Este plano abrangente, de múltiplas linhas, demonstra uma configuração limpa de infraestrutura de nível de produção. Estabelece um layout de grade de processamento com 3 colunas, usa elementos estruturais espaço elementos para isolar uma camada de banco de dados, mapeia uma descida grossa setaBloco, e isola um contêiner interno separado de sub-sistema usando um aninhado bloco:id ... fim envoltório composto.
bloco
colunas 3
%% Linha 1: Serviços de Entrada
dnsClient(("Cliente Web"))
loadBalancer["Balanceador de Carga de Borda"]
espaço
%% Linha 2: Fluxo de Conexão descendo até Microserviços
espaço
downRoute<["Encaminhar Tráfego"]>(para baixo)
espaço
%% Linha 3: Cluster do Ambiente de Aplicação Composta
bloco:appCluster
colunas 2
authService["Autenticação"]
apiEngine["Trabalhador da API Principal"]
fim
espaço
database[("Banco de Dados PostgreSQL")]
%% Estabelecer alinhamentos estruturais claros entre matrizes
loadBalancer --> appCluster
appCluster --> database
Armadilhas Comuns de Sintaxe e Restrições do Sistema
Ao compilar mapas precisos de matriz de grade, tenha em mente estas verificações de validação para evitar falhas na análise:
- Aplicação do Orçamento de Colunas: Mantenha um controle cuidadoso do número de colunas. Se você especificar
colunas 3e escrever 4 blocos sequenciais em uma linha, o quarto bloco cairá automaticamente para a linha 2, o que pode interromper os caminhos de conexão esquerda para direita planejados. - Ordem de Aninhamento Composto: Ao construir contêineres internos com
bloco:id, você deve sempre selar o espaço de trabalho da sub-grade usando afimpalavra-chave em uma linha isolada antes de declarar elementos subsequentes. Falhar em fechar o bloco interromperá a construção do diagrama. - Limitações do Alvo da Setas de Bloco: A propriedade de direção contida entre parênteses após uma seta de bloco (por exemplo,
(para cima),(para baixo)) deve ser um literal em minúsculas que corresponda perfeitamente às palavras-chave do sistema. Capitalizar a direção causará erros de processamento. - Colisões de Limites de Rótulo: Decoradores de forma de fluxograma padrão (como parênteses
()para caixas redondas ou chaves{}para diamantes) são totalmente suportados. Certifique-se de que todas as etiquetas de texto exibidas dentro das formas usem aspas duplas limpas para evitar a remoção de caracteres.