Imagine never writing another boring workflow doc by hand

You know that moment when someone asks, “So how does this n8n workflow actually work?” and you open the editor, squint at the nodes, and mumble something about “data flowing through here somewhere”? If your documentation strategy is currently “hope for the best,” you are in good company.

As your n8n automations multiply, keeping track of what each workflow does, why it exists, and how it is wired becomes a full-time job. Manually updating docs every time you tweak a node is not only tedious, it is a guaranteed way to end up with outdated, half-true documentation that nobody trusts.

This workflow template steps in as your documentation assistant. It auto-generates docs from your n8n workflows, wraps them in a lightweight Docsify site, and even draws pretty Mermaid diagrams so you can stop copy-pasting screenshots into wikis.

What this n8n + Docsify + Mermaid setup actually does

At a high level, this workflow takes your n8n instance, peeks at your workflows, and turns them into a browsable documentation site with diagrams and an editor. Here is what it handles for you:

• Serves a Docsify-based single-page app so you can browse all your workflow documentation in the browser.
• Fetches workflows from your n8n instance and builds a Markdown index table so you can quickly see what exists.
• Auto-generates individual documentation pages with Mermaid flowcharts based on your workflow connections.
• Provides a live Markdown editor with Docsify preview and Mermaid rendering for fine-tuning docs by hand.
• Saves edited or auto-generated Markdown files into a configurable project directory on disk.
• Optionally calls a language model to write human-friendly workflow descriptions and node summaries for you.

In short, it takes the repetitive “document everything” chore and hands it to automation, which feels nicely poetic.

Key building blocks of the workflow

Docsify frontend: your lightweight docs site

Docsify is the front-end engine that turns Markdown files into a responsive documentation site, all in the browser. No static site generator builds, no complicated pipelines.

The workflow generates a main HTML page that:

• Loads Docsify in the browser.
• Uses a navigation file (summary.md) on the left for browsing.
• Serves content pages like README.md and workflow-specific docs such as docs_{workflowId}.md.

Mermaid diagrams: visual maps of your workflows

Mermaid.js converts text-based flowchart descriptions into SVG diagrams. The workflow reads your n8n workflow JSON and constructs a Mermaid flowchart string from node types and connections.

The result is a visual schematic on each doc page, so instead of saying “the webhook goes to the function node which then branches,” you can just point to a diagram and nod confidently.

Auto-generation logic: docs that appear when you need them

Whenever a docs page is requested and does not yet exist, the workflow creates a Markdown template that includes:

• A header and basic structure.
• A description section, which can be filled by you or generated with an LLM.
• A Mermaid graph representing the workflow connections.
• A metadata table with details like created date, updated date, and author.

This guarantees that every workflow has at least a minimal, accurate doc page without you opening a blank file and wondering where to start.

Live Markdown editor: tweak docs in the browser

The template also includes an editor view. It provides a split layout:

• Left side: an editable Markdown textarea where you can refine descriptions, add notes, or fix typos.
• Right side: a Docsify-powered preview that supports Mermaid diagrams and updates as you type.

When you hit the Save button, your Markdown file is written directly to the configured project directory so future visits load your polished version instead of regenerating it.

Optional LLM integration: let AI handle the wordy bits

If you enable it, the workflow can call a language model to:

• Generate a concise, human-friendly overview of what the workflow does.
• Summarize node configurations in readable form.

The LLM output is formatted into Markdown and merged into the doc template. It is meant as a helpful assistant, not an unquestioned source of truth, so you can always edit or override what it writes.

How the workflow responds to docs requests

Behind the scenes, the workflow behaves like a tiny docs server that reacts to incoming paths. Here is the flow, simplified:

1. Request comes in
   Docsify or a user requests a specific docs path, for example /docs_{workflowId}.
2. Routing logic kicks in
   A webhook node checks which file or path is being requested and decides which branch of the workflow to run. It can serve:
   • The main index table of workflows.
   • Tag-based views.
   • A single workflow documentation page.
   • The editor interface.
3. File check on disk
   The workflow looks in the configured project directory:
   • If the Markdown file already exists, it returns the file right away.
   • If it does not exist, the workflow either:
     • Auto-generates a new doc page, or
     • Offers an editor template so you can start writing.
4. Mermaid diagram generation
   The workflow reads your workflow JSON and constructs a Mermaid flowchart string based on the nodes and their connections. This text is embedded into the Markdown so Docsify can render it as a diagram.
5. Optional LLM step
   If enabled, the workflow calls a language model to produce:
   • A human-readable workflow description.
   • Summaries of important node settings.

   These are merged into the Markdown template before returning the page.

6. Saving edits for next time
   When you use the editor and click Save, the content is written to disk in project_path. Future requests for that page read your saved Markdown instead of regenerating it.

The net effect is that your documentation grows and improves naturally as you browse and edit, without manual file juggling.

Configuration and deployment: set it up once, enjoy forever

All the important knobs live in a single CONFIG node so you do not have to chase variables around the workflow. Here is what you configure:

• project_path – the directory where Markdown files are stored. This path must be writable by the n8n process. The workflow includes a step to create the directory if it does not exist.
• instance_url – the public URL of your n8n instance, used to generate links back to the n8n workflow editor from the docs.
• HTML_headers and HTML_styles_editor – custom HTML snippets that Docsify consumes, including:
  • Mermaid.js loading.
  • Styles and layout tweaks.
  • Meta tags or theme settings.

Deployment notes

To get everything running smoothly, keep these points in mind:

• Run this workflow in an environment where n8n has file system access to project_path. If that is not possible, you can adapt it to store files in object storage such as S3 and serve them from a static host.
• If your n8n instance is hosted in the cloud, set instance_url to the public URL and make sure CORS and host headers are configured correctly so Docsify links behave.
• The editor writes files directly to disk. For production use, you will probably want to:
  • Restrict access to internal networks, or
  • Put authentication in front of the webhook.

Security and maintenance: a few important caveats

Automating documentation is great, but you still want to keep things safe and sane.

• The example includes a live editor that writes files without authentication. Do not expose this directly on the public internet without extra access control.
• Sanitize any user-provided content before saving if those files are later consumed by other systems or displayed in sensitive contexts.
• If you use an LLM:
  • Store API keys securely and avoid hardcoding them in the workflow.
  • Review generated text for accuracy and avoid treating it as an authoritative source. Think of it as a helpful draft writer, not an auditor.

Customization ideas to level up your docs workflow

Once the basics are running, you can extend this setup to match your team’s workflow.

• Git-backed documentation
  Store the Markdown files in a Git repository and automatically commit on save. You can add a Git client step or another automation that commits and pushes changes so every doc edit is versioned.
• Access control
  Protect the editor and docs behind OAuth, an identity provider, or a reverse proxy. This lets you safely offer editing to internal users without opening it to the world.
• Extra artifacts per workflow
  Render more than just diagrams and descriptions:
  • Sample payloads.
  • Relevant logs or outputs.
  • Example executions or run history snippets.
• Tag-based documentation views
  Use n8n workflow tags to filter and generate focused documentation pages for specific teams, projects, or environments. For example, docs only for “billing” workflows or “marketing” automations.

Troubleshooting common issues

If something looks off, it is usually a small configuration detail. Here is what to check.

Mermaid diagrams not rendering

• Verify that Mermaid.js is correctly loaded in your HTML_headers snippet.
• Ensure the generated Mermaid text is valid. The workflow already includes logic to replace code blocks with Mermaid containers before rendering, but malformed diagrams can still break rendering.

Docsify preview looks broken or weird

• Check the CSS and the Docsify theme link inside HTML_headers. A missing or incorrect stylesheet can make everything look slightly cursed.
• If your site is served from a subdirectory, confirm that basePath and related settings are correct so Docsify can find your Markdown files.

Files are not being saved

• Confirm that project_path exists or can be created. The workflow includes a mkdir step to create the directory if it is missing.
• Make sure the n8n process has write permissions to that directory. Without that, the Save button will look enthusiastic but do nothing.

When this template is a perfect fit

This approach works especially well if you want:

• Fast, always-up-to-date documentation for your automation team without manual copy-paste marathons.
• Visual diagrams that help non-developers understand how workflows are wired.
• A simple, browser-based editing experience for technical writers, operators, or anyone who prefers Markdown over mystery diagrams.

If you have ever thought “I really should document this” and then did not, this workflow is for you.