--- title: Diagramas Mermaid description: "Renderiza diagramas de flujo, secuencia, ER y más a partir de sintaxis Mermaid basada en texto. Los diagramas se generan como SVG en tiempo de build." --- Escribe diagramas como texto en bloques de código delimitados. Jamdesk los renderiza como SVG en tiempo de build. ## Uso básico Usa un bloque de código delimitado con el identificador de lenguaje `mermaid`: ````mdx ```mermaid flowchart LR A[Start] --> B[Process] --> C[End] ``` ```` ```mermaid flowchart LR A[Start] --> B[Process] --> C[End] ``` ## Tipos de diagramas ### Diagramas de flujo La dirección puede ser de arriba a abajo (`TD`), de izquierda a derecha (`LR`), de abajo a arriba (`BT`) o de derecha a izquierda (`RL`). ```mermaid flowchart TD A[User Request] --> B{Valid?} B -->|Yes| C[Process] B -->|No| D[Error] C --> E[Response] D --> E ``` ````mdx ```mermaid flowchart TD A[User Request] --> B{Valid?} B -->|Yes| C[Process] B -->|No| D[Error] C --> E[Response] D --> E ``` ```` #### Subgráficos Agrupa nodos relacionados usando subgráficos. Esto ayuda a organizar diagramas de flujo complejos en secciones lógicas como "Frontend" y "Backend" o distintas etapas de un pipeline. ```mermaid flowchart TB subgraph Frontend A[React App] --> B[Components] end subgraph Backend C[API Server] --> D[(Database)] end B -->|HTTP| C ``` ````mdx ```mermaid flowchart TB subgraph Frontend A[React App] --> B[Components] end subgraph Backend C[API Server] --> D[(Database)] end B -->|HTTP| C ``` ```` ### Diagramas de secuencia Los diagramas de secuencia muestran cómo interactúan los componentes a lo largo del tiempo. Son ideales para documentar llamadas a API, flujos de autenticación o cualquier comunicación entre servicios. Los participantes aparecen como líneas de vida verticales, con mensajes que fluyen entre ellos. ```mermaid sequenceDiagram participant Client participant Server participant Database Client->>Server: Request Server->>Database: Query Database-->>Server: Results Server-->>Client: Response ``` ````mdx ```mermaid sequenceDiagram participant Client participant Server participant Database Client->>Server: Request Server->>Database: Query Database-->>Server: Results Server-->>Client: Response ``` ```` ### Diagramas de clases Los diagramas de clases representan la estructura de sistemas orientados a objetos. Úsalos para documentar modelos de datos, mostrar relaciones entre entidades o diseñar arquitecturas de sistema. Muestran clases con sus atributos, métodos y cómo se relacionan entre sí. ```mermaid classDiagram class User { +String name +String email +login() +logout() } class Order { +int id +Date created +addItem() +checkout() } class Item { +String name +float price } User "1" --> "*" Order : places Order "1" --> "*" Item : contains ``` ````mdx ```mermaid classDiagram class User { +String name +String email +login() +logout() } class Order { +int id +Date created +addItem() +checkout() } class Item { +String name +float price } User "1" --> "*" Order : places Order "1" --> "*" Item : contains ``` ```` ### Diagramas de estado Los diagramas de estado modelan el ciclo de vida de un objeto o proceso. Muestran todos los estados posibles y las transiciones entre ellos. Usa diagramas de estado para documentar estados de pedidos, flujos de trabajo de documentos o cualquier sistema con fases diferenciadas. ```mermaid stateDiagram-v2 [*] --> Draft Draft --> Review Review --> Published Review --> Draft Published --> [*] ``` ````mdx ```mermaid stateDiagram-v2 [*] --> Draft Draft --> Review Review --> Published Review --> Draft Published --> [*] ``` ```` ### Diagramas de entidad-relación Los diagramas ER documentan esquemas de bases de datos y modelos de datos. Muestran entidades (tablas), sus atributos (columnas) y las relaciones entre ellas. Los símbolos indican la cardinalidad: uno a uno, uno a muchos o muchos a muchos. ```mermaid erDiagram USER ||--o{ ORDER : places ORDER ||--|{ ITEM : contains USER { string name string email } ORDER { int id date created } ``` ````mdx ```mermaid erDiagram USER ||--o{ ORDER : places ORDER ||--|{ ITEM : contains USER { string name string email } ORDER { int id date created } ``` ```` ### Diagramas de Gantt Los diagramas de Gantt visualizan cronogramas y plazos de proyectos. Las tareas se muestran como barras horizontales a lo largo de una línea de tiempo, indicando duración, dependencias y trabajo paralelo. Úsalos para planificación de proyectos, documentación de sprints o roadmaps. ```mermaid gantt title Project Timeline dateFormat YYYY-MM-DD section Planning Research :a1, 2024-01-01, 7d Design :a2, after a1, 5d section Development Backend :b1, after a2, 14d Frontend :b2, after a2, 14d section Launch Testing :c1, after b1, 7d Deployment :c2, after c1, 2d ``` ````mdx ```mermaid gantt title Project Timeline dateFormat YYYY-MM-DD section Planning Research :a1, 2024-01-01, 7d Design :a2, after a1, 5d section Development Backend :b1, after a2, 14d Frontend :b2, after a2, 14d section Launch Testing :c1, after b1, 7d Deployment :c2, after c1, 2d ``` ```` ### Gráficos de Git Los gráficos de Git visualizan estrategias de ramificación y flujos de trabajo de control de versiones. Muestran commits, ramas, fusiones y el historial general de un repositorio. Cada rama tiene un color diferente para facilitar su identificación. ```mermaid gitGraph commit id: "Initial" branch feature checkout feature commit id: "Add login" commit id: "Add auth" checkout main merge feature id: "v1.0" branch release checkout release commit id: "Prep 1.1" checkout main branch hotfix checkout hotfix commit id: "Fix bug" checkout main merge hotfix id: "v1.0.1" checkout release commit id: "Final QA" checkout main merge release id: "v1.1" ``` ````mdx ```mermaid gitGraph commit id: "Initial" branch feature checkout feature commit id: "Add login" commit id: "Add auth" checkout main merge feature id: "v1.0" branch release checkout release commit id: "Prep 1.1" checkout main branch hotfix checkout hotfix commit id: "Fix bug" checkout main merge hotfix id: "v1.0.1" checkout release commit id: "Final QA" checkout main merge release id: "v1.1" ``` ```` ### Gráficos de sectores Los gráficos de sectores muestran datos proporcionales como porciones de un círculo. Úsalos para representar cuota de mercado, resultados de encuestas, asignación de recursos o cualquier dato en que las partes forman un todo. Limita las porciones a 6 o menos para mayor legibilidad. ```mermaid pie title Browser Market Share "Chrome" : 65 "Safari" : 19 "Firefox" : 10 "Edge" : 4 "Other" : 2 ``` ````mdx ```mermaid pie title Browser Market Share "Chrome" : 65 "Safari" : 19 "Firefox" : 10 "Edge" : 4 "Other" : 2 ``` ```` ## Formas en diagramas de flujo Las distintas formas transmiten diferentes significados en los diagramas de flujo: | Sintaxis | Forma | Uso | | ---------- | ------------------- | --- | | `[text]` | Rectángulo | Pasos de proceso, acciones | | `(text)` | Rectángulo redondeado | Puntos de inicio/fin | | `{text}` | Rombo | Decisiones, condiciones | | `([text])` | Estadio | Eventos, disparadores | | `[[text]]` | Subrutina | Procesos predefinidos | | `[(text)]` | Cilindro | Bases de datos, almacenamiento | ## Tipos de flechas Las flechas indican la dirección del flujo y el tipo de relación: | Sintaxis | Descripción | Uso | | ----------- | -------------------- | --- | | `-->` | Flecha sólida | Flujo normal | | `---` | Línea sólida | Asociaciones | | `-.->` | Flecha punteada | Flujo opcional o asíncrono | | `==>` | Flecha gruesa | Rutas importantes | | `--text-->` | Flecha con etiqueta | Describir la transición | ## Ajustar el tamaño de diagramas anchos Para diagramas anchos como gráficos de Gantt o gráficos de Git complejos, puedes usar el componente `Mermaid` directamente con una prop `minWidth` para evitar que el diagrama se comprima: ```mdx gantt title Wide Project Timeline ... ``` ## Consejos de estilo Los diagramas Mermaid se adaptan automáticamente a los modos claro y oscuro. Los colores están optimizados para la legibilidad en ambos temas. Para crear diagramas efectivos: - Mantenlo simple: divide los flujos complejos en varios diagramas más pequeños. - Etiqueta tus flechas para explicar las transiciones. - Elige una sola dirección: `TD` (de arriba a abajo) para diagramas altos, `LR` (de izquierda a derecha) para los anchos. - Limita cada diagrama a entre 10 y 15 nodos para mayor claridad. ## Más información Para la referencia completa de sintaxis Mermaid, incluidas funciones avanzadas como estilos, temas y tipos de diagramas adicionales, consulta la [documentación oficial de Mermaid](https://mermaid.js.org/intro/). ## ¿Qué sigue? Explora todos los componentes disponibles Aprende a usar componentes en MDX