Crea diagrammi di flusso, sequenza e modelli ER con Mermaid in locale nel browser.
La progettazione di architetture software, diagrammi di sequenza e modelli relazionali con editor vettoriali manuali è spesso laboriosa e difficile da sottoporre a versioning. L'Editor Testo in Diagramma trasforma istruzioni dichiarative e leggibili in grafica vettoriale professionale ad alta definizione grazie al motore ufficiale Mermaid.js integrato nel browser.
Scenario Applicativo Reale: Un architetto software deve documentare l'interazione tra frontend, microservizi e gateway di pagamento. Scrivendo una dichiarazione di sequenza (ad es. Frontend->>Gateway: POST /ordine), il diagramma si aggiorna istantaneamente in anteprima interattiva. Gli errori di sintassi vengono evidenziati con precisione di riga e il diagramma finale può essere esportato come file vettoriale SVG o raster PNG ad alta densità (2× per presentazioni e report).
Tutti i calcoli avvengono in memoria locale e una sandbox DOMPurify rigorosa elimina script attivi e tag HTML pericolosi per prevenire rischi XSS.
Pipeline Diagrammi = Testo Dichiarativo → Parser Sintattico(AST) → Layout Deterministico(Dagre/D3) → Sintesi Vettoriale SVG → Sanitizzazione(DOMPurify) → Esportazione 2×/3×
Il testo strutturato viene compilato in un albero sintattico, posizionato mediante algoritmi di layout geometrico, igienizzato e rasterizzato a risoluzioni ultra nitide.
graph TD (dall'alto in basso) per alberi decisionali e graph LR (da sinistra a destra) per catene di processo.