Un tableau Kanban est un outil de gestion visuelle des workflows utilisé pour suivre les tâches ou les éléments de travail à travers différentes étapes de traitement (telles que la liste d’attente, en cours et terminé). Introduit comme fonctionnalité native dans Mermaid.js, cette approche basée sur le texte permet aux équipes de développement et aux gestionnaires de projet de créer rapidement des tableaux de bord interactifs pour les tâches à l’intérieur des fichiers de documentation, sans avoir à gérer des applications de suivi manuelles ou des éléments d’image tiers.
Structure de syntaxe de base
Chaque tableau Kanban commence par le kanban en-tête de déclaration. Les colonnes sont définies à l’aide du mot-clé section et les cartes de tâches individuelles sont listées séquentiellement sous chaque colonne en utilisant des blocs d’espacement d’indentation.
kanban
titre "Sprint de projet d'exemple"
section À faire
Concevoir le schéma de base de données
Rédiger les routes de l'API
section En cours
Mettre en œuvre le middleware d'authentification
Référence de syntaxe
Le tableau ci-dessous détaille les composants de données fondamentaux et les paramètres utilisés pour créer une carte de tableau Kanban dans Mermaid.js.
| Composant de syntaxe | Exigence de type | Description et règles d’utilisation |
|---|---|---|
| Déclaration | Identificateur de mot-clé | Initialise les paramètres de cartographie du bloc de workflow agile. Doit utiliser exactement le bloc kanban bloc. |
| Titre | Chaîne entre guillemets | Un titre facultatif pour l’espace de travail global, centré proprement en haut du canevas Kanban. |
| Colonne de section | Mot-clé + Nom | Définit une colonne d’étape de workflow indépendante. Utilisez le mot-clé sectionsuivi du libellé de la colonne. |
| Carte de tâche standard | Chaîne indentée | Une description en texte brut représentant une seule carte. Elle doit être tabulée ou indentée directement sous sa section active. |
| Carte d’identification de tâche | Identifiant entre crochets | Un format avancé de suivi de carte de tâche utilisant un jeton d’ID unique explicite aux côtés de son libellé d’affichage :id[Texte de la carte]. |
| Bloc de métadonnées | Carte de configuration JSON | Un bloc facultatif de propriétés ajouté en utilisant la règle de syntaxe@{...} pour attribuer des attributs tels que la priorité du ticket ou les responsables. |
Attributs et métadonnées avancés de tâche
Pour des sprints d’ingénierie détaillés ou des workflows de suivi des bogues, vous pouvez attribuer directement des attributs de métadonnées à une carte. En associant un ID de nœud unique (commetask1[...]) avec un bloc déclaratif JSON en fin (@{}), vous pouvez afficher des variables structurées telles que les assignataires de tâche, les priorités et les tickets de suivi internes directement sur la face de l’élément de carte.
Variables de tâche prises en charge
| Clé d’attribut | Formatage de la valeur | Résultat visuel |
|---|---|---|
assigné |
Nom de chaîne entre guillemets | Affiche l’étiquette du propriétaire ou du développeur assigné directement dans la matrice des détails de la carte. |
priorité |
Chaîne d’échelle entre guillemets | Affiche les repères de gravité de la tâche (par exemple, 'Élevée', 'Moyen', 'Faible'). |
ticket |
Jeton entier ou alphanumérique | Suivi des numéros de tâches de développement liées ou des codes de projet système. |
Maquette du monde réel : Sprint de déploiement Agile
Cette maquette complète suit un déploiement de déploiement d’infrastructure. Elle définit trois colonnes distinctes (Backlog, En cours et Prêt au déploiement) et utilise des identifiants de tâches avancés associés à des paramètres de métadonnées structurelles pour attribuer des développeurs spécifiques et des codes de ticket à travers les fonctionnalités.
kanban
titre "Tableau de déploiement des fonctionnalités principales du Q3"
section Backlog
task101[Créer la documentation des points d'API]@{ attribué: 'Sarah K', priorité: 'Moyen' }
task102[Concevoir les maquettes de la page d'accueil]
section En cours
task201[Affiner la synchronisation des requêtes de base de données]@{ attribué: 'Alex M', priorité: 'Élevée', ticket: 4012 }
task202[Configurer les composants d'interface utilisateur Lightbox]@{ attribué: 'Sarah K', priorité: 'Faible' }
section Prêt au déploiement
task301[Implémenter l'authentification multifacteur utilisateur]@{ attribué: 'Équipe Dev', ticket: 3985 }
Astuce de syntaxe : Bien que les tâches simples puissent être saisies en tant que lignes de texte brut non entre guillemets, les affectations complexes qui comportent des paramètres métadonnées *doivent* utiliser un préfixe de chaîne d’ID unique (tel que id1[...]@{...}). Réutiliser le même identifiant de tâche exactement à différentes parties du tableau écrasera les propriétés ou provoquera des erreurs de mise en page.
Péchés courants de syntaxe et contraintes du système
Lors de la conception de systèmes de mise en page hautement denses et à plusieurs étapes, gardez ces paramètres de dépannage structurels à l’esprit :
- La règle de la section avant les cartes : Toutes les cartes de tâches doivent se trouver sous un bloc de colonne actif. Écrire une ligne de chaîne de tâche immédiatement sous votre titre principal
kanbansans déclarer unesectionen-tête de colonne en premier arrêtera la compilation. - Espaces et tabulations : Le moteur de mise en page de suivi regroupe les cartes en fonction des tabulations d’indentation des lignes. Assurez-vous que toutes les lignes de cartes de tâches sont uniformément indentées sous leurs balises
sectionpour éviter les ruptures d’alignement. - Format du délimiteur de métadonnées : Lors de la création de caractéristiques personnalisées à l’intérieur d’un
@{ }bloc, les clés et les valeurs doivent correspondre à des arguments système valides. Séparez plusieurs attributs par des virgules et utilisez des guillemets propres pour entourer vos affectations de chaînes. - Gestion de la densité des cartes : Bien que le composant Kanban soit entièrement réactif, surcharger un tableau unique avec plus de 5 colonnes ou ajouter des dizaines de lignes de métadonnées denses peut réduire la lisibilité sur mobile. Ajustez intentionnellement vos règles d’espacement de mise en page.