Tapez des flèches comme User -> API -> Database et obtenez un diagramme d'architecture ou de flux déjà mis en page. Repliez les groupes pour la vue d'ensemble, numérotez les étapes pour le détail.
100%
Tapez à gauche une ligne comme User -> App -> Database, ou double-cliquez ici pour ajouter une boîte.
Faites glisser les boîtes pour les déplacer. Double-cliquez pour renommer une boîte ou en ajouter une. Tirez le point d'une boîte pour la relier. Ctrl+Z annule.
Rien n'est envoyé : le diagramme reste dans votre navigateur et dans les liens que vous partagez.
À propos Créateur de diagrammes de systèmes
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
1Tapez des lignes comme User -> Web App -> Orders DB ou partez d'un modèle.
2Ajoutez des groupes avec Nom { ... }, des libellés après deux-points et --> pour les appels asynchrones.
3Passez 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.