Diagrama de bloques
El diagrama de bloques se compone de bloques y conectores, para representar visualmente sistemas, procesos o arquitecturas complejos. Los bloques representan componentes o funciones básicos y los conectores muestran las relaciones o el flujo entre estos componentes; el diagrama de bloques es esencial en diversos campos como la ingeniería, el desarrollo de software y la gestión de procesos.
Copiar
Insertar
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 del diagrama de bloques
El objetivo principal del diagrama de bloques es ofrecer una vista de alto nivel del sistema, para que las personas puedan entenderlo y analizarlo con facilidad sin necesidad de conocer en profundidad los detalles complejos de cada componente. Esto hace que el diagrama de bloques resulte especialmente útil para simplificar sistemas complejos y para explicar la estructura general y las interacciones de los componentes dentro de un sistema.
Escenarios de uso
El diagrama de bloques tiene una amplia aplicación en diversos sectores y disciplinas, entre las que destacan:
- Arquitectura de software: en el desarrollo de software, el diagrama de bloques puede usarse para ilustrar la arquitectura de una aplicación de software. Esto incluye mostrar cómo interactúan los distintos módulos o servicios, el flujo de datos y la interacción de los componentes de alto nivel.
- Topología de red: el diagrama de bloques es ideal para representar la arquitectura de red en TI y telecomunicaciones. Puede mostrar cómo se conectan entre sí distintos dispositivos y servicios de red, incluidos routers, switches, cortafuegos y el flujo de datos por la red.
- Diagrama de flujo de proceso: en el ámbito comercial y de fabricación, el diagrama de bloques puede usarse para crear diagramas de flujo. Estos diagramas de flujo representan las distintas fases de un proceso comercial o de fabricación y ayudan a visualizar la secuencia de pasos, los puntos de decisión y el flujo de control.
- Sistemas eléctricos: los ingenieros usan el diagrama de bloques para representar sistemas eléctricos y circuitos. Puede ilustrar la estructura de alto nivel de un sistema eléctrico, la interacción entre distintos componentes eléctricos y el flujo de corriente.
- Fines educativos: el diagrama de bloques también se usa ampliamente en materiales educativos para explicar de forma simplificada conceptos y sistemas complejos. El diagrama de bloques ayuda a descomponer y visualizar teorías científicas, principios de ingeniería y sistemas técnicos.
A continuación, profundizaremos en cómo crear y manejar diagramas de bloques con Mermaid, abarcando desde la sintaxis básica hasta la configuración avanzada y los estilos.
Diagrama de bloques simple
Estructura básica
El diagrama de bloques se compone de bloques que representan distintas entidades o componentes; en Mermaid puedes crear bloques fácilmente con etiquetas de texto simples. La forma más básica de un diagrama de bloques puede ser una serie de bloques sin ninguna línea de conexión.
Ejemplo de diagrama de bloques simple: para crear un diagrama de bloques sencillo con tres bloques etiquetados como a, b y c, la sintaxis es la siguiente:
Copiar
Insertar
block-beta
a b c
Este código generará tres bloques dispuestos horizontalmente, y cada bloque se espaciará y alineará automáticamente para lograr la mejor legibilidad.
Definir el número de columnas que se van a usar
Gráfico de varias columnas
Aunque el diagrama de bloques simple es lineal y sencillo, los sistemas más complejos pueden necesitar un diseño estructurado. Mermaid permite organizar los bloques en varias columnas, lo que ayuda a crear gráficos más complejos y detallados.
Ejemplo de gráfico de varias columnas: cuando necesitas distribuir los bloques en varias columnas, puedes especificar el número de columnas y ordenar los bloques en consecuencia. Así se crea un diagrama de bloques con tres columnas y cuatro bloques, donde el cuarto bloque aparece en la segunda fila:
Copiar
Insertar
block-beta
columns 3
a b c d
Con esta sintaxis, Mermaid ordena los bloques a, b, c y d en tres columnas y salta a la línea siguiente según sea necesario. Esta función resulta especialmente útil para representar sistemas jerárquicos o de varios niveles.
Configuración avanzada de bloques
La sintaxis avanzada de Mermaid aporta mayor flexibilidad y complejidad al diseño de gráficos, y se adapta a una gama más amplia de casos de uso y escenarios.
Ajustar el ancho del bloque
Abarcar varias columnas
En gráficos más complejos, puede que necesites bloques que abarquen varias columnas para destacar ciertos componentes o representar entidades más grandes. Mermaid permite ajustar el ancho de los bloques para que abarquen varias columnas, lo que mejora la legibilidad y la estructura del gráfico.
Ejemplo: para crear un bloque que abarque dos columnas, puedes especificar el ancho deseado para cada bloque:
Copiar
Insertar
block-beta
columns 3
a["A label"] b:2 c:2 d
En este ejemplo, el bloque etiquetado como A label ocupa una columna, mientras que los bloques b y c abarcan 2 columnas y d se asigna a su propia columna. Esta flexibilidad en el tamaño de los bloques es esencial para representar con precisión sistemas con componentes de distinta importancia o tamaño.
Crear bloques compuestos
Bloques anidados
Los bloques compuestos permiten representar sistemas anidados o jerárquicos, en los que un componente contiene varios subcomponentes.
Ejemplo: crear un bloque compuesto implica definir un bloque padre y luego anidar bloques hijos dentro de él. Así se define la sintaxis de un bloque compuesto con elementos anidados:
Copiar
Insertar
block-beta
block
D
end
A["A: I am a wide one"]
En esta sintaxis, D es un bloque hijo anidado en un bloque padre más grande. Esta función resulta especialmente útil para describir estructuras complejas, como un servidor con varios servicios o un departamento dentro del marco de una organización mayor.
Ancho de columna automático
Ajustar el ancho
Mermaid permite ajustar el ancho de columna de forma dinámica según el contenido del bloque. El ancho de la columna lo determina el bloque más ancho de la columna, lo que garantiza que el gráfico se mantenga equilibrado y legible.
Ejemplo: en un gráfico con bloques de distintos tamaños, Mermaid ajusta automáticamente el ancho de columna para adaptarse al bloque más grande de cada columna.
Copiar
Insertar
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
Aquí se muestra cómo Mermaid ajusta dinámicamente el ancho de las columnas para adaptarse al bloque más ancho.
Fusionar bloques horizontalmente: cuando necesitas apilar bloques horizontalmente, puedes hacerlo con el ancho de columna. Esta es la sintaxis del diagrama de bloques para crear 4 bloques apilados juntos:
Copiar
Insertar
block-beta
block
columns 1
a["A label"] b c d
end
En este ejemplo, el ancho del bloque fusionado se ajusta automáticamente al ancho del subbloque más grande.
Tipos y formas de bloques
El diagrama de bloques de Mermaid no se limita a la forma rectangular estándar. Mermaid ofrece varias formas de bloque, lo que permite representar de forma más detallada y personalizada distintos tipos de información o entidades.
Formas de bloque estándar
Rectángulo redondeado
Crea un bloque rectangular redondeado, útil para representar componentes más flexibles:
Copiar
Insertar
block-beta
id1("This is the text in the box")
Forma de estadio
Un bloque con forma de estadio puede usarse para representar componentes orientados a procesos:
Copiar
Insertar
block-beta
id1(["This is the text in the box"])
Forma de subgrafo
Se usa para representar un subgrafo o un proceso contenido, y se representa con un bloque rectangular con doble línea vertical:
Copiar
Insertar
block-beta
id1[["This is the text in the box"]]
Forma cilíndrica
La forma cilíndrica es ideal para representar bases de datos o componentes de almacenamiento:
Copiar
Insertar
block-beta
id1[("Database")]
Círculo
El círculo puede usarse para representar componentes centrales o críticos:
Copiar
Insertar
block-beta
id1(("This is the text in the circle"))
Forma asimétrica, rombo y hexágono
Usa el rombo para decisiones y, para procesos únicos o especializados, puedes usar la forma asimétrica y el hexágono:
Forma asimétrica
Copiar
Insertar
block-beta
id1>"This is the text in the box"]
Copiar
Insertar
block-beta
id1{"This is the text in the box"}
Copiar
Insertar
block-beta
id1{{"This is the text in the box"}}
Paralelogramo y trapecio
El paralelogramo y el trapecio son ideales para la entrada/salida y los procesos de transición
Copiar
Insertar
block-beta
id1[/"This is the text in the box"/]
id2["This is the text in the box"]
A[/"Christmas"]
B["Go shopping"/]
Doble círculo
Para resaltar componentes críticos o de alta prioridad, usar un doble círculo resulta muy eficaz:
Copiar
Insertar
block-beta
id1((("This is the text in the circle")))
Bloques de flecha y bloques vacíos
Bloque de flecha
El bloque de flecha puede mostrar de forma visual la dirección o el flujo dentro de un proceso:
Copiar
Insertar
block-beta
blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up)
blockArrowId4<["Label"]>(down)
blockArrowId5<["Label"]>(x)
blockArrowId6<["Label"]>(y)
blockArrowId6<["Label"]>(x, down)
Bloque vacío
El bloque vacío puede usarse para crear espacios en blanco, lo que resulta útil para el diseño y la legibilidad:
Copiar
Insertar
block-beta
columns 3
a space b
c d e
Copiar
Insertar
block-beta
ida space:3 idb idc
Ten en cuenta que puedes usar el símbolo numérico space:num para establecer el número de columnas que ocupa un bloque vacío, donde num indica el ancho de columna. También puedes usar space, cuyo valor predeterminado es una columna.
Las formas estándar y especiales de Mermaid mejoran la capacidad de expresión del diagrama de bloques, permitiendo representaciones más precisas y con más contexto.
Conectar bloques con líneas
Una característica clave del diagrama de bloques de Mermaid es la capacidad de conectar los distintos bloques con varios tipos de líneas o enlaces.
Conexiones básicas y tipos de flecha
Para conectar bloques hay que usar flechas o líneas; estos conectores describen las relaciones o el flujo de información entre los bloques. Mermaid ofrece una serie de tipos de flecha para satisfacer distintas necesidades de los gráficos.
Enlaces básicos
Crea un enlace simple con una flecha, que muestra la dirección o el flujo de un bloque a otro:
Copiar
Insertar
block-beta
A space B
A-->B
Este ejemplo muestra una conexión directa del bloque A al bloque B.
Texto en el enlace
Además de conectar bloques, normalmente también hay que describir o etiquetar la relación. Mermaid permite añadir texto en el enlace, lo que aporta contexto al enlace.
Para añadir texto al enlace, la sintaxis consiste en incluir ese texto en la definición del enlace:
Copiar
Insertar
block-beta
A space:2 B
A-- "X" -->B
Copiar
Insertar
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 y personalización
Además de la estructura y el diseño del diagrama de bloques, Mermaid ofrece numerosas opciones de estilo; estas funciones de personalización permiten crear gráficos con más carácter visual y más informativos.
Estilo de un bloque individual
Mermaid permite aplicar un estilo detallado a cada bloque; puedes aplicar diversas propiedades CSS, como color, trazo y grosor del borde.
Personalizar el estilo de un bloque individual
Para aplicar un estilo personalizado a un bloque, puedes usar la sintaxis style, seguida del identificador del bloque y las propiedades CSS deseadas:
Copiar
Insertar
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 clase
Mermaid admite aplicar estilos a clases. Si quieres aplicar un conjunto concreto de estilos a varios elementos, es más fácil usar la configuración de estilo, porque solo tienes que vincular esos elementos a una clase.
Establecer el estilo de una sola clase
Copiar
Insertar
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
Aquí se define una clase llamada blue y se aplica al bloque A, mientras que el bloque B recibe un estilo independiente.
Casos de uso
Cuando los gráficos modulares del diagrama de bloques de Mermaid se aplican a escenarios reales, su versatilidad se pone plenamente de manifiesto.
Ejemplos detallados de diversas funciones
Mediante elementos de estructura, enlaces y estilo, podemos crear diagramas de bloques de Mermaid que desempeñan una función concreta en distintos contextos.
Arquitectura del sistema
A continuación se muestra una arquitectura sencilla de sistema de software con componentes interconectados:
Copiar
Insertar
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 ejemplo muestra una arquitectura básica con frontend, backend y base de datos, en la que cada bloque tiene una apariencia distinta para diferenciar los tipos de componente.
Proceso de negocio
A continuación se muestra un proceso de negocio con puntos de decisión y varias fases:
Copiar
Insertar
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;
Estos casos reales ponen de relieve el valor práctico del diagrama de bloques de Mermaid para simplificar información compleja y lograr una comunicación eficaz entre distintos ámbitos.
Solución de problemas
Crear diagramas de bloques complejos con la sintaxis de Mermaid a veces plantea dificultades; aquí se enumeran errores de sintaxis comunes y se ofrecen consejos para gestionar estructuras de gráficos más complejas.
Errores de sintaxis comunes
Evitar los errores de sintaxis comunes es clave para usar sin problemas el diagrama de bloques de Mermaid.
Error de enlace
Usar una sintaxis de enlace incorrecta puede provocar resultados inesperados o gráficos dañados:
Copiar
Insertar
block-beta
A - B
Corrección: asegúrate de usar correctamente las flechas (--> o ---) para conectar los bloques y definir la dirección y el tipo de conexión. Además, uno de los principios básicos del diagrama de bloques es que el autor controle por completo la posición de los bloques, por lo que en el caso anterior hay que añadir espacios entre los bloques:
Copiar
Insertar
block-beta
A space B
A --> B
Alineación incorrecta del estilo
Aplicar un estilo en un contexto equivocado o con una sintaxis incorrecta puede provocar que el estilo no se aplique como se espera:
Copiar
Insertar
block-beta
A
style A fillpink;
Corrección: asegúrate de separar correctamente las propiedades de estilo con comas y usa el formato correcto de propiedad CSS para corregir la sintaxis:
Copiar
Insertar
block-beta
A
style A fill:pink,stroke:#333;
