# Come utilizzare Mermaid.js per i flussi di dati in NoteRich – Guida completa Visualizzare processi complessi, architetture di sistemi o alberi decisionali può essere difficile utilizzando solo testo. **Mermaid.js** è uno strumento potente basato su JavaScript per la creazione di diagrammi e grafici. In **NoteRich**, abbiamo integrato Mermaid.js direttamente nell’editor, permettendovi di creare diagrammi professionali, diagrammi di sequenza e altro ancora senza dover lasciare le vostre note. Questa guida vi mostrerà tutto ciò che è necessario per utilizzare i diagrammi Mermaid in NoteRich, incluso come utilizzare l’intelligenza artificiale e l’OCR per generarli immediatamente. --- ## 🚀 Perché utilizzare Mermaid in NoteRich? * **Basato su testo:** Definisci i tuoi diagrammi utilizzando codice, rendendoli facilmente controllabili e modificabili. * **Visualizzazione in tempo reale:** Vedi i tuoi cambiamenti immediatamente mentre scrivi. * **Versatilità:** Supporta flussi di dati, diagrammi di sequenza, diagrammi di classi, diagrammi di stato, diagrammi di Gantt e altro ancora. * **Intelligenza artificiale e OCR:** Genera diagrammi da descrizioni in linguaggio naturale o scansionando immagini esistenti. * **Località prioritaria:** Le tue definizioni di diagramma vengono memorizzate localmente nelle vostre note, garantendo la privacy e l’accesso offline. --- ## 📝 Come iniziare: inserimento di un diagramma Mermaid Esistono tre modi principali per inserire un diagramma Mermaid in NoteRich: ### Metodo 1: Il comando `/` 1. Posiziona il cursore dove desideri inserire il diagramma. 2. Typca `/` per aprire il selettore dei componenti. 3. Cerca **"Mermaid"** o **"Diagram"**. 4. Seleziona **Mermaid Diagram** dalla lista. ### Metodo 2: La barra degli strumenti 1. Fai clic sul pulsante **Insert** nella barra degli strumenti. 2. Vai alla sezione **Visualizzazione** o **Diagrammi**. 3. Fai clic su **Mermaid**. ### Metodo 3: L’assistente dell’intelligenza artificiale 1. Apri l’**Assistente dell’intelligenza artificiale** (attraverso `/ai` o la barra degli strumenti). 2. Descrivi il diagramma che desideri (ad esempio, “Creare un diagramma di flusso per il processo di login utente”). 3. L’intelligenza artificiale genererà il codice Mermaid per te, che potrai poi inserire direttamente nella tua nota. Una finestra di configurazione apparirà con un editor di codice e una finestra di visualizzazione in tempo reale. --- ## 🛠️ Interfaccia dell’editor Mermaid L’editor Mermaid in NoteRich è progettato per essere efficiente: * **Area di codice:** Un’area di testo monospaced dove scrivi la sintassi Mermaid. * **Visualizzazione in tempo reale:** Una rappresentazione in tempo reale del tuo diagramma. Se c’è un errore di sintassi, appare un riquadro di errore per aiutarti a risolverlo. * **Icona di aiuto:** Fai clic sull’icona `?` accanto a “Codice diagramma” per aprire la documentazione ufficiale di [Mermaid.js](https://mermaid.js.org/intro/) per riferimenti sintattici dettagliati. * **Pulsante di conferma:** Salva il tuo diagramma e inseriscilo nella nota. > **Consiglio:** Puoi fare doppio clic su qualsiasi diagramma Mermaid esistente nella tua nota per riaprire l’editor e apportare modifiche. --- ## 📊 Sintassi di base per i flussi di dati I flussi di dati sono il caso d’uso più comune per Mermaid. Ecco come crearli. ### 1. Definire la direzione Inizi definendo la direzione del flusso: * `graph TD`: Da sopra a sotto * `graph LR`: Da sinistra a destra * `graph BT`: Da basso a sopra * `graph RL`: Da destra a sinistra ### 2. Aggiungere nodi I nodi sono definiti da un ID e una etichetta. ```mermaid graph TD A[Inizio] --> B[Processo] B --> C{Decisione} C -->|Sì| D[Fine] C -->|No| B ``` * `[Testo]`: Nodo rettangolare. * `(Testo)`: Rettangolo arrotondato. * `((Testo))`: Circo. * `{Testo}`: Rombo (Decisione). * `[[Testo]]`: Subroutine. ### 3. Connettere i nodi * `-->`: Punta solida. * `-.->`: Punta a punti. * `==>`: Punta spessa. * `-- Testo -->`: Punta con etichetta. --- ## 🤖 Generazione di diagrammi avanzata con l’intelligenza artificiale Non vuoi scrivere codice? Lascia che l’intelligenza artificiale di NoteRich lo faccia per te. 1. Apri l’**Assistente dell’intelligenza artificiale**. 2. Typca una richiesta come: *“Genera un diagramma di sequenza Mermaid per un cliente che effettua un ordine online.”* 3. L’intelligenza artificiale restituirà un blocco di codice come questo: ```mermaid sequenceDiagram participant Cliente participant Sito web participant Database Cliente->>Sito web: Effettuare l’ordine Sito web->>Database: Verificare l’inventario Database-->>Sito web: Inventario disponibile Sito web-->>Cliente: Ordine confermato ``` 4. Copia il codice o utilizza il pulsante **Inserisci** se disponibile nella tua interfaccia di intelligenza artificiale per aggiungerlo alla tua nota. --- ## 📸 OCR: Scansionate diagrammi scritti a mano o stampati Avete una foto di una lavagna o un diagramma di flusso stampato? Il **Scanner di note di NoteRich (OCR)** può convertirlo in codice Mermaid modificabile. 1. Apri l’**Assistente dell’intelligenza artificiale** e seleziona **Scanner di note (OCR)**. 2. Caricate un’immagine del vostro diagramma scritto a mano o stampato. 3. Nella richiesta, specifica: *“Converti questa immagine in codice di flusso Mermaid.js.”* 4. L’intelligenza artificiale analizzerà la struttura dell’immagine e genererà la sintassi Mermaid corrispondente. 5. Confronta il codice generato nell’editor e regola eventuali errori di riconoscimento. > **Nota:** Per ottenere i migliori risultati, assicuratevi che l’immagine sia chiara e il testo leggibile. I disegni scritti a mano possono richiedere alcune modifiche manuali dopo la conversione. --- ## 🎨 Funzionalità avanzate ### Stilizzazione dei nodi Puoi personalizzare l’aspetto dei nodi specifici utilizzando classi CSS o stili inline. ```mermaid graph LR A[Inizio] --> 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 ``` ### Subgrafi Gruppa i nodi correlati per una migliore organizzazione. ```mermaid graph TD subgraph Frontend A[App React] --> B[Componenti UI] end subgraph Backend C[Server API] --> D[Database] end B --> C ``` ### Diagrammi di sequenza Mermaid non è solo per i flussi di dati. Puoi anche creare diagrammi di sequenza per visualizzare le interazioni tra sistemi. ```mermaid sequenceDiagram participant Utente participant NoteRich participant Server Utente->>NoteRich: Modifica nota NoteRich->>Server: Salva dati Server-->>NoteRich: Conferma salvataggio NoteRich-->>Utente: Aggiorna UI ``` --- ## 💡 Consigli per gli utenti di NoteRich 1. **Evita i caratteri speciali:** Se il testo del nodo contiene caratteri speciali come `[]` o `()`, avvolgi il testo tra virgolette. ```mermaid graph TD A["Nodo con [parentesi]"] --> B["Nodo con (parentesi)"] ``` 2. **Copia come immagine:** Una volta che il diagramma è stato visualizzato, fai clic su di esso per rivelare la barra degli strumenti fluttuante. Usa il pulsante **Copia immagine** per incollare il diagramma in altre applicazioni come Slack, Notion o email. 3. ** scaricare in SVG:** Gli utenti avanzati possono scaricare il diagramma come file SVG di alta qualità per l’uso in presentazioni o pubblicazioni. --- ## ❓ Risoluzione dei problemi * **Il diagramma non viene visualizzato?** Controlla il riquadro di errore nella finestra di visualizzazione. Problemi comuni includono l’assenza di parentesi chiuse `]` o sintassi di punta errata. * **Errori di sintassi?** Assicurati di utilizzare la sintassi corretta della versione Mermaid. NoteRich utilizza la versione stabile di Mermaid.js. Consulta la [documentazione ufficiale](https://mermaid.js.org/intro/) se non sei sicuro. * **Precisione dell’OCR?** Se il risultato dell’OCR non è perfetto, utilizza l’assistente dell’intelligenza artificiale per migliorare il codice. Puoi incollare il risultato approssimativo dell’OCR e chiedere all’intelligenza artificiale di “Correggire la sintassi Mermaid”. --- ## 🏁 Conclusione Mermaid.js in NoteRich trasforma il modo in cui documenti processi e sistemi. Mantenendo i tuoi diagrammi come codice, assicuri che siano sempre aggiornati, facili da modificare e integrati perfettamente con la tua base di conoscenze. Con la generazione dell’intelligenza artificiale e la scansione dell’OCR, creare visualizzazioni complesse non è mai stato così semplice. Inizia a visualizzare le tue idee oggi! ---