O Krokanti Notes suporta o Mermaid — uma linguagem de diagramação baseada em texto. Escreva o código do diagrama em um bloco de código delimitado e ele é renderizado como um diagrama visual no editor.

Como Inserir um Diagrama

No editor visual, digite três acentos graves, depois mermaid, depois Enter:

```mermaid
seu código de diagrama aqui
```

Ou no modo de código-fonte (Markdown), escreva diretamente.

Fluxogramas

O tipo de diagrama mais comum — ótimo para árvores de decisão, processos e fluxos de trabalho.

flowchart TD
  A[Início] --> B{Está funcionando?}
  B -->|Sim| C[Publicar]
  B -->|Não| D[Depurar]
  D --> B
  C --> E[Concluído]

Opções de direção: TD (de cima para baixo), LR (da esquerda para a direita), BT (de baixo para cima), RL (da direita para a esquerda)

Formas de nós:

[Retângulo]
(Retângulo arredondado)
{Diamante / decisão}
((Círculo))
[/Paralelogramo/]

Diagramas de Sequência

Mostram interações entre sistemas ou pessoas ao longo do tempo.

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

Use - >> para uma seta sólida e -->> para uma seta de retorno tracejada.

Gráficos de Gantt

Cronogramas de projetos e agendamento de tarefas:

gantt
  title Cronograma do Projeto
  dateFormat YYYY-MM-DD
  section Fase 1
    Pesquisa    :done, 2026-01-01, 2026-01-14
    Design      :active, 2026-01-15, 2026-01-28
  section Fase 2
    Desenvolvimento : 2026-02-01, 2026-03-01
    Testes     : 2026-03-01, 2026-03-15

Diagramas de Entidade-Relacionamento

Visualização de esquema de banco de dados:

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

Gráficos de Pizza

Dados proporcionais simples:

pie title Alocação de Tempo
  "Escrita" : 40
  "Pesquisa" : 30
  "Revisão" : 20
  "Administração" : 10

Diagramas de Classes

Design orientado a objetos:

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

Os diagramas são renderizados automaticamente enquanto você digita — não é necessário visualizá-los separadamente. Se houver um erro de sintaxe, o código bruto é exibido em vez do diagrama; corrija o erro de digitação e ele renderiza novamente.

Dicas

Os diagramas Mermaid também são renderizados nas visualizações de notas públicas — ótimo para compartilhar documentação técnica
O código do diagrama é armazenado como texto simples — editável e pesquisável como o restante da sua nota
Para diagramas complexos, use o Mermaid Live Editor para construir e visualizar, depois cole o código na sua nota

Diagramas Mermaid