MarkNode esegue il rendering dei diagrammi direttamente nell’anteprima. Scrivi un diagramma in un blocco di codice delimitato usando la sintassi Mermaid — un modo testuale per descrivere diagrammi di flusso, diagrammi di sequenza e altro ancora — e MarkNode lo disegna come immagine al posto del codice, interamente offline.
Scrivere un diagramma
Usa un blocco di codice delimitato con mermaid come identificatore di linguaggio:
```mermaid
flowchart TD
Start[Start] --> Decision{Need a diagram?}
Decision -->|Yes| Draw[Write it in Markdown]
Decision -->|No| Skip[Keep writing prose]
Draw --> Done[Done]
Skip --> Done
```L’anteprima sostituisce il blocco di codice con il diagramma di flusso renderizzato. Il sorgente Markdown resta invariato — MarkNode ne disegna soltanto un’immagine; se vuoi modificare il diagramma, modifichi il testo mermaid e l’immagine si aggiorna.
Tipi di diagramma con stile completo
Diagrammi di flusso, diagrammi di sequenza, diagrammi delle classi e diagrammi di stato ricevono il trattamento completo di MarkNode — disposti e composti tipograficamente in armonia con il resto del documento, non semplicemente inseriti come immagini generiche.
Un diagramma di sequenza, per esempio:
```mermaid
sequenceDiagram
participant Writer
participant MarkNode
Writer->>MarkNode: Write a mermaid code block
MarkNode-->>Writer: Render diagram in preview
```
I diagrammi delle classi e di stato usano lo stesso delimitatore mermaid con le rispettive parole chiave Mermaid (classDiagram, stateDiagram-v2) e vengono renderizzati con lo stesso livello di cura.
Altri tipi di diagramma
Molti altri tipi di diagramma Mermaid — inclusi i grafici a torta e i diagrammi di Gantt — vengono già renderizzati oggi in MarkNode, come veri diagrammi con lo stile del tuo tema anziché come codice. Lo stesso livello di cura nella disposizione personalizzata riservato ai diagrammi di flusso, di sequenza, delle classi e di stato è previsto per questi tipi di diagramma in un aggiornamento futuro.
In sintonia con il tuo tema
Nell’anteprima, i diagrammi seguono il tema dell’applicazione del documento. Cambia tema e tutti i diagrammi presenti sullo schermo si riadattano insieme al resto dell’anteprima — non c’è nulla da configurare separatamente.
Le anteprime Quick Look seguono invece l’aspetto chiaro/scuro di sistema del tuo Mac. I diagrammi di flusso, di sequenza, delle classi e di stato si adattano in entrambi i casi; i diagrammi a torta e di Gantt attualmente vengono renderizzati con un’unica palette in Quick Look.
Dove compaiono i diagrammi
I diagrammi vengono renderizzati su ogni superficie che mostra il Markdown renderizzato:
- Il pannello di anteprima agganciato
- La finestra di anteprima sganciata
- Quick Look di macOS (premi Spazio su un file Markdown nel Finder — vedi Anteprime Quick Look)
- L’esportazione DOCX, come immagine incorporata
Errori
Se la sintassi Mermaid di un diagramma contiene un errore — un tipo di diagramma non riconosciuto, un refuso nella sintassi — MarkNode mostra il blocco di codice delimitato originale anziché un’immagine vuota o corrotta. Il resto del documento viene renderizzato normalmente; è interessato solo quel singolo blocco. Correggi il sorgente e il diagramma comparirà al successivo aggiornamento dell’anteprima.
Sintassi supportata
MarkNode segue la sintassi del progetto Mermaid stesso. Per la gamma completa di tipi di diagramma e opzioni, consulta la documentazione ufficiale di Mermaid — tutto ciò che è valido lì è quanto MarkNode tenta di renderizzare.