Dessin de graphiques Markdown

Les graphiques sont très importants dans la documentation technique ; ils peuvent nous aider :

  • Visualiser des relations de données complexes
  • Afficher l'architecture système et les flux de travail
  • Exprimer des idées et des concepts plus clairement

Outils courants de diagrammes Markdown

Mermaid

Mermaid est l'un des outils de diagrammes Markdown les plus populaires. Il vous permet de générer divers diagrammes à l'aide d'une syntaxe textuelle simple.

Types de diagrammes pris en charge :

  • Organigramme
  • Diagramme de séquence
  • Diagramme de classes
  • Diagramme d'état
  • Diagramme de Gantt
  • Diagramme circulaire

Organigramme

```mermaid
graph TD
    A[开始] --> B{条件判断}
    B -->|Yes| C[执行操作A]
    B -->|No| D[执行操作B]
    C --> E[结束]
    D --> E
```

Direction du diagramme de flux

  • TDouTB: De haut en bas
  • BT: De bas en haut
  • RL: De droite à gauche
  • LR: De gauche à droite

Formes de nœud

  • A[方形]: Rectangle
  • B(圆角矩形): Rectangle arrondi
  • C{菱形}: Losange (décision)
  • D((圆形)): Cercle
  • E>旗帜形]: Forme de drapeau

Types de lignes de connexion

  • -->Flèche pleine
  • -.->Flèche en pointillés
  • ==>Flèche pleine épaisse
  • --Ligne continue
  • -.Ligne en pointillés

Diagramme de séquence et diagramme de Gantt

Diagramme de séquence

```mermaid
sequenceDiagram
    participant A as 用户
    participant B as 系统
    participant C as 数据库
    
    A->>B: 登录请求
    B->>C: 验证用户信息
    C-->>B: 返回验证结果
    B-->>A: 登录成功/失败
```

Éléments essentiels de la syntaxe du diagramme de séquence :

  • participantDéfinir les participants
  • ->>Flèche pleine
  • -->>Flèche en pointillés
  • noteAjouter des notes

Diagramme de Gantt

```mermaid
gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 设计阶段
    需求分析      :done,    des1, 2024-01-01,2024-01-15
    UI设计       :active,  des2, 2024-01-10, 30d
    section 开发阶段
    前端开发      :         dev1, after des2, 45d
    后端开发      :         dev2, 2024-02-01, 60d
    section 测试阶段
    单元测试      :         test1, after dev1, 15d
    集成测试      :         test2, after dev2, 10d
```

Éléments essentiels de la syntaxe du diagramme de Gantt :

  • titleDéfinir le titre
  • dateFormatDéfinir le format de date
  • sectionDéfinir les phases
  • Statut de la tâche :done(Terminé),active(En cours),crit(Critique)

Diagramme circulaire

```mermaid
pie
    title 浏览器市场份额
    "Chrome" : 65
    "Safari" : 15
    "Firefox" : 10
    "其他" : 10
```

Types de graphiques détaillés

Organigramme

L'organigramme est le type de graphique le plus couramment utilisé, servant à représenter des processus ou des flux d'algorithmes.

Exemple Mermaid :

```mermaid
graph LR
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作1]
    B -->|否| D[执行操作2]
    C --> E[结束]
    D --> E
```

Explication de la syntaxe :

  • graphDéclarer flowchart
  • LRIndique une disposition de gauche à droite (TB/RL/BT facultatif)
  • -->Indique une connexion par flèche
  • []Indique un nœud rectangle
  • {}Indique un nœud de condition en losange

Diagramme de séquence

Le diagramme de séquence montre l'ordre d'interaction entre les objets.

Exemple Mermaid :

```mermaid
sequenceDiagram
    participant 用户
    participant 系统
    用户->>系统: 登录请求
    系统-->>用户: 验证请求
    用户->>系统: 提交凭证
    系统-->>用户: 登录成功
```

Explication de la syntaxe :

  • participantDéfinir les participants
  • ->>Indique une flèche pleine
  • -->>Indique une flèche en pointillés

Diagramme de classes

Le diagramme de classes est utilisé pour la conception orientée objet, montrant les classes et leurs relations.

```mermaid
classDiagram
    class 用户 {
        +用户名: string
        +密码: string
        +登录()
    }
    
    class 订单 {
        +订单号: int
        +创建日期: date
        +计算总价()
    }
    
    用户 "1" --> "n" 订单
```

Astuces avancées

1. Personnalisation du thème

Mermaid permet de personnaliser les styles des diagrammes :

```mermaid
%%{init: {'theme': 'forest'}}%%
pie
    title 自定义主题
    "项目A" : 30
    "项目B" : 50
    "项目C" : 20
```

2. Diagrammes interactifs

Certains outils prennent en charge l'ajout de fonctionnalités interactives :

```mermaid
graph TD
    A[点击我] --> B[显示详细信息]
    click A "https://www.example.com" "这是提示文本"
```

3. Exportation de diagrammes

La plupart des outils prennent en charge l'exportation de diagrammes sous forme de :

  • Images PNG
  • Graphiques vectoriels SVG
  • Documents PDF

État de prise en charge des outils

Outil/Plateforme Mermaid PlantUML Graphviz
GitHub ✔ ✖ ✖
GitLab ✔ ✔ ✔
VS Code Plugin Plugin Plugin
Typora ✔ ✖ ✖
Obsidian Plugin Plugin Plugin

Bonnes pratiques

  1. Gardez les choses simples: Les graphiques doivent être simples et clairs, évitez trop de détails
  2. Style cohérent: Les graphiques d'un même document doivent conserver un style cohérent
  3. Ajoutez des explications: Ajoutez des explications textuelles pour les graphiques complexes
  4. Gestion de versions: Les diagrammes basés sur du texte fonctionnent bien avec Git
  5. Test du rendu: Tester l'affichage des diagrammes sur différentes plateformes

FAQ

Q1 : Pourquoi mon diagramme ne s'affiche-t-il pas ?

  • Vérifiez si vous utilisez la syntaxe correcte
  • Assurez-vous que votre éditeur/plateforme Markdown prend en charge l'outil de diagramme
  • Vérifiez les erreurs de syntaxe

Q2 : Comment puis-je apprendre ces syntaxes de diagrammes ?

Q3 : Existe-t-il un éditeur visuel ?

Autres extensions