Entrée
Sortie

En attente de saisie

Lignes: 6Caractères: 108
En attente de saisieZoom: 100%

Qu'est-ce que l'éditeur de diagrammes Mermaid ?

Mermaid est un outil de création de diagrammes basé sur JavaScript qui utilise une syntaxe textuelle similaire à Markdown pour générer divers diagrammes. Pas besoin de glisser-déposer manuellement des formes, il suffit d'écrire une simple description textuelle pour générer automatiquement des diagrammes de flux, des diagrammes de séquence, des diagrammes de classes, etc.

Cet outil propose un environnement d'édition Mermaid en ligne avec prévisualisation en temps réel, zoom par glisser-déposer et fonctionnalités d'exportation pour aider les développeurs à créer et partager rapidement des diagrammes.

Mode d'emploi

Utilisation de base

  1. Saisissez la syntaxe Mermaid dans l'éditeur de gauche
  2. Le diagramme sera rendu en temps réel sur la droite
  3. Utilisez la souris pour déplacer le diagramme, la molette pour zoomer
  4. Cliquez sur le bouton d'exportation pour enregistrer au format PNG ou SVG

Types de diagrammes pris en charge

Diagramme de fluxgraph/flowchart, affiche les processus et les chemins de décision
Diagramme de séquencesequenceDiagram, affiche les interactions chronologiques entre objets
Diagramme de classesclassDiagram, affiche les attributs et relations des classes
Diagramme d'étatsstateDiagram, affiche les transitions d'états
Diagramme ERerDiagram, affiche les relations entre entités
Diagramme de Ganttgantt, affiche la chronologie d'un projet
Diagramme circulairepie, affiche la répartition des données
Carte mentalemindmap, affiche la structure de réflexion
Carte de parcoursjourney, affiche le parcours de l'expérience utilisateur

Exemples

Diagramme de flux

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action A]
    B -->|No| D[Action B]
    C --> E[End]
    D --> E

Diagramme de séquence

sequenceDiagram
    participant Client
    participant Server
    participant Database
    Client->>Server: Send Request
    Server->>Database: Query Data
    Database-->>Server: Return Results
    Server-->>Client: Send Response

Diagramme de classes

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +fetch()
    }
    class Cat {
        +purr()
    }
    Animal <|-- Dog
    Animal <|-- Cat

Questions fréquentes

Quels types de diagrammes sont pris en charge ?

Diagrammes de flux (graph/flowchart), diagrammes de séquence (sequenceDiagram), diagrammes de classes (classDiagram), diagrammes d'états (stateDiagram), diagrammes ER (erDiagram), diagrammes de Gantt (gantt), diagrammes circulaires (pie), cartes mentales (mindmap) et cartes de parcours (journey), soit 9 types de diagrammes au total.

Comment exporter un diagramme ?

Cliquez sur le bouton « Exporter PNG » ou « Exporter SVG » dans le panneau de droite pour télécharger le diagramme. Le format PNG est idéal pour l'insertion dans des documents, le format SVG convient à l'édition vectorielle et à l'impression.

Peut-on zoomer et déplacer le diagramme ?

Oui. Utilisez la molette de la souris pour zoomer, maintenez le bouton gauche enfoncé et faites glisser pour déplacer le diagramme. Double-cliquez sur la zone de prévisualisation pour réinitialiser la vue à l'état initial.

Les données sont-elles envoyées au serveur ?

Non. L'analyse de la syntaxe Mermaid et le rendu des diagrammes sont entièrement effectués localement dans votre navigateur. Vos données ne quittent jamais votre appareil, garantissant une confidentialité totale.