Visionneuse et éditeur Markdown avec Mermaid

Document Markdown

Écrivez, collez ou ouvrez un fichier Markdown et voyez l'aperçu instantanément, comme sur GitHub : tableaux, listes de tâches, notes de bas de page, alertes, diagrammes Mermaid, formules LaTeX et code coloré. Vous pouvez ensuite le télécharger en HTML ou l'enregistrer en PDF. Tout est traité dans votre navigateur.

Table des matières

Défilement synchronisé

Respecter les retours à la ligne

---
title: "Document d'exemple"
tags: [markdown, mermaid, katex]
---

# Document d'exemple

Modifiez ce texte et voyez le résultat instantanément. Prend en charge le **gras**, l'*italique*, le ~~barré~~, le `code`, les liens comme https://ittools.tech et les notes de bas de page[^1].

> [!NOTE]
> Les alertes GitHub fonctionnent aussi : essayez TIP, IMPORTANT, WARNING ou CAUTION.

## Tâches et tableaux

- [x] Rédiger le README
- [ ] Ajouter un diagramme

| 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();
}
```

## Diagrammes et formules

```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]: Tout est traité dans votre navigateur ; le document n'est envoyé à aucun serveur.

0 mots · 0 lignes · 0 min de lecture

Comment ça marche

Markdown est le format des README, de la documentation technique, des wikis et des notes de presque tous les outils de développement, mais chaque plateforme y ajoute ses propres extensions. Cette visionneuse suit GitHub Flavored Markdown (GFM), la variante la plus répandue : en plus des bases, elle affiche les tableaux, les listes de tâches, le texte barré, les liens automatiques, les notes de bas de page et les alertes NOTE, TIP, IMPORTANT, WARNING et CAUTION.

Les blocs de code marqués mermaid deviennent des diagrammes (flux, séquence, classes, états, entité-relation, Gantt, Git et plus), les formules entre signes $ sont rendues avec KaTeX et le reste du code est coloré selon le langage indiqué. Si le document commence par un bloc YAML entre des lignes ---, comme ceux de Jekyll, Hugo ou Docusaurus, il s'affiche dans un tableau à part.

Le document ne quitte pas votre navigateur. Le HTML qu'il contient est nettoyé avant l'affichage : ouvrir un README tiers n'exécute donc aucun script, et les bibliothèques de diagrammes et de formules ne sont téléchargées que si le document les utilise.

Exemples

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

Commit → Build → DeployUn bloc de code avec le langage mermaid est dessiné comme un diagramme. S'il contient une erreur de syntaxe, le code reste visible avec le message de Mermaid en dessous.

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

#getting-started · #api-v20-beta · #getting-started-1Les titres reçoivent le même id que sur GitHub : minuscules, espaces remplacés par des tirets, sans ponctuation et avec un numéro à la fin s'ils se répètent. Ainsi, un lien [texte](#getting-started) fonctionne de la même façon ici et dans le dépôt.

Line one
Line two

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

En Markdown standard, un simple retour à la ligne ne coupe pas le paragraphe ; il faut laisser une ligne vide ou terminer la ligne par deux espaces. Les commentaires et issues GitHub, eux, le respectent : pour obtenir ce rendu, activez Respecter les retours à la ligne.

> [!WARNING]
> Breaking change in v3.

⚠ Warning — Breaking change in v3.Une citation qui commence par [!NOTE], [!TIP], [!IMPORTANT], [!WARNING] ou [!CAUTION] s'affiche comme une alerte colorée, comme sur GitHub. Sur les plateformes qui ne les prennent pas en charge, elle apparaît comme une citation ordinaire.

Cas d'usage

Vérifier le rendu d'un README ou d'un CHANGELOG avant de l'envoyer dans le dépôt.
Lire un fichier .md téléchargé sans installer d'éditeur : ouvrez-le avec le bouton ou glissez-le.
Tester des diagrammes Mermaid d'architecture, de flux ou de séquence et corriger la syntaxe grâce à l'aperçu en direct.
Convertir de la documentation en page HTML autonome ou en PDF pour la partager avec des personnes qui n'utilisent pas Git.
Rédiger des notes ou de la documentation technique avec des formules mathématiques en notation LaTeX.
Afficher avec sa mise en forme, ses tableaux et ses blocs de code le texte Markdown renvoyé par un assistant IA.

Questions fréquentes

Quels types de diagrammes Mermaid peut-on dessiner ?

Tous ceux que propose Mermaid : flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, journey, gitGraph, mindmap, timeline, quadrantChart, sankey, xychart, block, architecture et kanban, entre autres. Les diagrammes utilisent des couleurs claires ou sombres selon le thème du site et sont dessinés en mode strict : le texte des étiquettes ne peut ni injecter de HTML ni exécuter de code au clic.

Comment écrire une formule mathématique ?

Entre signes $ pour une formule en ligne, comme $a^2 + b^2 = c^2$, et entre $$ ou dans un bloc de code avec le langage math pour une formule centrée sur sa propre ligne. La syntaxe est celle de LaTeX prise en charge par KaTeX. Pour écrire un signe $ littéral, comme dans un prix, faites-le précéder d'une barre oblique inverse ; de toute façon, « $5 et $10 » n'est pas interprété comme une formule, car le second $ est précédé d'une espace et suivi d'un chiffre.

Puis-je utiliser du HTML dans le Markdown ?

Oui, comme sur GitHub : des balises comme details et summary pour les sections dépliables, kbd pour les touches, sub et sup, img avec une taille ou p avec align. Avant l'affichage, les scripts, les attributs d'événement comme onclick, les liens javascript: et les balises style et form sont supprimés : un document tiers ne peut donc ni exécuter de code ni modifier le reste de la page.

Comment le convertir en PDF ?

Avec Exporter puis Imprimer ou enregistrer en PDF, la boîte de dialogue d'impression s'ouvre avec le document seul, sans l'interface du site, et vous y choisissez Enregistrer au format PDF. Les tableaux, les blocs de code et les diagrammes évitent d'être coupés entre deux pages. Si vous préférez un fichier à publier, Télécharger .html génère une page autonome avec les styles inclus.

Pourquoi une image avec un chemin relatif ne s'affiche-t-elle pas ?

Parce que la visionneuse n'a pas accès aux autres dossiers du dépôt : un chemin comme ./docs/logo.png n'existe que sur votre disque ou sur GitHub. Les images avec une adresse complète, commençant par https://, s'affichent sans problème.