Exemples Mermaid Avancés

← Retour aux exemples Markdown

Utilisez ces modèles comme point de départ pour vos propres diagrammes.

Organigramme de décision

flowchart TD
    Start([Début]) --> Input[/Saisie des données/]
    Input --> Process{Traiter ?}
    Process -->|Oui| Execute[Exécuter la tâche]
    Process -->|Non| Skip[Ignorer]
    Execute --> Check{Réussite ?}
    Check -->|Oui| Success[✅ Réussite]
    Check -->|Non| Retry{Réessayer ?}
    Retry -->|Oui| Execute
    Retry -->|Non| Fail[❌ Échec]
    Skip --> End([Fin])
    Success --> End
    Fail --> End

Diagramme d'états

stateDiagram-v2
    [*] --> Attente
    Attente --> Chargement: Importation
    Chargement --> Traitement: Fichiers chargés
    Traitement --> Enregistrement: Validés
    Enregistrement --> Reussite: Enregistrés
    Enregistrement --> Erreur: Échec
    Reussite --> Attente: Terminer
    Erreur --> Attente: Réessayer
    Erreur --> [*]: Annuler

Chronologie

timeline
    title Développement du projet
    section Phase 1
        Préparation : Configuration du projet
                    : Installation des dépendances
    section Phase 2
        IndexedDB : Mise en place de la base de données
                  : Tests de persistance
    section Phase 3
        Composants : Création des composants
                   : Intégration de l'interface
    section Phase 4
        Tests : Tests fonctionnels
              : Tests hors ligne
    section Phase 5
        Publication : Build de production
                    : Distribution

Diagramme entité-association

erDiagram
    FILE ||--o{ FOLDER : appartient_a
    FILE {
        int id PK
        string path
        string name
        text content
        datetime createdAt
        datetime updatedAt
    }
    FOLDER {
        int id PK
        string path
        string name
    }
    USER ||--o{ FILE : cree
    USER {
        int id PK
        string name
    }

Diagramme de Gantt

gantt
    title Calendrier du projet
    dateFormat YYYY-MM-DD
    section Planification
    Définir les besoins       :a1, 2025-10-01, 3d
    Créer le prototype        :a2, after a1, 2d
    section Développement
    Préparer le projet        :b1, 2025-10-06, 1d
    Mettre en place IndexedDB :b2, after b1, 2d
    Créer les composants      :b3, after b2, 3d
    Intégrer l'interface      :b4, after b3, 2d
    section Tests
    Tests unitaires           :c1, after b4, 2d
    Tests d'intégration       :c2, after c1, 2d
    section Publication
    Build de production       :d1, after c2, 1d
    Distribution              :d2, after d1, 1d

Carte mentale

mindmap
  root((Raziel.MD))
    Fonctions
      Importation
        Glisser-déposer
        Sélection de fichier
        Sélection de dossier
      Lecture
        Markdown
        Diagrammes Mermaid
        Coloration syntaxique
      Stockage
        IndexedDB
        Utilisation hors ligne
        PWA
    Technologie
      Interface
        Vue 3
        TypeScript
        TailwindCSS
      Bibliothèques
        Marked.js
        Mermaid.js
        Dexie.js
    Expérience
      Mode sombre
      Recherche
      Navigation
      Mise en page adaptative

Types de diagrammes

Mermaid propose plusieurs types :

• ✅ Organigramme
• ✅ Diagramme de séquence
• ✅ Diagramme de classes
• ✅ Diagramme d'états
• ✅ Diagramme entité-association
• ✅ Diagramme de Gantt
• ✅ Diagramme circulaire
• ✅ Graphe Git
• ✅ Chronologie
• ✅ Carte mentale

Essayez de créer vos propres diagrammes.

Continuer l'exploration

• Exemple Markdown complet
• Retour aux exemples Markdown