# Créateur de diagrammes de systèmes

URL: https://discuvr.org/system-diagram/?hl=fr
Last updated: 2026-11-08
MCP tool: `draw_system_diagram`

Dessinez des diagrammes d'architecture et de flux en tapant A -> B. Mise en page auto, groupes repliables, étapes numérotées, export PNG et SVG.

Sur un tableau blanc numérique, vous dessinez chaque boîte et chaque flèche puis les alignez à la main. Ici, vous tapez qui parle à qui, une ligne par flèche, et la mise en page se fait seule. Regroupez les services liés et repliez le groupe en une boîte pour la vue d'ensemble ; rouvrez-le pour le détail.

## Ce qu'il fait

- Mise en page automatique, de gauche à droite ou de haut en bas, mise à jour pendant la saisie.
- Formes choisies d'après le nom : DB devient une base de données, Kafka une file, User une personne, un nom finissant par ? une décision.
- Des groupes qui se replient en une boîte, pour qu'un seul diagramme serve à la vue d'ensemble comme au détail.
- Déplacez, reliez, renommez et ajoutez des boîtes sur le canevas ; chaque changement est réécrit dans le texte.
- Étapes numérotées, style dessiné à la main, export PNG et SVG, liens de partage. Rien n'est envoyé.

## Comment ça marche

1. Tapez des lignes comme User -> Web App -> Orders DB ou partez d'un modèle.
2. Ajoutez des groupes avec Nom { ... }, des libellés après deux-points et --> pour les appels asynchrones.
3. Passez de Vue d'ensemble à Détails, rangez les boîtes en les déplaçant, puis exportez ou copiez un lien.

## Questions

**En quoi est-ce différent d'Excalidraw ?**

Excalidraw est un tableau blanc libre : vous placez vous-même chaque forme et chaque flèche. Ici, le texte est le diagramme et la mise en page est automatique : ajouter un service tient en une ligne au lieu de dessiner et réaligner des boîtes. Pour un croquis libre, Excalidraw reste plus adapté.

**Comment montrer une vue d'ensemble et une vue détaillée ?**

Placez les boîtes liées dans un groupe avec Nom { ... }. Vue d'ensemble replie chaque groupe en une seule boîte et fusionne ses flèches ; Détails les rouvre. Vous pouvez aussi replier un groupe à la fois depuis son en-tête.

**Mon diagramme est-il stocké quelque part ?**

Non. Il est dessiné dans votre navigateur et conservé dans son stockage local. Un lien de partage contient le diagramme dans le lien lui-même, après le signe #, que les navigateurs n'envoient jamais au serveur.

**Puis-je coller un organigramme Mermaid ?**

Pas directement : il n'y a pas d'import Mermaid. Les lignes simples comme A -> B passent, mais trois choses diffèrent. Supprimez l'en-tête graph TD, sinon il devient une boîte, et écrivez direction: down à la place. Retirez les libellés Mermaid entre crochets, car ici le texte entre [ ] est lu comme des étiquettes de forme et de couleur. Enfin, --> trace ici une flèche pointillée pour un appel asynchrone, alors que dans Mermaid c'est une flèche ordinaire ; utilisez -> pour une flèche pleine.

**Que puis-je écrire à part A -> B ?**

A -> B: texte pose un libellé sur la flèche, A --> B trace une flèche pointillée, A <-> B une flèche à double sens et A <- B pointe vers l'arrière. Nom [db, blue] fixe une forme et une couleur ; les formes sont service, db, cache, queue, actor, client, storage, external, decision, terminal et note. title: nomme le diagramme, direction: down le dispose de haut en bas, et une ligne qui commence par # ou // est un commentaire. Un diagramme contient jusqu'à 300 boîtes, 600 flèches et 20 000 caractères de texte.

**Que deviennent les flèches quand je replie un groupe ?**

Les flèches entre boîtes à l'intérieur du groupe replié sont masquées, et celles qui traversent sa bordure partent ou arrivent désormais sur la boîte du groupe. Plusieurs flèches entre les deux mêmes boîtes fusionnent en une flèche plus épaisse qui garde la première étiquette et ajoute un compteur. Exemple : avec Payments API et Ledger dans Payments { ... }, les lignes Checkout -> Payments API et Checkout -> Ledger deviennent une seule flèche Checkout -> Payments x2 en Vue d'ensemble. Un groupe à l'intérieur d'un groupe replié se replie avec lui et, avec Étapes activé, les numéros suivent les flèches encore visibles, dans l'ordre d'écriture.

## Plus dans Outils pour développeurs

- [JSON Formatter](https://discuvr.org/json-formatter/?hl=fr)
- [Formateur Python](https://discuvr.org/python-formatter/?hl=fr)
- [Visualiseur HTML](https://discuvr.org/html-viewer/?hl=fr)
- [Calculateur de sous-réseau IP](https://discuvr.org/ip-subnet-calculator/?hl=fr)

## Souvent utilisé avec

- [Comparateur de textes](https://discuvr.org/text-diff/?hl=fr)

---

Part of Discuvr (https://discuvr.org/): Discuvr is a collection of free, focused tools for day-to-day professional work - office and data utilities, legal and compliance helpers, privacy and security checks, and developer formatters. Every tool has its own page, and most can also be called from ChatGPT or Claude over MCP.