grok-mermaid: diagrammi Mermaid in box art Unicode, direttamente nel browser

Simon Willison ha pubblicato grok-mermaid, un tool che converte la sintassi dei diagrammi Mermaid in box art Unicode in stile terminale, renderizzata interamente nel browser tramite WebAssembly.

L’origine è la parte interessante. Esplorando il codice del Grok CLI coding agent, appena rilasciato in open source, Willison ha trovato in xai-grok-markdown/src/mermaid.rs un “self-contained terminal renderer for Mermaid diagrams” scritto in Rust. Da lì l’idea: compilarlo per il browser via WebAssembly e vedere cosa succede. Il tool risultante è stato costruito con un prompt eseguito in Claude Code for web.

Cosa fa

Il supporto copre flowchart, sequence, state, class ed ER diagram. Gli altri tipi di diagramma ricadono su un listing sorgente incorniciato — quindi non falliscono, ma non vengono renderizzati come box art. Si può regolare la larghezza dell’output, copiare il diagramma renderizzato come testo, oppure generare un link condivisibile.

Perché può servire a chi lavora con i dati

Nessuno ha bisogno di un altro renderer Mermaid: ne esistono decine, e la maggior parte produce immagini. Il valore qui è nel formato di output. Un diagramma in box art Unicode è testo puro: entra in un README senza allegati, in un commento di codice, in un messaggio, in un log. Sopravvive al copia-incolla e finisce nel diff di Git in modo leggibile.

Per documentare un DAG di orchestrazione, il flusso di una pipeline o le dipendenze fra layer di un data model, avere la rappresentazione come testo versionato ha vantaggi pratici concreti rispetto a un PNG che nessuno può modificare senza rigenerarlo. E dato che il rendering avviene interamente nel browser, il diagramma non lascia la macchina — dettaglio non irrilevante quando lo schema descrive architetture interne.

Il pattern, più del tool

Vale la pena notare come è nato: un componente utile, sepolto dentro il codebase di un progetto molto più grande, estratto e reso accessibile in un contesto diverso. L’apertura del codice del Grok CLI ha reso possibile individuarlo; WebAssembly ha reso banale riusarlo fuori dal terminale, senza riscritture. È un promemoria che vale anche per i propri repository: nelle codebase interne ci sono spesso utility autonome che avrebbero senso come strumento a sé, se qualcuno si prendesse la briga di isolarle.

In sintesi

• grok-mermaid converte Mermaid in box art Unicode via WebAssembly, con rendering interamente client-side.
• Supporta flowchart, sequence, state, class ed ER diagram; gli altri tipi ricadono su un listing sorgente incorniciato.
• Il codice originale è il renderer Rust trovato nel Grok CLI open-sourced: un buon esempio di componente riusabile estratto da un progetto più grande.

Fonte: Tool: Mermaid to Unicode box art (grok-mermaid) — https://simonwillison.net/2026/Jul/16/grok-mermaid/