---
title: Flux d'Exécution & Traces de Séquences
description: Diagrammes de séquence étape par étape détaillant le routage, la récupération des fichiers, le pipeline et l'indexation MiniSearch.
tags: [vertiwiki, flux, diagramme-sequence, routage, pipeline, execution, francais]
---

# Flux d'Exécution

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

Ce document retrace les flux d'exécution internes de VertiWiki sous forme de diagrammes Mermaid de type `sequenceDiagram`.

---

## 🌊 Flux 1 : Requête du Document & Pipeline de Rendu

Cette séquence montre comment un changement de route hash (`window.location.hash = '#/concepts/architecture.md'`) produit un article affiché à l'écran :

```mermaid
sequenceDiagram
    autonumber
    actor User as Utilisateur / Navigateur
    participant Router as Routeur (src/core/router.ts)
    participant Fetcher as Moteur Fetch (src/main.ts)
    participant Cache as Cache Mémoire (Map)
    participant Pipeline as Pipeline (src/core/pipeline.ts)
    participant Parser as MarkdownParser (src/core/parser.ts)
    participant DOMPurify as Assainisseur DOMPurify
    participant Layout as LayoutManager (src/ui/layout.ts)
    participant Plugins as Plugins Post-Rendu

    User->>Router: Navigation vers #/concepts/architecture.md
    Router->>Router: parseHash(window.location.hash)
    Router->>Fetcher: loadPage('concepts/architecture.md')
    
    alt Contenu en Cache Mémoire
        Fetcher->>Cache: get('concepts/architecture.md')
        Cache-->>Fetcher: Retourne le Markdown brut
    else Contenu non mis en Cache
        Fetcher->>User: HTTP GET /docs/concepts/architecture.md
        User-->>Fetcher: 200 OK (texte Markdown)
        Fetcher->>Cache: set('concepts/architecture.md', rawMarkdown)
    end

    Fetcher->>Pipeline: runBeforeParse(rawMarkdown, context)
    Pipeline-->>Fetcher: Markdown transformé (wikilinks, onglets)

    Fetcher->>Parser: parse(transformedMarkdown)
    Parser->>Parser: Extraction frontmatter YAML & autoCloseFences
    Parser->>Parser: marked.parse(body)
    Parser->>DOMPurify: sanitize(html, allowedTags)
    DOMPurify-->>Parser: Chaîne HTML assainie et sécurisée
    Parser-->>Fetcher: Objet ParsedMarkdown

    Fetcher->>Pipeline: runAfterParse(cleanHtml, context)
    Pipeline-->>Fetcher: Chaîne HTML finale

    Fetcher->>Layout: renderArticle(finalHtml, frontmatter)
    Layout->>Layout: Montage dans le DOM (.verti-article)
    Layout->>Layout: Calcul du sommaire et mise à jour du lien actif

    Fetcher->>Pipeline: runAfterRender(context)
    Pipeline->>Plugins: Exécution de Prism, Mermaid, KaTeX
    Plugins-->>User: Article interactif rendu et affiché
```

---

## 🌐 Flux 2 : Sélecteur de Langue & Préfixes d'URL

Lorsqu'un lecteur change de langue, VertiWiki recalcule le chemin sans recharger l'ensemble de la page :

```mermaid
sequenceDiagram
    autonumber
    actor User as Lecteur
    participant LangChooser as LanguageChooser (src/ui/language-chooser.ts)
    participant Router as Routeur (src/core/router.ts)
    participant NavManager as NavigationTree (src/core/crawl-tree.ts)
    participant Fetcher as Moteur Fetch (src/main.ts)

    User->>LangChooser: Sélection de "Français (fr)"
    LangChooser->>Router: switchLocale('fr')
    Router->>Router: Suppression du préfixe précédent
    Router->>Router: Ajout du préfixe cible ('fr/concepts/architecture.md')
    Router->>Router: Mise à jour window.location.hash = '#/fr/concepts/architecture.md'

    Router->>Fetcher: Déclenchement du rechargement de route
    par Récupération Simultanée des Fichiers Localisés
        Fetcher->>NavManager: Chargement de fr/navigation.md
        NavManager-->>Fetcher: Arborescence localisée
    and Chargement du Document Localisé
        Fetcher->>User: HTTP GET /docs/fr/concepts/architecture.md
        User-->>Fetcher: Texte Markdown en français
    end

    Fetcher->>NavManager: Reconstruction du menu latéral en français
    Fetcher->>Fetcher: Rendu du contenu traduit
```

---

## 🔍 Flux 3 : Recherche Plein Texte MiniSearch

VertiWiki indexe tous les documents directement dans le navigateur :

```mermaid
sequenceDiagram
    autonumber
    actor User as Lecteur
    participant Modal as SearchModal (src/ui/search-modal.ts)
    participant Search as SearchEngine (src/plugins/search.ts)
    participant MiniSearch as Index MiniSearch
    participant Router as Routeur (src/core/router.ts)

    Note over Search,MiniSearch: Indexation Asynchrone en Tâche de Fond
    Search->>MiniSearch: Ajout du document {id, title, path, content, locale}

    User->>Modal: Pression sur ⌘K ou /
    Modal->>Modal: Affichage de la modale et focus
    User->>Modal: Saisie du terme "sanitizer"
    
    Modal->>Search: search("sanitizer", {locale: "fr"})
    Search->>MiniSearch: Requête avec tolérance aux fautes (fuzzy)
    MiniSearch-->>Search: Résultats ordonnés
    Search->>Search: Extraction des extraits mis en valeur
    Search-->>Modal: Liste de SearchResultItem
    Modal->>Modal: Affichage des résultats

    User->>Modal: Clic sur un résultat
    Modal->>Modal: Fermeture de la modale
    Modal->>Router: navigateTo(result.path)
```

---

## 🔗 Prochaines Étapes

- Examinez les composants internes dans [Architecture du Moteur](core-architecture.md).
- Découvrez la gestion des styles dans [Interface & Moteur de Thèmes](ui-and-theming.md).
- Parcourez les extensions dans [Plugins & Extensions](plugins-and-extensions.md).