Générateur de diagrammes d'architecture
Esquissez la conception de système en texte. Groupez les services en couches avec des sous-graphes Mermaid — clients, API, magasins de données, files d'attente — et affichez un diagramme d'architecture propre pour votre doc de conception. Rien ne quitte votre navigateur.
One step per line. Indent two spaces to branch beneath the line above.
Conception de système qui vit dans le dépôt
Les diagrammes d'architecture dérivent au moment où ils deviennent un fichier binaire dans un outil de conception. Les écrire en Mermaid les garde à côté du code : groupez chaque couche dans un sous-graphe, utilisez des cylindres pour les magasins de données et des hexagones pour les bus, et le diagramme se met à jour avec une modification d'une ligne lors de la révision.
C'est aussi l'artefact approprié pour une RFC ou une doc d'onboarding — les examinateurs voient les composants et le flux de données sans ouvrir une application séparée.
D'un workflow à son diagramme
Si vous documentez une automation — disons un pipeline n8n ou Zapier qui déplace des données entre les services — un diagramme d'architecture rend les pièces mobiles lisibles. Esquissez le déclencheur, les services qu'il touche et où les données aboutissent, puis gardez la source dans votre doc afin qu'elle évolue avec le flux.
Questions fréquemment posées
Comment créer un diagramme d'architecture logicielle à partir de texte ?
Utilisez un logigramme Mermaid, groupez les services associés avec « subgraph Tier … end », et connectez-les avec des flèches. Utilisez des cylindres « [(DB)] » pour les magasins de données. Il s'affiche en direct et exporte en SVG ou PNG.
Comment grouper les services en couches ?
Enveloppez les nœuds dans « subgraph Name … end ». Chaque sous-graphe devient une boîte étiquetée, ce qui est la façon la plus claire de montrer une séparation présentation/application/données ou un ensemble de microservices.
Puis-je montrer des liens asynchrones ou en file d'attente ?
Oui — utilisez un lien pointillé avec une étiquette, comme « A -. async .-> B », pour distinguer les événements et les files d'attente des appels synchrones.
Mon diagramme d'architecture est-il privé ?
Oui. Il s'affiche entièrement dans votre navigateur, donc les noms de services internes et la topologie ne quittent jamais votre appareil.
Quelles formes dois-je utiliser pour les bases de données et les files d'attente ?
Utilisez « [(name)] » pour un cylindre de base de données, « [[name]] » pour une file d'attente/sous-routine, et « {{name}} » pour un hexagone comme un bus d'événements. L'antisèche les liste.