La plate-forme populaire de partage de code, GitHub, a annoncé la prise en charge d'un nouveau type de contenu intégré. Dans les fichiers Markdown, vous pouvez désormais utiliser la syntaxe Mermaid pour créer facilement des organigrammes, des diagrammes de séquence, etc.
La saveur de démarque de GitHub gère déjà les images, les listes de tâches et les codes abrégés emoji. Avec la prise en charge des diagrammes courants, GitHub fait sa part pour une documentation plus informative et utile.
Quoi de neuf avec GitHub ?
Vous pouvez maintenant intégrer le code Mermaid dans votre LISEZMOI.md et d'autres fichiers de démarquage. Si vous le faites, GitHub affichera un diagramme décrit par ce code. Le code Mermaid utilise une syntaxe simple qui décrit les différentes parties de chaque diagramme en texte brut.
Voir également: Qu'est-ce que GitHub? Une introduction à ses fonctionnalités de base
Comment incluez-vous les diagrammes ?
- Choisissez un fichier Markdown existant ou créez-en un nouveau à ajouter à votre référentiel. Utilisez soit .Maryland ou .réduction extensions.
- Ajoutez du code Mermaid à ce fichier. Exactement quel code dépend de vous; voici un exemple simple pour commencer :
graphique TD ;
A-->B ;
A-->C ;
B-->D ;
C-->D ; - Affichez le fichier sur GitHub. Vous devriez voir un beau rendu de votre diagramme.
Il ne vous reste plus qu'à apprendre la richesse des diagrammes dont dispose Mermaid. Ou vous pouvez simplement vous référer au Sirène documentation au fur et à mesure que vous avez besoin d'un diagramme.
Quels types de diagrammes puis-je utiliser ?
Mermaid prend en charge les types de diagrammes suivants :
- Organigramme
- Séquence
- Classer
- État
- Relation d'entité
- Parcours utilisateur
- Gantt
- Tarte
- Exigence
Voir également: Diagramme de Gantt vs. Graphique PERT: quelles sont les différences ?
Chacun a sa propre syntaxe, pour refléter le type de données que le diagramme affiche. Par exemple, voici le code d'un diagramme de séquence simple :
diagramme de séquençage
Bart->>Homer: T'as pas de vache, mec.Qui ressemble à ceci lorsqu'il est rendu :
Et voici le code d'un diagramme d'état de base :
stateDiagram-v2
[*] --> Nouveau
Nouveau --> Prêt: admis
Prêt --> En cours d'exécution: envoi du planificateur
En cours d'exécution --> Prêt: interruption
En cours d'exécution --> En attente: attente d'E/S ou d'événement
En attente --> Prêt: E/S ou achèvement d'un événement
En cours d'exécution --> Terminé: quitter
Résilié --> [*]Ce qui rend ainsi :
Ajoutez de la valeur à vos projets GitHub avec les diagrammes Mermaid
Les diagrammes de sirène sont un ajout utile à GitHub, d'autant plus que nous pensons qu'ils encouragent une meilleure documentation. De nombreux projets pourraient être améliorés avec des explicateurs visuels directement dans leur documentation ou leurs fichiers README.
GitHub est désormais un service si populaire que ses fonctionnalités et ses modifications affectent de nombreux développeurs à travers le monde. Heureusement, la prise en charge des diagrammes de sirène est là si vous en avez besoin, et invisible si vous ne l'avez pas. Mais, espérons-le, vous commencerez à voir au moins une documentation plus agréable.
Si vous avez un site Web simple, vous n'avez pas besoin de payer pour l'hébergement Web. Vous pouvez utiliser les pages GitHub gratuitement !
Lire la suite
- Programmation
- GitHub
- Programmation
Bobby est un passionné de technologie qui a travaillé comme développeur de logiciels pendant la majeure partie de deux décennies. Il est passionné par le jeu, travaillant comme rédacteur en chef au Switch Player Magazine, et est immergé dans tous les aspects de l'édition en ligne et du développement Web.
Abonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner
