Obsidian, ecco Pele: diagrammi diventano fino a 500 volte più veloci

Pele è una nuova libreria open source sviluppata da kepano, creatore di Obsidian, per convertire diagrammi scritti con la sintassi Mermaid in grafica vettoriale SVG.

Il progetto punta a rendere la visualizzazione più rapida, personalizzabile e sicura, affrontando alcuni limiti riscontrati negli strumenti già disponibili. La libreria è pensata per gli sviluppatori che integrano diagrammi e grafici nelle applicazioni web, ma può interessare anche chi utilizza strumenti di documentazione tecnica e organizzazione delle informazioni. Il codice è pubblicamente disponibile e può essere provato attraverso il sito ufficiale, che mette a disposizione un ambiente interattivo per confrontarne il funzionamento.

Pele punta su prestazioni, personalizzazione e sicurezza

Pele viene presentato come alternativa leggera a Mermaid.js, sottolineando una velocità di rendering dichiarata da 100 a 500 volte superiore e un pacchetto software sei volte più piccolo. Il progetto non richiede dipendenze dirette, caratteristica che contribuisce a ridurre il peso dell’integrazione nelle applicazioni.

La differenza è verificabile anche attraverso il playground ufficiale, dove è possibile confrontare i risultati prodotti dai due renderer. Nell’esempio mostrato dalla fonte, Mermaid impiega 59 millisecondi per generare un diagramma, mentre Pele completa l’operazione in 0,3 millisecondi. Si tratta di una misurazione riferita a quella specifica prova, non di una garanzia valida per qualsiasi grafico o dispositivo.

Un altro elemento centrale riguarda la personalizzazione grafica. Pele permette di modificare l’aspetto dei diagrammi mediante variabili CSS, intervenendo su colori, sfondi, bordi, caratteri tipografici e forme. Gli sviluppatori possono così adattare la rappresentazione visiva allo stile dell’applicazione senza dover intervenire direttamente sulla struttura del diagramma.

La libreria supporta inoltre layout responsivi, progettati per adattarsi alle dimensioni del contenitore e agli schermi degli smartphone. Questa caratteristica è utile nelle interfacce in cui i grafici devono rimanere leggibili anche su display ridotti.

Perché Pele considera la sicurezza una priorità

La scelta di sviluppare un renderer alternativo non nasce soltanto dalla ricerca di prestazioni superiori. Nelle dichiarazioni riportate da GIGAZINE, kepano individua nella sicurezza un’importante motivazione del progetto, facendo riferimento ai rischi associati alla gestione dei diagrammi e all’evoluzione di Mermaid.js.

Pele genera elementi SVG, testi, collegamenti e immagini, evitando però di trasformare il contenuto in script eseguibili, gestori di eventi o etichette HTML. Le callback JavaScript vengono ignorate e le istruzioni associate ai clic non vengono eseguite. Anche gli indirizzi ammessi sono limitati a protocolli specifici: per i collegamenti sono consentiti HTTP, HTTPS, mailto e tel, mentre le immagini possono utilizzare soltanto HTTP e HTTPS.

La compatibilità comprende le tipologie di diagrammi presenti in Mermaid 12.1.0, tra cui diagrammi di flusso, sequenza, classe, stato, entità-relazioni, diagrammi di Gantt, mappe mentali, timeline e rappresentazioni architetturali. Il progetto può quindi essere valutato in diversi contesti di sviluppo, dalla documentazione dei sistemi alla visualizzazione di processi complessi.

Pele è distribuito con licenza MIT ed è disponibile su GitHub. Gli sviluppatori possono integrarlo nei propri progetti tramite npm oppure caricarlo da un CDN. La funzione render() restituisce il diagramma SVG, mentre mount() gestisce anche l’inserimento nell’elemento della pagina, il caricamento dei caratteri CSS e l’adattamento alla larghezza disponibile.