Visualizzatore ed editor Markdown con Mermaid

Documento Markdown

Scrivi, incolla o apri un file Markdown e guarda subito l'anteprima, come su GitHub: tabelle, liste di attività, note a piè di pagina, avvisi, diagrammi Mermaid, formule LaTeX e codice evidenziato. Poi puoi scaricarlo come HTML o salvarlo in PDF. Tutto viene elaborato nel tuo browser.

Indice

Scorrimento sincronizzato

Rispetta gli a capo

---
title: "Documento di esempio"
tags: [markdown, mermaid, katex]
---

# Documento di esempio

Modifica questo testo e guarda subito il risultato. Supporta **grassetto**, *corsivo*, ~~barrato~~, `codice`, link come https://ittools.tech e note a piè di pagina[^1].

> [!NOTE]
> Anche gli avvisi di GitHub funzionano: prova con TIP, IMPORTANT, WARNING o CAUTION.

## Attività e tabelle

- [x] Scrivere il README
- [ ] Aggiungere un diagramma

| HTTP | Endpoint | Status |
|:-------|:-----|-------:|
| `GET` | `/api/users` | 200 |
| `POST` | `/api/users` | 201 |
| `DELETE` | `/api/users/42` | 204 |

```typescript
async function getUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) throw new Error(response.statusText);
  return response.json();
}
```

## Diagrammi e formule

```mermaid
sequenceDiagram
    participant C as App
    participant A as API
    participant D as DB
    C->>A: GET /api/users/42
    A->>D: SELECT * FROM users WHERE id = 42
    D-->>A: row
    A-->>C: 200 OK (JSON)
```

```mermaid
flowchart LR
    A[Commit] --> B{Tests OK?}
    B -- ✓ --> C[Build]
    B -- ✗ --> D[Fix]
    D --> A
    C --> E[Deploy]
```

$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

Euler: $e^{i\pi} + 1 = 0$

</details>

[^1]: Tutto viene elaborato nel tuo browser; il documento non viene inviato a nessun server.

0 parole · 0 righe · 0 min di lettura

Come funziona

Markdown è il formato dei README, della documentazione tecnica, delle wiki e delle note di quasi ogni strumento di sviluppo, ma ogni piattaforma aggiunge le proprie estensioni. Questo visualizzatore segue GitHub Flavored Markdown (GFM), la variante più diffusa: oltre alle basi, mostra tabelle, liste di attività, testo barrato, link automatici, note a piè di pagina e gli avvisi NOTE, TIP, IMPORTANT, WARNING e CAUTION.

I blocchi di codice marcati come mermaid diventano diagrammi (flusso, sequenza, classi, stati, entità-relazione, Gantt, Git e altro), le formule tra segni $ vengono disegnate con KaTeX e il resto del codice viene evidenziato in base al linguaggio indicato. Se il documento inizia con un blocco YAML tra righe ---, come quelli di Jekyll, Hugo o Docusaurus, viene mostrato come una tabella a parte.

Il documento non esce dal tuo browser. L'HTML che contiene viene ripulito prima di mostrarlo, quindi aprire un README di terzi non esegue script, e le librerie per diagrammi e formule vengono scaricate solo se il documento le usa.

Esempi

```mermaid
flowchart LR
  A[Commit] --> B[Build] --> C[Deploy]
```

Commit → Build → DeployUn blocco di codice con il linguaggio mermaid viene disegnato come diagramma. Se contiene un errore di sintassi, il codice resta visibile con il messaggio di Mermaid sotto.

## Getting Started
## API v2.0 (beta)
## Getting Started

#getting-started · #api-v20-beta · #getting-started-1Le intestazioni ricevono lo stesso id che assegna GitHub: minuscole, spazi sostituiti da trattini, senza punteggiatura e con un numero alla fine se si ripetono. Così un link [testo](#getting-started) funziona allo stesso modo qui e nel repository.

Line one
Line two

<p>Line one
Line two</p>  →  <p>Line one<br>Line two</p>

Nel Markdown standard un semplice a capo non interrompe il paragrafo: bisogna lasciare una riga vuota o terminare la riga con due spazi. I commenti e le issue di GitHub invece lo rispettano: per vederlo così, attiva Rispetta gli a capo.

> [!WARNING]
> Breaking change in v3.

⚠ Warning — Breaking change in v3.Una citazione che inizia con [!NOTE], [!TIP], [!IMPORTANT], [!WARNING] o [!CAUTION] viene mostrata come avviso colorato, come su GitHub. Sulle piattaforme che non li supportano appare come una citazione normale.

Casi d'uso

Controllare come apparirà un README o un CHANGELOG prima di caricarlo nel repository.
Leggere un file .md scaricato senza installare un editor: aprilo con il pulsante o trascinalo.
Provare diagrammi Mermaid di architettura, flussi o sequenze e correggere la sintassi con l'anteprima dal vivo.
Convertire la documentazione in una pagina HTML autonoma o in un PDF per condividerla con chi non usa Git.
Scrivere appunti o documentazione tecnica con formule matematiche in notazione LaTeX.
Vedere il testo Markdown restituito da un assistente IA con la sua formattazione, tabelle e blocchi di codice.

Domande frequenti

Quali tipi di diagrammi Mermaid si possono disegnare?

Tutti quelli inclusi in Mermaid: flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, journey, gitGraph, mindmap, timeline, quadrantChart, sankey, xychart, block, architecture e kanban, tra gli altri. I diagrammi usano colori chiari o scuri in base al tema del sito e vengono disegnati in modalità rigorosa: il testo delle etichette non può iniettare HTML né eseguire codice al clic.

Come scrivo una formula matematica?

Tra segni $ per una formula in linea, come $a^2 + b^2 = c^2$, e tra $$ o in un blocco di codice con il linguaggio math per una formula centrata su una riga a sé. La sintassi è quella di LaTeX supportata da KaTeX. Per scrivere un segno $ letterale, come in un prezzo, anteponi una barra rovesciata; comunque, “$5 e $10” non viene interpretato come formula perché il secondo $ ha uno spazio prima e un numero dopo.

Posso usare HTML all'interno del Markdown?

Sì, come su GitHub: tag come details e summary per sezioni espandibili, kbd per i tasti, sub e sup, img con dimensioni o p con align. Prima di mostrarlo vengono rimossi gli script, gli attributi di evento come onclick, i link javascript: e i tag style e form, quindi un documento di terzi non può eseguire codice né modificare il resto della pagina.

Come lo converto in PDF?

Con Esporta e Stampa o salva in PDF si apre la finestra di stampa con il solo documento, senza l'interfaccia del sito, e lì scegli Salva come PDF. Tabelle, blocchi di codice e diagrammi evitano di essere spezzati tra le pagine. Se preferisci un file da pubblicare, Scarica .html genera una pagina autonoma con gli stili inclusi.

Perché un'immagine con percorso relativo non si vede?

Perché il visualizzatore non ha accesso alle altre cartelle del repository: un percorso come ./docs/logo.png esiste solo sul tuo disco o su GitHub. Le immagini con indirizzo completo, che iniziano con https://, vengono mostrate senza problemi.