Diagramme Kanban
Le diagramme kanban de Mermaid vous permet de créer une représentation visuelle de la circulation des tâches entre les différentes étapes d'un flux de travail ; la suite explique comment utiliser correctement la syntaxe du diagramme kanban.
Base
Le diagramme kanban commence par la syntaxe kanban, puis définit les colonnes ainsi que les tâches contenues dans ces colonnes.
Copier
Intégrer
kanban
column1[Column Title]
task1[Task Description]
Définir des colonnes
Les colonnes représentent les différentes étapes du flux de travail, par exemple « À faire », « En cours », « Terminé », etc. Chaque colonne est définie à l'aide d'un identifiant unique et d'un titre entre crochets.
Syntaxe :
Copier
Intégrer
columnId[Column Title]
- columnId : l'identifiant unique de la colonne.
- [Column Title] : le titre affiché en tête de colonne.
比如 id1[Todo]
Ajouter une tâche à une colonne
Les tâches sont affichées dans leurs colonnes respectives, avec une indentation. Chaque tâche comporte un identifiant unique et une description entre crochets.
Syntaxe :
Copier
Intégrer
taskId[Task Description]
taskId : l'identifiant unique de la tâche.,[Task Description] : la description de la tâche.
Exemple :
Copier
Intégrer
docs[Create Documentation]
Ajouter des métadonnées à une tâche
Vous pouvez ajouter des métadonnées supplémentaires à chaque tâche à l'aide de la syntaxe @{ ... } . Les métadonnées peuvent contenir des paires clé-valeur telles que assigned, ticket, priority, etc., qui seront affichées dans le rendu du nœud.
Clés de métadonnées prises en charge
assigned : spécifie qui est responsable de la tâche.,ticket : relie la tâche à un numéro de ticket ou de problème.,priority : indique le degré d'urgence de la tâche. Valeurs autorisées : Very High, High, Low et Very Low.
Copier
Intégrer
kanban
todo[Todo]
id3[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
Options de configuration
Vous pouvez personnaliser le diagramme kanban à l'aide d'un bloc de configuration placé au début du fichier markdown. Cela est utile pour définir des paramètres globaux (comme l'URL de base des tickets). Actuellement, le diagramme kanban <code>ticketBaseUrl</code> cela est très utile pour définir des paramètres globaux, par exemple l'URL de base des tickets. Actuellement, le diagramme kanban dispose d'une option de configuration ticketBaseUrl. Elle peut être définie comme dans l'exemple suivant :
Copier
Intégrer
---
config:
kanban:
ticketBaseUrl: 'https://yourproject.atlassian.net/browse/#TICKET#'
---
Lorsqu'une entrée du kanban comporte un numéro de ticket spécifié, le numéro de ticket dans le diagramme contiendra un lien vers le système externe qui définit ce ticket. Le paramètre ticketBaseUrl indique l'URL de base du système externe, et #TICKET# est remplacé par la valeur du ticket présente dans les métadonnées de la tâche, afin de créer un lien valide.
Exemple complet
Voici un exemple complet de code de diagramme kanban :
Copier
Intégrer
---
config:
kanban:
ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
---
kanban
Todo
[Create Documentation]
docs[Create Blog about the new diagram]
[In progress]
id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
id9[Ready for deploy]
id8[Design grammar]@{ assigned: 'knsv' }
id10[Ready for test]
id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
id11[Done]
id5[define getData]
id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
id12[Can't reproduce]
id3[Weird flickering in Firefox]
En résumé, créer un diagramme kanban dans Mermaid est un processus simple qui permet de visualiser efficacement votre flux de travail.
Vous pouvez enrichir votre diagramme en ajoutant des métadonnées facultatives aux tâches à l'aide de la syntaxe @{ ... } ; cette syntaxe vous permet d'inclure des informations contextuelles supplémentaires, telles que la personne responsable, le numéro de ticket et la priorité. Pour aller plus loin dans la personnalisation, utilisez le bloc de configuration en tête de fichier pour définir des options globales, comme ticketBaseUrl, afin de lier directement les tickets depuis le diagramme.
En suivant ces conseils — garantir des identifiants uniques, une indentation correcte, et tirer parti des métadonnées et des options de configuration — vous pouvez créer un diagramme kanban complet et personnalisé, reflétant efficacement le flux de travail de votre projet.
