Diagrammes Mermaid

Démonstration du rendu Mermaid dans OntoWave : diagrammes de flux, séquences et graphes.

Diagramme de flux

flowchart TD
    A[Fichier Markdown] --> B{Contient Mermaid ?}
    B -- Oui --> C[Chargement Mermaid.js]
    B -- Non --> D[Rendu HTML direct]
    C --> E[Rendu SVG]
    D --> E
    E --> F[Affichage dans le navigateur]

Diagramme de séquence

sequenceDiagram
    participant U as Utilisateur
    participant B as Navigateur
    participant M as Mermaid CDN

    U->>B: Ouvre la page
    B->>B: Parse le Markdown
    B->>M: Charge mermaid.min.js
    M-->>B: Bibliothèque chargée
    B->>B: Rend les blocs mermaid
    B-->>U: Affiche les diagrammes

Graphe simple

graph LR
    OntoWave --> Markdown
    OntoWave --> Mermaid
    OntoWave --> PlantUML
    OntoWave --> KaTeX

Limite connue

Mermaid est chargé depuis le CDN de manière asynchrone — les diagrammes apparaissent après un court délai
Les thèmes Mermaid ne s’adaptent pas automatiquement au thème sombre/clair d’OntoWave

Mermaid Diagrams

Demonstration of Mermaid rendering in OntoWave: flowcharts, sequence diagrams and graphs.

Flowchart

flowchart TD
    A[Markdown File] --> B{Contains Mermaid?}
    B -- Yes --> C[Load Mermaid.js]
    B -- No --> D[Direct HTML render]
    C --> E[SVG render]
    D --> E
    E --> F[Display in browser]

Sequence Diagram

sequenceDiagram
    participant U as User
    participant B as Browser
    participant M as Mermaid CDN

    U->>B: Opens the page
    B->>B: Parses Markdown
    B->>M: Loads mermaid.min.js
    M-->>B: Library loaded
    B->>B: Renders mermaid blocks
    B-->>U: Displays diagrams

Simple Graph

graph LR
    OntoWave --> Markdown
    OntoWave --> Mermaid
    OntoWave --> PlantUML
    OntoWave --> KaTeX

Known Limitations

Mermaid is loaded asynchronously from CDN — diagrams appear after a brief delay
Mermaid themes do not automatically adapt to OntoWave’s dark/light theme