Automatisation n8n : tableau de bord avec Mermaid.js

Ce workflow n8n a pour objectif de créer un tableau de bord interactif en utilisant Mermaid.js, permettant ainsi de visualiser les workflows de manière graphique. Dans un contexte où les équipes cherchent à optimiser leur gestion de projets et à améliorer la communication, ce type d'automatisation est particulièrement utile pour les développeurs et les chefs de projet. En intégrant des visualisations claires, les utilisateurs peuvent mieux comprendre les processus en cours et identifier rapidement les points d'amélioration. Le workflow commence par un déclencheur manuel, où l'utilisateur clique sur 'Test workflow'. Ensuite, il utilise le nœud 'List workflows' pour récupérer la liste des workflows disponibles. Cette liste est ensuite préparée et agrégée pour être présentée de manière concise. Le nœud 'Switch' permet de gérer les différentes conditions, tandis que les nœuds 'Respond with Mermaid' et 'Send Page' répondent avec les données formatées pour une visualisation efficace. Grâce à cette automatisation n8n, les équipes peuvent gagner du temps, réduire les erreurs de communication et améliorer la transparence des projets, ce qui se traduit par une meilleure efficacité opérationnelle.

À qui s'adresse ce workflow ?

Ce que ce workflow résout

Comment ça fonctionne

Visualisation du workflow n8n

Schéma des nœuds et connexions de ce workflow n8n, généré à partir du JSON n8n.

Importer dans n8n en un clic

Inscris-toi gratuitement pour télécharger le fichier .json, puis fais Import from File dans n8n pour déployer le workflow en quelques secondes.

{
  "id": "Um37boya1U0mnCjS",
  "meta": {
    "instanceId": "fb924c73af8f703905bc09c9ee8076f48c17b596ed05b18c0ff86915ef8a7c4a",
    "templateCredsSetupCompleted": true
  },
  "name": "Workflow dashboard with mermaid.js",
  "tags": [],
  "nodes": [
    {
      "id": "c1f74b3a-2ae6-4491-ac02-e1e0fd188664",
      "name": "When clicking ‘Test workflow’",
      "type": "n8n-nodes-base.manualTrigger",
      "position": [
        1220,
        560
      ],
      "parameters": {},
      "typeVersion": 1
    },
    {
      "id": "2aef0899-91bb-4141-9ec1-def1c31806ae",

Personnaliser ce workflow

Détail des nœuds n8n

• 01

  When clicking ‘Test workflow’

  Déclenche le workflow lorsque l'utilisateur clique sur 'Test workflow'.

• 02

  Respond with Mermaid

  Répond à un webhook avec des données formatées en Mermaid.

• 03

  List workflows

  Liste tous les workflows disponibles dans n8n.

• 04

  Aggregate

  Agrège des données selon des options et des champs spécifiés.

• 05

  Single workflow

  Récupère les détails d'un workflow spécifique en utilisant son ID.

• 06

  Switch

  Évalue des conditions et dirige le flux de travail en fonction des résultats.

• 07

  Send Page

  Répond à un webhook avec une page spécifiée dans le corps de la réponse.

• 08

  Prepare workflow list

  Prépare une liste de workflows en définissant des options et des affectations.

• 09

  CONFIG

  Configure des paramètres pour le workflow avec des options et des affectations.

• 10

  Code

  Exécute un code JavaScript personnalisé pour traiter des données.

• 11

  Sticky Note3

  Crée une note autocollante avec des propriétés de couleur, taille et contenu.

• 12

  Webhook

  Définit un webhook qui écoute les requêtes sur un chemin spécifié.