::: info
Cos'è Mermaid?
È un linguaggio di scripting basato su JavaScript che renderizza testo in diagrammi (Flowcharts, Sequence, Gantt, ER, etc.). È supportato nativamente da Wiki.js, GitHub, GitLab e Notion.
:::
Per evitare l'errore che abbiamo visto (incompatibilità di versione), è fondamentale usare i tool giusti per testare i grafici prima di pubblicarli.
È il tool ufficiale online: Mermaid.live.
Dato che usi VS Code, queste sono obbligatorie:
Ctrl+Shift+V).Per esportare i tuoi documenti Markdown con grafici in formati "ufficiali":
mermaid-filter, puoi trasformare il codice Mermaid in immagini all'interno di PDF o Word.mmdc): Un tool da riga di comando che trasforma file .mmd in immagini PNG, SVG o PDF.Il tipo di grafico più usato è il Flowchart. Ecco le regole base:
Ogni grafico inizia con graph seguito dalla direzione:
TD (Top Down): Dall'alto verso il basso.LR (Left to Right): Da sinistra a destra.Il testo fuori dalle parentesi è l'ID del nodo, quello dentro è l'etichetta visualizzata.
Dato che la tua Wiki usa una versione meno recente, ecco i "comandamenti" per non rompere il rendering:
subgraph dentro un altro.direction nei Subgraph: Non usare il comando direction dentro i riquadri; usa solo la direzione globale all'inizio del file.-->. Le frecce bidirezionali <--> o quelle con stili complessi sono state introdotte o migliorate nelle versioni successive.Ecco un esempio che puoi copiare nella tua Wiki per testare le tue nuove conoscenze:
Se devi produrre un documento professionale partendo dal tuo Markdown:
panflute (una libreria per gestire i filtri Pandoc) per intercettare i blocchi Mermaid e convertirli in immagini tramite la CLI di Mermaid prima di generare il DOCX.