---
title: Système de Plugins & Extensions
description: Présentation du système de plugins de VertiWiki et des extensions intégrées : MiniSearch, Mermaid, KaTeX, Callouts et Lightbox.
tags: [vertiwiki, plugins, extensions, minisearch, mermaid, katex, callouts, francais]
---

# Système de Plugins & Extensions

> For the complete documentation index and agent navigation, see [llms.txt](/llms.txt).

VertiWiki s'étend au moyen d'un système modulaire de plugins enregistrés dans son `Pipeline`. Chaque plugin peut s'insérer dans les phases `beforeParse`, `afterParse` et `afterRender`.

---

## 🔌 Catalogue des Plugins Intégrés

| Plugin | Étape du Pipeline | Description |
| :--- | :--- | :--- |
| **Search (`search.ts`)** | `afterRender` | Indexation plein texte en mémoire vive avec MiniSearch. |
| **Mermaid (`mermaid.ts`)** | `afterRender` | Rendu de diagrammes de flux, diagrammes de séquence et modèles C4. |
| **Math (`math.ts`)** | `afterRender` | Formatage de formules mathématiques LaTeX via KaTeX. |
| **Callouts (`callouts.ts`)** | `beforeParse` | Transformation des citations `> [!NOTE]` en blocs visuels colorés. |
| **Tabs (`tabs.ts`)** | `beforeParse` | Onglets synchronisés multi-langages (`::: tabs`). |
| **Details (`details.ts`)** | `beforeParse` | Sections accordéons dépliables (`::: details`). |
| **Lightbox (`lightbox.ts`)** | `afterRender` | Affichage plein écran pour images et diagrammes. |
| **AEO (`aeo.ts`)** | `afterRender` | Métadonnées Schema.org JSON-LD et découverte IA. |
| **Analytics (`analytics.ts`)** | `afterRender` | Télémétrie respectueuse de la vie privée. |

---

## 🔍 1. Moteur de Recherche Côté Client (`src/plugins/search.ts`)

Sans dépendance vis-à-vis d'un serveur ou d'exports JSON lourds :
1. **Indexation en Arrière-Plan** : Au fil de la navigation, `SearchEngine` alimente une instance en mémoire de `MiniSearch`.
2. **Filtrage par Langue** : Les requêtes sont circonscrites à la langue active (`en`, `ro`, `fr`).
3. **Recherche Floue & Extraits** : Tolère les fautes de frappe (`fuzzy: 0.2`) et fournit des extraits surlignés.

```typescript
export class SearchEngine {
  public addDocument(doc: SearchDocument): void;
  public search(query: string, options?: { locale?: string }): SearchResultItem[];
}
```

---

## 📊 2. Diagrammes & Mathématiques

### Moteur Mermaid (`src/plugins/mermaid.ts`)
- Détection automatique du mode sombre ou clair.
- Assainissement SVG avec DOMPurify conservant `<foreignObject>` et `<style>`.

### Formules KaTeX (`src/plugins/math.ts`)
- Rendu en ligne `\( ... \)` ou `$...$` (avec délimitation stricte sans espaces contigus pour éviter les collisions monétaires) et en bloc `\[ ... \]` ou `$$...$$`.
- Polices WOFF2 optimisées pour limiter la taille du paquet.
- Évite les interférences de coloration syntaxique sur les blocs mathématiques.

### Visionneuse d'Images (Lightbox) (`src/plugins/lightbox.ts`)
- Fournit une vue agrandie modale pour les schémas et captures de la documentation.
- Exclut automatiquement les images insérées dans des liens actifs (`img:not(a img)`), préservant la navigation sur les bannières et badges.

---

## 📑 3. Éléments Interactifs de Contenu

### Encadrés d'Alerte (Callouts) (`src/plugins/callouts.ts`)
```markdown
> [!NOTE]
> Remarque informative.

> [!TIP]
> Conseil de bonne pratique ou recommandation.

> [!IMPORTANT]
> Prérequis indispensable ou étape critique.

> [!WARNING]
> Problème potentiel à surveiller.

> [!CAUTION]
> Action à risque pouvant entraîner des pertes de données.
```

### Onglets de Code Synchronisés (`src/plugins/tabs.ts`)
````markdown
::: tabs
== cURL
```bash
curl -X GET https://api.example.com/health
```
== Python
```python
import requests
requests.get("https://api.example.com/health")
```
:::
````

---

## 🤖 4. Optimisation pour Agents IA (AEO) (`src/plugins/aeo.ts`)

- **Balisage IA** : Injection de `<link rel="help" href="llms.txt">` dans l'en-tête.
- **Microdonnées** : Construction de graphes `TechArticle` et `BreadcrumbList` avec détection dynamique de la langue active (`inLanguage`).
- **Copie IA** : Action dédiée pour exporter le document Markdown vers le presse-papier.

---

## 🔗 Prochaines Étapes

- Consultez la conception du système dans [Architecture du Système](architecture.md).
- Paramétrez le wiki dans [Aperçu de la Configuration](../configuration/overview.md).
- Examinez les types dans le [Catalogue API TypeScript](../reference/api.md).