Sintaxis y guía de diseño de diagramas de arquitectura de Mermaid.js

Un diagrama de arquitectura proporciona un plano estructurado utilizado por arquitectos de sistemas y equipos DevOps para visualizar configuraciones de infraestructura, microservicios en la nube y configuraciones de disposición estructural. Construido sobre el arquitectura-betamotor, esta herramienta basada en texto reemplaza las utilidades de arrastre manual al organizar automáticamente grupos de servicios estructurales, clústeres de bases de datos, pasarelas y rutas de borde en disposiciones de sistema limpias y predecibles.

Estructura básica de sintaxis

Cada diagrama comienza con el arquitectura-betaencabezado de declaración. Poblás el lienzo definiendo elementos individuales de nodo utilizando la serviciopalabra clave, y mapeas rutas de conexión especificando puertos de coordenadas direccionales exactas (Tsuperior, Binferior, Lizquierdo, Rderecho) separados por dos puntos y dobles guiones.

arquitectura-beta
  servicio pasarela(internet)[Etiqueta de pasarela]
  servicio servidor(servidor)[Servidor de aplicación]
  
  pasarela:B -- T:servidor

Referencia de sintaxis

La tabla a continuación desglosa los componentes de datos principales, palabras clave de formato y atributos de conectores utilizados para construir un mapa de espacio de trabajo de arquitectura en Mermaid.js.

Componente de sintaxis Requisito de tipo Descripción y reglas de uso
Declaración Identificador de palabra clave Inicializa el lienzo del espacio de trabajo de mapeo de infraestructura. Debe usar exactamente el arquitectura-beta bloque.
Nodo de servicio Palabra clave + Bloque de identidad Declara una entidad arquitectónica. Utiliza la sintaxis: servicio id(icon)[Etiqueta de visualización].
Envoltura de grupo Palabra clave contenedora Agrupa servicios relacionados dentro de un contenedor visual. Utiliza la sintaxis: grupo id(icon)[Etiqueta de grupo].
Palabra clave En Modificador de asignación Asigna explícitamente un nodo de servicio para que resida dentro de una envoltura de grupo declarada específicamente: servicio id(icon)[Etiqueta] en groupId.
Nodo de unión Identificador de palabra clave Establece un punto central de alineación estructural utilizado para enrutar de forma ordenada rutas de enlace complejas y multidireccionales: nodo id.
Aristas de conexión Operadores de dirección de puertos Configura rutas de seguimiento direccionales fijando el enlace a lados específicos del nodo (T, B, L, R): fuente: lado -- lado: destino. Soporta puntas de flecha direccionales (-->).

Agrupación avanzada y enrutamiento de aristas de puerto

Para controlar exactamente cómo viajan los enlaces entre los elementos sin que parezca desordenado, el motor de arquitectura requiere enlaces de puertos explícitos. Los nodos relacionados se pueden organizar dentro de grupos estructurales para aclarar los límites del sistema.

1. Reglas exactas de enlace de puertos

Define dónde una línea de conexión sale y entra en un componente añadiendo dos puntos y una bandera de dirección de borde (“T, B, L, R) a los identificadores de nodo respectivos:

  • db:R -- L:server : La línea sale por el **Derecho** de la base de datos e ingresa por el **Izquierdo** del servidor como una línea horizontal recta.
  • db:T -- L:server : La línea sale por la **Parte Superior** de la base de datos e ingresa por el **Izquierdo** del servidor, doblando automáticamente en un ángulo de codo limpio de 90°.
  • src:B --> T:proc : La línea sale por la **Parte Inferior** del nodo de origen y sigue hacia abajo hasta la **Parte Superior** del procesador con una punta de flecha direccional.

2. Estructuración de sistemas con grupos

Para declarar un grupo visual (como una nube privada virtual o un clúster de bases de datos), utiliza la palabra clave group y asigna nodos a él mediante el modificador in modificador:

architecture-beta
  group cloudNetwork(cloud)[Nube Privada]
    service auth(server)[Nodo de Autenticación] in cloudNetwork
    service api(server)[Puntos finales de API] in cloudNetwork


Alineación de elementos hermanos (v11.16.0+)

Cuando múltiples servicios distintos comparten rutas idénticas de enrutamiento de bordes (por ejemplo, tres fuentes de datos independientes que transmiten a un único trabajador de mensajes), el algoritmo de diseño a veces puede agruparlos. El align row y alinear columnalas directivas obligan al motor a distribuir esos elementos hermanos de forma equitativa a lo largo de una línea de eje específica.

arquitectura-beta
  servicio src1(servidor)[Origen 1]
  servicio src2(servidor)[Origen 2]
  servicio proc(servidor)[Nodo Procesador]

  src1:B --> T:proc
  src2:B --> T:proc

  alinear fila src1 src2


Plantilla del mundo real: Plantilla del clúster de microservicios

Esta plantilla demuestra una arquitectura de nube altamente resiliente y de grado empresarial. Al centrar el motor principal de la API y ramificar la autenticación y las tareas asíncronas horizontalmente hacia ambos lados, el diseño utiliza principios de simetría para evitar líneas superpuestas. Todo el flujo de datos se desplaza de forma predecible desde la puerta de enlace pública hasta una capa de almacenamiento de datos perfectamente alineada, utilizando dual alinear filadirectivas para fijar los componentes en rutas horizontales precisas y definidas.

arquitectura-beta
  título "Arquitectura de microservicios de alta disponibilidad"

  %% Nivel de entrada externa
  servicio cloudflare(internet)[WAF de Cloudflare]
  servicio alb(servidor)[Balanceador de carga de aplicaciones de AWS]

  %% Clúster central de aplicaciones
  grupo appCluster(nube)[Microservicios gestionados de EKS]
    servicio authService(servidor)[Servicio de autenticación] en appCluster
    servicio apiService(servidor)[Motor principal de la API] en appCluster
    servicio workerNode(servidor)[Trabajador de tareas asíncronas] en appCluster

  %% Nivel de almacenamiento seguro
  grupo dataCluster(base de datos)[Capa de datos protegida]
    servicio redis(disco)[Cluster de caché Redis] en dataCluster
    servicio postgres(base de datos)[Principal de PostgreSQL] en dataCluster

  %% 1. Flujo vertical: Entrada de tráfico desde la red pública hacia el núcleo de cómputo
  cloudflare:B --> T:alb
  alb:B --> T:apiService

  %% 2. Flujo horizontal: La API principal se ramifica simétricamente hacia la izquierda y la derecha
  apiService:L --> R:authService
  apiService:R --> L:workerNode

  %% 3. Flujo base: Los trabajadores de la aplicación caen directamente en sus respectivas ranuras de datos
  authService:B --> T:redis
  workerNode:B --> T:postgres

  %% Alineaciones de ejes de diseño para una cuadrícula perfecta
  alinear fila authService apiService workerNode
  alinear fila redis postgres


Errores comunes en la sintaxis y limitaciones del sistema

Al escribir código de infraestructura, tenga en cuenta estas reglas específicas de validación de configuración para evitar errores de análisis:

  • Secuencia de corchetes de etiqueta:Las cadenas de texto que se muestran deben usar corchetes cuadrados [Texto de etiqueta] y deben seguir directamente los paréntesis del icono sin espacios: servicio id(servidor)[Texto]es correcto. Usar comillas dentro de los paréntesis romperá el analizador.
  • Sensibilidad de mayúsculas y minúsculas en puertos:Los anclajes de puertos de borde de conexión deben escribirse con caracteres en mayúsculas (T, B, L, R). Letras minúsculas (t, b, l, r) no son reconocidos y provocarán fallos en la generación de diseños.
  • Regla de declaración previa: Cada identificador de nodo o unión utilizado dentro de una declaración de ruta de borde debe declararse explícitamente en una línea separada por encima de él. Conectarse a un nombre de nodo implícito no se podrá compilar.
  • Límites de miembros de alineación: Cuando se utiliza el alinear fila o alinear columna directivas de posicionamiento, debe proporcionar al menos dos o más identificadores de servicio o unión válidos previamente declarados en la línea de comandos.
Scroll al inicio