# Como usar Mermaid.js para fluxogramas no NoteRich – Tutorial completo Visualizar processos complexos, arquiteturas de sistemas ou árvores de decisão pode ser desafiador apenas com texto. **Mermaid.js** é uma ferramenta poderosa baseada em JavaScript para criação de diagramas e gráficos. Ela permite que você crie diagramas usando definições de texto simples. No **NoteRich**, integramos Mermaid.js diretamente no editor, permitindo que você crie fluxogramas profissionais, diagramas de sequência e muito mais, sem precisar sair do seu noturno. Este guia mostrará tudo o que você precisa saber para dominar os diagramas Mermaid no NoteRich, incluindo como usar AI e OCR para gerá-los instantaneamente. --- ## 🚀 Por que usar Mermaid no NoteRich? * **Baseado em texto:** Defina seus diagramas usando código, tornando-os fáceis de controlar e editar. * **Pré-visualização em tempo real:** Veja suas alterações instantaneamente enquanto escreve. * **Versátil:** Suporta fluxogramas, diagramas de sequência, diagramas de classes, diagramas de estado, gráficos de Gantt e muito mais. * **Impulsionado por AI e OCR:** Gera diagramas a partir de descrições em linguagem natural ou ao escanear imagens existentes. * **Primo local:** Suas definições de diagramas são armazenadas localmente em seus noturnos, garantindo privacidade e acesso off-line. --- ## 📝 Começando: Inserindo um diagrama Mermaid Existem três maneiras principais de inserir um diagrama Mermaid no NoteRich: ### Método 1: O comando slash (`/`) 1. Coloque o cursor onde você deseja o diagrama. 2. Digite `/` para abrir o seletor de componentes. 3. Procure por **"Mermaid"** ou **"Diagram"**. 4. Selecione **Mermaid Diagram** na lista. ### Método 2: A barra de ferramentas 1. Clique no botão **Inserir** na barra de ferramentas. 2. Vá para a seção **Visualização** ou **Diagramas**. 3. Clique em **Mermaid**. ### Método 3: Assistente de AI 1. Abra o **Assistente de AI** (através de `/ai` ou na barra de ferramentas). 2. Descreva o diagrama que você deseja (por exemplo, "Crie um fluxograma para o processo de login do usuário"). 3. O AI gerará o código Mermaid para você, que pode inserir diretamente em sua nota. Uma caixa de diálogo de configuração aparecerá com um editor de código e uma janela de pré-visualização em tempo real. --- ## 🛠️ A interface do editor Mermaid O editor Mermaid no NoteRich é projetado para eficiência: * **Área de código:** Uma área de texto monospaced onde você escreve sua sintaxe Mermaid. * **Pré-visualização em tempo real:** Uma renderização em tempo real do seu diagrama. Se houver um erro de sintaxe, uma sobreposição de erro aparecerá para ajudá-lo a depurar. * **Ícone de ajuda:** Clique no ícone `?` ao lado de "Código do diagrama" para abrir a documentação oficial do [Mermaid.js](https://mermaid.js.org/intro/) para referências de sintaxe detalhadas. * **Botão de confirmação:** Salva seu diagrama e insira-o em sua nota. > **Dica:** Você pode clicar duas vezes em qualquer diagrama Mermaid existente em sua nota para reabrir o editor e fazer alterações. --- ## 📊 Sintaxe básica de fluxogramas Fluxogramas são o caso de uso mais comum do Mermaid. Veja como construí-los. ### 1. Definir a direção Comece definindo a direção do fluxo: * `graph TD`: Top-Down * `graph LR`: Left-Right * `graph BT`: Bottom-Top * `graph RL`: Right-Left ### 2. Adicionar nós Nós são definidos por um ID e uma etiqueta. ```mermaid graph TD A[Início] --> B[Processo] B --> C{Decisão} C -->|Sim| D[Concluído] C -->|Não| B ``` * `[Texto]`: Nó retangular. * `(Texto)`: Retângulo arredondado. * `((Texto))`: Círculo. * `{Texto}`: Rombos (Decisão). * `[[Texto]]`: Subrútilo. ### 3. Conectar nós * `-->`: Seta contínua. * `-.->`: Seta pontilhada. * `==>`: Seta espessa. * `-- Texto -->`: Seta com etiqueta. --- ## 🤖 Geração de diagramas impulsionada por AI Não quer escrever o código? Deixe que o AI do NoteRich faça isso por você. 1. Abra o **Assistente de AI**. 2. Digite um prompt como: *"Gerar um diagrama de sequência Mermaid para um cliente fazendo um pedido online."* 3. O AI retornará um bloco de código como este: ```mermaid sequenceDiagram participant Cliente participant Site participant Banco de Dados Cliente->>Site: Fazer Pedido Site->>Banco de Dados: Verificar Estoque Banco de Dados-->>Site: Estoque Disponível Site-->>Cliente: Pedido Confirmado ``` 4. Copie o código ou use o botão "Inserir" se estiver disponível em sua interface de AI para adicioná-lo à sua nota. --- ## 📸 OCR: Escaneie diagramas manuscritos ou impressos Tem uma foto de uma tela em branco ou um fluxograma impresso? O **Scanner de Notas (OCR)** do NoteRich pode convertê-lo em código Mermaid editável. 1. Abra o **Assistente de AI** e selecione **Scanner de Notas (OCR)**. 2. Carregue uma imagem de seu diagrama manuscrito ou impresso. 3. No prompt, especifique: *"Converta esta imagem em código de fluxograma Mermaid.js."* 4. O AI analisará a estrutura da imagem e gerará a sintaxe correspondente do Mermaid. 5. Revisione o código gerado no editor e ajuste eventuais erros de reconhecimento. > **Nota:** Para melhores resultados, garanta que a imagem seja clara e o texto legível. Esboços manuscritos complexos podem precisar de ajustes manuais após a conversão. --- ## 🎨 Funcionalidades avançadas ### Estilização de nós Você pode personalizar a aparência de nós específicos usando classes CSS ou estilos internos. ```mermaid graph LR A[Início] --> B[Processo] style A fill:#f9f,stroke:#333,stroke-width:4px style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 ``` ### Subgrafos Gruphe nós relacionados para uma melhor organização. ```mermaid graph TD subgraph Frontend A[App do React] --> B[Componentes da UI] end subgraph Backend C[Servidor API] --> D[Banco de Dados] end B --> C ``` ### Diagramas de sequência O Mermaid não é apenas para fluxogramas. Você também pode criar diagramas de sequência para visualizar interações entre sistemas. ```mermaid sequenceDiagram participant Usuário participant NoteRich participant Servidor Usuário->>NoteRich: Editar Nota NoteRich->>Servidor: Salvar Dados Servidor-->>NoteRich: Confirmar Salvar NoteRich-->>Usuário: Atualizar UI ``` --- ## 💡 Dicas para usuários do NoteRich 1. **Escape de caracteres especiais:** Se o texto do nó contiver caracteres especiais como `[]` ou `()`, envolva o texto em quotes. ```mermaid graph TD A["Nó com [brackets]"] --> B["Nó com (parenteses)]" ``` 2. **Copiar como imagem:** Quando seu diagrama estiver renderizado, clique nele para revelar a barra de ferramentas flutuante. Use o botão **Copiar Imagem** para colar o diagrama em outras aplicações como Slack, Notion ou e-mail. 3. **Baixar SVG:** Usuários profissionais podem baixar o diagrama como um arquivo SVG de alta qualidade para uso em apresentações ou publicações. --- ## ❓ Solução de problemas * **Diagrama não sendo renderizado?** Verifique a sobreposição de erro na janela de pré-visualização. Problemas comuns incluem a falta de parênteses de fechamento `]` ou sintaxe de setas incorreta. * **Erros de sintaxe?** Assegure-se de estar usando a sintaxe correta do Mermaid. O NoteRich usa a versão estável mais recente do Mermaid.js. Consulte a [documentação oficial](https://mermaid.js.org/intro/) se tiver dúvidas. * **Precisão do OCR?** Se o resultado do OCR não for perfeito, use o Assistente de AI para aperfeiçoar o código. Você pode copiar a saída do OCR e pedir ao AI para "Corrigir a sintaxe Mermaid". --- ## 🏁 Conclusão O Mermaid.js no NoteRich transforma a maneira como você documenta processos e sistemas. Mantendo seus diagramas como código, você garante que eles estejam sempre atualizados, fáceis de modificar e integrados perfeitamente com sua base de conhecimento. Com geração de AI e leitura por OCR, criar visualizações complexas nunca foi tão fácil. Comece visualizando suas ideias hoje mesmo! ---