Diagramas con Mermaid

Curso de iniciación a Mermaid orientado a perfiles técnicos que documentan sistemas, procesos o arquitecturas y necesitan crear diagramas directamente en sus ficheros Markdown. El alumno aprende la estructura básica del bloque Mermaid, crea diagramas de flujo con nodos, conexiones y etiquetas, construye diagramas de secuencia para representar interacciones entre actores, los integra en documentación Markdown y corrige errores de sintaxis en diagramas existentes. Al finalizar, el participante será capaz de documentar flujos y procesos con diagramas Mermaid mantenibles y renderizables en GitHub, GitLab y herramientas de documentación modernas.

Al finalizar el curso, el participante será capaz de:

• Identificar la estructura básica de un bloque Mermaid como diagrama en código
• Crear diagramas de flujo básicos con nodos, conexiones y etiquetas
• Crear diagramas de secuencia simples para representar interacciones entre actores
• Insertar diagramas Mermaid en documentación Markdown con el bloque adecuado para su renderizado
• Corregir errores básicos de sintaxis o renderizado en diagramas Mermaid embebidos en Markdown

1. Mermaid como diagrama en código Qué es Mermaid y qué problema resuelve frente a herramientas de diagramas visuales; la filosofía de "diagrams as code"; sintaxis del bloque de código con triple backtick y tipo; tipos de diagrama disponibles: flowchart, sequenceDiagram, classDiagram, erDiagram, gantt; renderizado en GitHub, GitLab, Notion y MkDocs
2. Diagramas de flujo Nodos con formas: rectángulo, rombo, círculo y estadio; conexiones: flechas simples, con texto y bidireccionales; subgraphs para agrupar nodos; dirección del grafo: TD, LR, BT, RL; etiquetas en nodos y conexiones; estilos básicos con classDef y class; casos de uso: documentar flujos de trabajo y decisiones
3. Diagramas de secuencia Actores y participantes; mensajes síncronos y asíncronos; notas y comentarios; bloques loop, alt, opt y par; activaciones; casos de uso: documentar interacciones entre servicios, flujos de autenticación y API calls
4. Integración en Markdown Bloque de código con tipo mermaid en ficheros .md; renderizado en GitHub vs. local; herramientas de previsualización: Mermaid Live Editor y extensiones de VS Code; incrustar diagramas en README, wikis y documentación de arquitectura; consideraciones de tamaño y legibilidad
5. Depuración de errores de sintaxis Errores más frecuentes: nodos sin cerrar, flechas mal formadas, caracteres especiales no escapados, palabras reservadas como nombres de nodo; uso del Mermaid Live Editor para depurar interactivamente; cómo interpretar los mensajes de error del parser; estrategia de simplificar y añadir por partes

• Editor de código (VS Code) con extensión Markdown Preview Mermaid Support
• Acceso al Mermaid Live Editor online (mermaid.live) para las prácticas interactivas
• Cuenta de GitHub para verificar el renderizado en un repositorio real

Ninguno requerido. Se recomienda tener conocimientos básicos de Markdown (crear encabezados, listas y bloques de código), ya que Mermaid se integra en documentos Markdown. No es necesario saber programar ni tener experiencia con otros lenguajes de diagramas.