Steg 2: Anslut n8n-API:et

Arbetsflödet läser sin egen lista över arbetsflöden och data för enskilda arbetsflöden via n8n-API:et.

1. Öppna Retrieve Workflow List och lägg till autentiseringsuppgifter.
2. Credential Required: Anslut era n8nApi-autentiseringsuppgifter.
3. Öppna Fetch Single Workflow och bekräfta att den använder samma typ av autentisering.
4. Credential Required: Anslut era n8nApi-autentiseringsuppgifter.

Steg 3: Konfigurera query-routern

Switchen routar anrop baserat på om en wfid-queryparameter finns.

1. Öppna Route by Query och bekräfta två utgångar: load page och has wfid.
2. För load page, ställ in villkoret till Array → Empty med Left Value {{ Object.keys($json?.query)}}.
3. För has wfid, ställ in villkoret till String → Contains med Left Value {{ Object.keys($json.query).join(',') }} och Right Value wfid.
4. Koppla utgången load page till Retrieve Workflow List och utgången has wfid till Fetch Single Workflow.

Steg 4: Bygg arbetsflödeslistan för dashboarden

Den här vägen samlar in metadata för arbetsflöden och förbereder det för HTML-svaret till dashboarden.

1. I Retrieve Workflow List, lämna Filters tomt för att hämta alla arbetsflöden.
2. I Map Workflow Items, ställ in tilldelningen så att den skapar wf_data med värdet { "id":"{{ $json.id }}", "name":"{{ $json.name }}" }.
3. I Consolidate Records, aggregera fältet wf_data för att slå ihop poster till en lista.
4. I Set Runtime Config, behåll Include Other Fields aktiverat och ställ in:
5. instance_url till {{$env["N8N_PROTOCOL"]}}://{{$env["N8N_HOST"]}}, webhook_name till {{ $('Incoming Webhook Trigger').params.path}}, och webhook_path till {{$env["N8N_ENDPOINT_WEBHOOK"] || "webhook"}}.

Steg 5: Generera Mermaid-diagram

Den här vägen hämtar ett enskilt arbetsflöde och konverterar dess kopplingar till Mermaid-syntax.

1. I Fetch Single Workflow, ställ in Operation till get och Workflow ID till {{ $json.query.wfid }}.
2. Öppna Transform Mermaid Chart och behåll den tillhandahållna JavaScript Code som bygger mermaidChart från arbetsflödets noder och kopplingar.
3. Bekräfta att Transform Mermaid Chart är kopplad till Return Mermaid Output.

Steg 6: Konfigurera utdata-svar

Arbetsflödet svarar antingen med dashboardens HTML eller Mermaid-diagramkoden.

1. I Deliver Dashboard Page, ställ in Respond With till text och behåll hela HTML:en i Response Body enligt det som tillhandahålls.
2. I Return Mermaid Output, ställ in Respond With till text och Response Body till {{ $json.mermaidChart }}.
3. Säkerställ att Set Runtime Config är kopplad till Deliver Dashboard Page och att Transform Mermaid Chart är kopplad till Return Mermaid Output.

Steg 7: Testa och aktivera ert arbetsflöde

Kör arbetsflödet för att validera både dashboarden och Mermaid-diagram-endpoints.

1. Klicka på Execute Workflow för att köra Manual Launch Trigger och bekräfta att Route by Query routar korrekt.
2. Anropa webhooken utan en wfid-queryparameter och verifiera att Deliver Dashboard Page returnerar HTML-sidan.
3. Anropa webhooken med ?wfid=YOUR_WORKFLOW_ID och verifiera att Return Mermaid Output returnerar Mermaid-kod.
4. När testerna lyckas, slå på arbetsflödet till Active för användning i produktion.