Krokanti Notes admite Mermaid — un lenguaje de diagramas basado en texto. Escribe el código del diagrama en un bloque de código delimitado y se muestra como un diagrama visual en el editor.

Cómo insertar un diagrama

En el editor visual, escribe tres acentos graves, luego mermaid, luego Enter:

```mermaid
tu código de diagrama aquí
```

O en la vista de código fuente (Markdown), escríbelo directamente.

Diagramas de flujo

El tipo de diagrama más común — ideal para árboles de decisión, procesos y flujos de trabajo.

flowchart TD
  A[Start] --> B{Is it working?}
  B -->|Yes| C[Deploy]
  B -->|No| D[Debug]
  D --> B
  C --> E[Done]

Opciones de dirección: TD (de arriba a abajo), LR (de izquierda a derecha), BT (de abajo a arriba), RL (de derecha a izquierda)

Formas de nodos:

[Rectángulo]
(Rectángulo redondeado)
{Rombo / decisión}
((Círculo))
[/Paralelogramo/]

Diagramas de secuencia

Muestra interacciones entre sistemas o personas a lo largo del tiempo.

sequenceDiagram
  User->>Server: POST /api/login
  Server->>Database: Verify credentials
  Database-->>Server: User found
  Server-->>User: JWT token

Usa ->> para una flecha sólida y -->> para una flecha de retorno discontinua.

Diagramas de Gantt

Líneas de tiempo de proyectos y planificación de tareas:

gantt
  title Project Timeline
  dateFormat YYYY-MM-DD
  section Phase 1
    Research    :done, 2026-01-01, 2026-01-14
    Design      :active, 2026-01-15, 2026-01-28
  section Phase 2
    Development : 2026-02-01, 2026-03-01
    Testing     : 2026-03-01, 2026-03-15

Diagramas entidad-relación

Visualización del esquema de base de datos:

erDiagram
  USER ||--o{ NOTE : creates
  NOTE ||--o{ TAG : has
  NOTE ||--o{ VERSION : has
  USER ||--o{ FOLDER : owns

Gráficos de sectores

Datos proporcionales simples:

pie title Time Allocation
  "Writing" : 40
  "Research" : 30
  "Review" : 20
  "Admin" : 10

Diagramas de clases

Diseño orientado a objetos:

classDiagram
  class Note {
    +String title
    +String content
    +Boolean isPinned
    +save()
    +delete()
  }
  class Folder {
    +String name
    +Note[] notes
  }
  Folder --> Note

Los diagramas se muestran automáticamente mientras escribes — no necesitas previsualizarlos por separado. Si hay un error de sintaxis, se muestra el código sin procesar en lugar del diagrama; corrige el error tipográfico y se mostrará de nuevo.

Consejos

Los diagramas Mermaid también se muestran en las vistas de notas públicas — ideal para compartir documentación técnica
El código del diagrama se almacena como texto plano — es editable y buscable como el resto de tu nota
Para diagramas complejos, usa el Editor en línea de Mermaid para construir y previsualizar, y luego pega el código en tu nota

Diagramas Mermaid