Ejemplos Avanzados de Mermaid

← Volver a los ejemplos de Markdown

Usa estas plantillas como punto de partida para tus propios diagramas.

Diagrama de flujo de decisión

flowchart TD
    Start([Inicio]) --> Input[/Entrada de datos/]
    Input --> Process{¿Procesar?}
    Process -->|Sí| Execute[Ejecutar tarea]
    Process -->|No| Skip[Omitir]
    Execute --> Check{¿Correcto?}
    Check -->|Sí| Success[✅ Correcto]
    Check -->|No| Retry{¿Intentar de nuevo?}
    Retry -->|Sí| Execute
    Retry -->|No| Fail[❌ Error]
    Skip --> End([Fin])
    Success --> End
    Fail --> End

Diagrama de estados

stateDiagram-v2
    [*] --> Inactivo
    Inactivo --> Cargando: Subir
    Cargando --> Procesando: Archivos cargados
    Procesando --> Guardando: Validados
    Guardando --> Correcto: Guardados
    Guardando --> Error: Fallo
    Correcto --> Inactivo: Completar
    Error --> Inactivo: Reintentar
    Error --> [*]: Cancelar

Línea del tiempo

timeline
    title Desarrollo del proyecto
    section Fase 1
        Preparación : Configuración del proyecto
                    : Instalación de dependencias
    section Fase 2
        IndexedDB : Implementación de la base de datos
                  : Pruebas de persistencia
    section Fase 3
        Componentes : Creación de componentes
                    : Integración de la interfaz
    section Fase 4
        Pruebas : Pruebas funcionales
                : Pruebas sin conexión
    section Fase 5
        Publicación : Compilación de producción
                    : Distribución

Diagrama entidad-relación

erDiagram
    FILE ||--o{ FOLDER : pertenece_a
    FILE {
        int id PK
        string path
        string name
        text content
        datetime createdAt
        datetime updatedAt
    }
    FOLDER {
        int id PK
        string path
        string name
    }
    USER ||--o{ FILE : crea
    USER {
        int id PK
        string name
    }

Diagrama de Gantt

gantt
    title Cronograma del proyecto
    dateFormat YYYY-MM-DD
    section Planificación
    Definir requisitos       :a1, 2025-10-01, 3d
    Crear prototipo          :a2, after a1, 2d
    section Desarrollo
    Preparar proyecto        :b1, 2025-10-06, 1d
    Implementar IndexedDB    :b2, after b1, 2d
    Crear componentes        :b3, after b2, 3d
    Integrar interfaz        :b4, after b3, 2d
    section Pruebas
    Pruebas unitarias        :c1, after b4, 2d
    Pruebas de integración   :c2, after c1, 2d
    section Publicación
    Compilación de producción :d1, after c2, 1d
    Distribución             :d2, after d1, 1d

Mapa mental

mindmap
  root((Raziel.MD))
    Funciones
      Subida
        Arrastrar y soltar
        Seleccionar archivo
        Seleccionar carpeta
      Lectura
        Markdown
        Diagramas Mermaid
        Resaltado de sintaxis
      Almacenamiento
        IndexedDB
        Uso sin conexión
        PWA
    Tecnología
      Interfaz
        Vue 3
        TypeScript
        TailwindCSS
      Bibliotecas
        Marked.js
        Mermaid.js
        Dexie.js
    Experiencia
      Modo oscuro
      Búsqueda
      Navegación
      Diseño adaptable

Tipos de diagramas

Mermaid ofrece varios tipos:

• ✅ Diagrama de flujo
• ✅ Diagrama de secuencia
• ✅ Diagrama de clases
• ✅ Diagrama de estados
• ✅ Diagrama entidad-relación
• ✅ Diagrama de Gantt
• ✅ Gráfico circular
• ✅ Gráfico Git
• ✅ Línea del tiempo
• ✅ Mapa mental

Prueba a crear tus propios diagramas.

Sigue explorando

• Ejemplo completo de Markdown
• Volver a los ejemplos de Markdown