Générez des diagrammes à partir d'un texte de type markdown.
Éditeur en direct !
Documents | Commencer | Canada | ? Rejoignez-nous
简体中文
Essayez les aperçus Live Editor des versions futures : Développer | Suivant
? Mermaid a été nominée et a remporté les JS Open Source Awards (2019) dans la catégorie « L'utilisation la plus excitante de la technologie » !!!
Merci à toutes les personnes impliquées, aux personnes qui effectuent des pull request, aux personnes qui répondent aux questions !
À propos
Exemples
Libérer
Projets associés
Contributeurs
Schémas de sécurité et de sécurité
Signalement des vulnérabilités
Appréciation
Mermaid est un outil de création de diagrammes et de graphiques basé sur JavaScript qui utilise des définitions de texte inspirées de Markdown et un moteur de rendu pour créer et modifier des diagrammes complexes. L'objectif principal de Mermaid est d'aider la documentation à suivre le développement.
Doc-Rot est un Catch-22 que Mermaid aide à résoudre.
Les diagrammes et la documentation coûtent un temps précieux aux développeurs et deviennent rapidement obsolètes. Mais ne pas disposer de diagrammes ou de documents ruine la productivité et nuit à l’apprentissage organisationnel.
Mermaid résout ce problème en permettant aux utilisateurs de créer des diagrammes facilement modifiables. Il peut également faire partie des scripts de production (et d’autres morceaux de code).
Mermaid permet même aux non-programmeurs de créer facilement des diagrammes détaillés via Mermaid Live Editor.
Pour des didacticiels vidéo, visitez notre page Tutoriels. Utilisez Mermaid avec vos applications préférées, consultez la liste des intégrations et utilisations de Mermaid.
Vous pouvez également utiliser Mermaid dans GitHub ainsi que plusieurs de vos autres applications préférées : consultez la liste des intégrations et des utilisations de Mermaid.
Pour une introduction plus détaillée à Mermaid et à certaines de ses utilisations les plus basiques, consultez le Guide du débutant, son utilisation et ses didacticiels.
Nos tests de régression visuelle PR sont optimisés par Argos avec leur généreux plan Open Source. Cela facilite le processus de révision des PR avec des changements visuels.
Dans notre processus de publication, nous nous appuyons fortement sur des tests de régression visuelle utilisant applitools. Applitools est un excellent service facile à utiliser et à intégrer à nos tests.
Voici quelques exemples de diagrammes, de tableaux et de graphiques qui peuvent être créés à l'aide de Mermaid. Cliquez ici pour accéder à la syntaxe du texte.
flowchart LR A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2]
organigramme LR
A[Difficile] -->|Texte| B (rond)
B --> C{Décision}
C -->|Un| D[Résultat 1]
C -->|Deux| E[Résultat 2]
ChargementsequenceDiagram Alice->>John: Hello John, how are you? loop HealthCheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
diagramme de séquence
Alice ->>John : Bonjour John, comment vas-tu ?
boucle HealthCheck
John->>John : Lutte contre l'hypocondrie
fin
Remarque à droite de John : Pensées rationnelles !
John-->>Alice : Super !
John ->> Bob : Et vous ?
Bob -->>John : Très bien !
Chargementgantt section Section Completed :done, des1, 2014-01-06,2014-01-08 Active :active, des2, 2014-01-07, 3d Parallel 1 : des3, after des1, 1d Parallel 2 : des4, after des1, 1d Parallel 3 : des5, after des3, 1d Parallel 4 : des6, after des4, 1d
gantt
rubrique rubrique
Terminé : terminé, des1, 06/01/2014,08/01/2014
Actif :actif, des2, 07/01/2014, 3j
Parallèle 1 : des3, après des1, 1d
Parallèle 2 : des4, après des1, 1d
Parallèle 3 : des5, après des3, 1d
Parallèle 4 : des6, après des4, 1d
ChargementclassDiagram Class01 <|-- AveryLongClass : Cool <<Interface>> Class01 Class09 --> C2 : Where am I? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla class Class10 { <<service>> int id size() }
diagramme de classe
Class01 <|-- AveryLongClass : Cool
<<Interface>> Classe01
Classe09 --> C2 : Où suis-je ?
Classe09 --* C3
Classe09 --> Classe07
Classe07 : égal()
Class07 : Objet[] elementData
Classe01 : taille()
Classe01 : chimpanzé int
Classe01 : int gorille
classe Classe10 {
<<prestations>>
identifiant entier
taille()
}
ChargementstateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]
stateDiagram-v2
[*] --> Toujours
Toujours --> [*]
Toujours --> En mouvement
Bouger --> Toujours
Déménagement -> Crash
Crash --> [*]
Chargementpie "Dogs" : 386 "Cats" : 85.9 "Rats" : 15
tarte
"Chiens" : 386
"Chats" : 85,9
"Rats" : 15
Chargementgantt title Git Issues - days since last update dateFormat X axisFormat %s section Issue19062 71 : 0, 71 section Issue19401 36 : 0, 36 section Issue193 34 : 0, 34 section Issue7441 9 : 0, 9 section Issue1300 5 : 0, 5
gantt
title Problèmes Git - jours depuis la dernière mise à jour
dateFormat X
format d'axe %s
section Numéro19062
71 : 0, 71
section Numéro19401
36 : 0, 36
section Numéro 193
34 : 0, 34
section Numéro7441
9 : 0, 9
section Numéro 1300
5 : 0, 5
Chargementjourney title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 3: Me
voyage
titre Ma journée de travail
section Aller au travail
Faire du thé : 5 : Moi
Monter à l'étage : 3 : Moi
Faire du travail : 1 : Moi, Chat
rubrique Rentrer à la maison
Descends : 5 : Moi
Asseyez-vous : 3 : Moi
ChargementC4Context title System Context diagram for Internet Banking System Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.") Person(customerB, "Banking Customer B") Person_Ext(customerC, "Banking Customer C") System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.") Enterprise_Boundary(b1, "BankBoundary") { SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") System_Boundary(b2, "BankBoundary2") { System(SystemA, "Banking System A") System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.") } System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") Boundary(b3, "BankBoundary3", "boundary") { SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.") SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") } } BiRel(customerA, SystemAA, "Uses") BiRel(SystemAA, SystemE, "Uses") Rel(SystemAA, SystemC, "Sends e-mails", "SMTP") Rel(SystemC, customerA, "Sends e-mails to")
C4Contexte
titre Diagramme de contexte du système pour le système bancaire par Internet
Personne(clientA, "Client bancaire A", "Client de la banque, avec des comptes bancaires personnels.")
Personne(clientB, "Client bancaire B")
Person_Ext(clientC, "Client bancaire C")
Système(SystemAA, "Internet Banking System", "Permet aux clients d'afficher des informations sur leurs comptes bancaires et d'effectuer des paiements.")
Personne(clientD, "Client bancaire D", "Client de la banque, <br/> avec des comptes bancaires personnels.")
Enterprise_Boundary(b1, "BanqueBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stocke toutes les informations bancaires de base sur les clients, les comptes, les transactions, etc.")
System_Boundary(b2, "BanqueBoundary2") {
Système(SystèmeA, "Système bancaire A")
Système(SystèmeB, "Système bancaire B", "Un système de banque, avec des comptes bancaires personnels.")
}
System_Ext(SystemC, "Système de messagerie", "Le système de messagerie interne de Microsoft Exchange.")
SystemDb(SystemD, "Banking System D Database", "Un système de banque, avec des comptes bancaires personnels.")
Limite(b3, "BanqueBoundary3", "limite") {
SystemQueue(SystemF, "Banking System F Queue", "Un système de banque, avec des comptes bancaires personnels.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "Un système de la banque, avec des comptes bancaires personnels.")
}
}
BiRel(clientA, SystèmeAA, "Utilisations")
BiRel(SystemAA, SystemE, "Utilisations")
Rel(SystemAA, SystemC, "Envoie des e-mails", "SMTP")
Rel (Système C, client A, "Envoie des e-mails à")
ChargementPour ceux qui en ont l’autorisation :
Mettez à jour le numéro de version dans package.json
.
publication npm
La commande ci-dessus génère des fichiers dans le dossier dist
et les publie sur https://www.npmjs.com.
Interface de ligne de commande
Éditeur en direct
Serveur HTTP
Mermaid est une communauté en pleine croissance et accepte toujours de nouveaux contributeurs. Il existe de nombreuses façons différentes d'aider et nous sommes toujours à la recherche de mains supplémentaires ! Examinez ce problème si vous voulez savoir par où commencer pour aider.
Des informations détaillées sur la manière de contribuer peuvent être trouvées dans le guide de contribution.
Pour les sites publics, il peut être précaire de récupérer le texte des utilisateurs sur Internet, et de stocker ce contenu pour le présenter ultérieurement dans un navigateur. La raison en est que le contenu utilisateur peut contenir des scripts malveillants intégrés qui s'exécuteront lorsque les données seront présentées. Pour Mermaid, c'est un risque, d'autant plus que les diagrammes de sirène contiennent de nombreux caractères utilisés en HTML, ce qui rend l'assainissement standard inutilisable car cela casse également les diagrammes. Nous nous efforçons toujours de nettoyer le code entrant et de continuer à affiner le processus, mais il est difficile de garantir qu'il n'y a pas de failles.
Comme niveau de sécurité supplémentaire pour les sites avec des utilisateurs externes, nous sommes heureux d'introduire un nouveau niveau de sécurité dans lequel le diagramme est rendu dans une iframe en bac à sable empêchant l'exécution du javascript dans le code. C’est un grand pas en avant pour une meilleure sécurité.
Malheureusement, vous ne pouvez pas avoir un gâteau et le manger en même temps, ce qui dans ce cas signifie que certaines fonctionnalités interactives sont bloquées ainsi que l'éventuel code malveillant.
Pour signaler une vulnérabilité, veuillez envoyer un e-mail à [email protected] avec une description du problème, les étapes que vous avez suivies pour créer le problème, les versions concernées et, si connues, les mesures d'atténuation du problème.
Un petit mot de Knut Sveidqvist :
Un grand merci aux projets d3 et dagre-d3 pour avoir fourni la mise en page graphique et les bibliothèques de dessins !
Merci également au projet js-sequence-diagram pour l'utilisation de la grammaire pour les diagrammes de séquence. Merci à Jessica Peter pour l'inspiration et le point de départ du rendu du Gantt.
Merci à Tyler Long qui est collaborateur depuis avril 2017.
Merci à la liste toujours croissante de contributeurs qui ont mené le projet jusqu'ici !
Mermaid a été créé par Knut Sveidqvist pour faciliter la documentation.