Generate Live Docsify Docs with n8n Automation

What this workflow does

This workflow creates live documentation for n8n workflows. It solves the problem of manually writing and updating workflow docs, avoiding mistakes and outdated information. The result is a system that shows up-to-date Markdown documentation with diagrams, editable in a web page, all automated by n8n.

The workflow serves HTML pages using Docsify. It checks if requested doc files exist. If not, it makes new Markdown files with workflow info and Mermaid diagrams. Users can view, live-edit, and save docs through HTTP requests handled by n8n.

Who should use this workflow

If you spend too much time writing or fixing workflow documentation, this tool helps. Teams working with many n8n workflows that need clear, visual docs will find it useful. It fits well for people running self-host n8n or open n8n servers with write access to a docs folder.

Tools and services used

• n8n platform: Manages the workflow automation and HTTP webhook endpoints.


• Docsify: Generates live Markdown documentation and renders Mermaid diagrams on HTML pages.


• Mermaid.js: Draws workflow node charts as flowcharts in docs.


• OpenAI API: Generates natural language descriptions of workflows automatically.


• File system access: Reads and writes Markdown documentation files in a project directory.

Inputs, Processing, and Outputs

Inputs

• HTTP webhook requests specifying a documentation file or action.


• n8n workflow data fetched via API based on requested files.


• User-sent Markdown content for saving edited docs.

Processing steps

• Check the requested filename and file type.


• Load an existing Markdown doc file or auto-generate a new template for the workflow.


• Use OpenAI API to create a text summary of the workflow JSON.


• Generate Mermaid flowcharts based on workflow nodes and connections.


• Merge AI text and Mermaid charts into a single Markdown doc.


• Respond with Docsify HTML pages for viewing or live Markdown editing.


• Write edited content back to Markdown file on save requests.

Outputs

• Markdown documentation files with updated text and diagrams.


• HTML pages that render Markdown live with Docsify and Mermaid visuals.


• HTTP responses for success, error, or file content delivery.

Beginner step-by-step: How to build this in n8n

Import the workflow

1. Download the provided workflow file using the Download button on this page.


2. In the n8n editor, click “Import from File” and select the downloaded workflow JSON.

Configure credentials

3. Add necessary API credentials: OpenAI API Key and n8n API access credentials.


4. Update the CONFIG node with your file directory path (project_path) where Markdown docs will be saved.


5. Set instance_url to your n8n instance URL, using environment variables if self-hosting.


6. Check nodes that fetch workflows or save files and update any IDs, emails, or folder paths if required.

Test and activate

7. Trigger the webhook URL with test HTTP requests for viewing or editing docs.


8. Verify the documentation pages load with Mermaid diagrams and AI-generated text.


9. If tests pass, activate the workflow in n8n to run automatically on HTTP requests.

This lets you produce and update live documentation easily without manual writing.

Common cases and errors

If your Mermaid diagrams do not show, verify Mermaid scripts load in HTML headers.

If docs do not load, check project_path is correct and n8n has file read/write access.

Saving edits may fail if permissions are missing or data format is invalid.

Ensure environment variables for URL and protocol match your n8n instance.

Customization ideas

• Change project_path in CONFIG node to your preferred docs folder.


• Edit Mermaid diagram shapes or node type mappings in the Generate Mermaid Chart node JavaScript.


• Adjust live editor styles in the CSS of HTML_styles_editor.


• Add authentication in webhook node settings to protect saving endpoints.


• Add more Docsify plugins by inserting script lines into HTML_headers or HTML_docsify_include.

Summary of main results

✓ Automated live Markdown documentation generation for n8n workflows.
✓ Mermaid.js workflow diagrams built from real workflow node data.
✓ Web viewing and live editing of docs with instant preview.
✓ Docs saved back to filesystem, ensuring docs never get out of sync.
✓ HTTP APIs provided for easy access by teams or other tools.