# datawhalechina/handy-n8n architecture

> Architecture diagram of the GitHub repository datawhalechina/handy-n8n, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-18). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/datawhalechina/handy-n8n
- Repository: https://github.com/datawhalechina/handy-n8n

## Overview

1. **Repository type**
   - This is a **static documentation / course site** for learning n8n, not an application backend or service.
   - The main output is a set of **Markdown lessons, images, and example workflow JSON files** that are rendered in a browser.

2. **Site shell and runtime**
   - `index.html` is the entry point for the docs site.
   - The presence of `.nojekyll` indicates it is meant to be hosted as a **static site** (commonly GitHub Pages).
   - The site is organized for client-side rendering rather than server-side generation.

3. **Documentation framework**
   - The repo appears to use **Docsify** as the documentation engine.
   - `README.md`, chapter `README.md` files, and `index.html` together define the content structure and navigation.
   - `_sidebar.md` likely drives the left-hand chapter navigation.

4. **Chapter-based content structure**
   - The course is split into chapter directories `c01` through `c06`.
   - Each chapter is a bounded content module:
     - `c01`: introduction and comparison
     - `c02`: installation and deployment
     - `c03`: core concepts
     - `c04`: advanced usage
     - `c05`: community nodes and custom node development
     - `c06`: case studies
   - This structure is content-first, with each chapter independently navigable.

5. **Markdown as the primary content layer**
   - Most learning material lives in Markdown files such as `c02/local-pc-deploy.md` or `c04/n8n-ai-concepts.md`.
   - These files are the authoritative source for the tutorial content and are rendered by the docs site at runtime.

6. **Workflow artifact layer**
   - `workflows/` contains exported **n8n workflow JSON examples** grouped by chapter.
   - These files are not runtime code for this repo; they are **importable artifacts** meant to be loaded into n8n for demos and practice.
   - Examples include trigger nodes, code-node demos, AI/RAG workflows, and case-study automations.

7. **Example data and assets**
   - `c04/data/chat嬛嬛.txt` is a sample input file used by advanced examples, likely for AI/chat or retrieval exercises.
   - `images/` and chapter-local `images/` folders store diagrams and screenshots that support the lessons.
   - The docs content depends heavily on these media assets for explanation.

8. **Custom docsify extensions**
   - `js/docsify-plugin-cjk.js` suggests a plugin for better Chinese/Japanese/Korean text handling or rendering behavior.
   - `js/docsify-plugin-n8n.js` likely adds n8n-specific documentation behavior, styling, or embedded workflow rendering support.
   - These are frontend-only enhancements to the documentation experience.

9. **Conceptual flow of information**
   - Reader opens the static site in a browser.
   - Docsify loads the Markdown chapter content and sidebar navigation.
   - Images and embedded assets are fetched from the repo.
   - Workflow JSON files are referenced as examples for manual import into n8n.
   - The actual automation execution happens externally in n8n, not inside this repository.

10. **Boundary between docs and execution**
   - This repository is a **knowledge and example distribution layer**.
   - The executable system boundary is n8n itself: deployments, triggers, nodes, AI workflows, and integrations are all explained here but executed outside the repo.
   - That separation is important for an architecture diagram: the repo hosts learning content and artifacts; n8n is the runtime platform being taught.

11. **Deployment / consumption model**
   - The repo is designed to be cloned or hosted statically and consumed in a browser.
   - Workflow files can be downloaded and imported into n8n installations on local PC, cloud host, or SaaS instances.
   - So the repository supports both **documentation consumption** and **workflow artifact transfer**.

12. **Overall architecture summary**
   - Think of the repo as a **static course portal + asset library + workflow example catalog**.
   - Core subsystems are: docs shell, chapter content, visual assets, sample data, and exportable n8n workflows.
   - There is no application server, database, or backend API inside this repo.

Main entry points: [`_sidebar.md`](https://github.com/datawhalechina/handy-n8n/blob/main/_sidebar.md) (Sidebar), [`README.md`](https://github.com/datawhalechina/handy-n8n/blob/main/README.md) (Home README), [`index.html`](https://github.com/datawhalechina/handy-n8n/blob/main/index.html) (index.html), [`c04/n8n-ai-concepts.md`](https://github.com/datawhalechina/handy-n8n/blob/main/c04/n8n-ai-concepts.md) (AI concepts)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_g_shell["Site Shell"]
  node_n_index["index.html<br/>entry page<br/>[index.html]"]
  node_n_sidebar["Sidebar<br/>nav config<br/>[_sidebar.md]"]
  node_n_readme["Home README<br/>landing content<br/>[README.md]"]
end

subgraph group_g_content["Course Content"]
  node_n_c01["Chapter 1<br/>intro chapter<br/>[README.md]"]
  node_n_c02["Chapter 2<br/>deployment chapter<br/>[README.md]"]
  node_n_c03["Chapter 3<br/>core chapter<br/>[README.md]"]
  node_n_c04["Chapter 4<br/>advanced chapter<br/>[README.md]"]
  node_n_c05["Chapter 5<br/>custom nodes chapter<br/>[README.md]"]
  node_n_c06["Chapter 6<br/>cases chapter<br/>[README.md]"]
  node_n_c02_deploy["Deploy docs<br/>deployment lesson<br/>[local-pc-deploy.md]"]
  node_n_c03_core["Core nodes<br/>concept lesson<br/>[n8n-core-nodes.md]"]
  node_n_c03_code["Code node<br/>concept lesson<br/>[n8n-code.md]"]
  node_n_c04_ai["AI concepts<br/>advanced lesson<br/>[n8n-ai-concepts.md]"]
  node_n_c04_subflows["Sub-workflows<br/>advanced lesson"]
  node_n_c06_cases["Case studies<br/>case lesson<br/>[README.md]"]
end

subgraph group_g_assets["Assets"]
  node_n_c04_data["Sample text<br/>example data<br/>[chat嬛嬛.txt]"]
  node_n_images(("Shared images<br/>media library"))
  node_n_c02_images(("Chapter 2 images<br/>media set"))
  node_n_c03_images(("Chapter 3 images<br/>media set"))
  node_n_c04_images(("Chapter 4 images<br/>media set"))
  node_n_c05_images(("Chapter 5 images<br/>media set"))
end

subgraph group_g_examples["Workflow Examples"]
  node_n_work_c03[("Ch 3 workflows<br/>workflow catalog")]
  node_n_work_c04[("Ch 4 workflows<br/>workflow catalog")]
  node_n_work_c06[("Ch 6 workflows<br/>workflow catalog")]
end

subgraph group_g_frontend["Docsify Plugins"]
  node_n_docsify_cjk["CJK plugin<br/>docsify extension"]
  node_n_docsify_n8n["n8n plugin<br/>docsify extension"]
end

node_n_index -->|"loads"| node_n_docsify_cjk
node_n_index -->|"loads"| node_n_docsify_n8n
node_n_index -->|"renders nav"| node_n_sidebar
node_n_index -->|"opens"| node_n_readme
node_n_readme -->|"links to"| node_n_c01
node_n_readme -->|"links to"| node_n_c02
node_n_readme -->|"links to"| node_n_c03
node_n_readme -->|"links to"| node_n_c04
node_n_readme -->|"links to"| node_n_c05
node_n_readme -->|"links to"| node_n_c06
node_n_c02 -->|"contains"| node_n_c02_deploy
node_n_c03 -->|"contains"| node_n_c03_core
node_n_c03 -->|"contains"| node_n_c03_code
node_n_c04 -->|"contains"| node_n_c04_ai
node_n_c04 -->|"contains"| node_n_c04_subflows
node_n_c06 -->|"contains"| node_n_c06_cases
node_n_c02_deploy -->|"uses"| node_n_c02_images
node_n_c03_core -->|"uses"| node_n_c03_images
node_n_c04_ai -->|"uses"| node_n_c04_images
node_n_c04_ai -->|"uses"| node_n_c04_data
node_n_c05 -->|"uses"| node_n_c05_images
node_n_c02_deploy -.->|"also uses"| node_n_images
node_n_c03_core -->|"pairs with"| node_n_work_c03
node_n_c03_code -->|"pairs with"| node_n_work_c03
node_n_c04_ai -->|"pairs with"| node_n_work_c04
node_n_c04_subflows -->|"pairs with"| node_n_work_c04
node_n_c06_cases -->|"pairs with"| node_n_work_c06
node_n_sidebar -->|"indexes"| node_n_c01
node_n_sidebar -->|"indexes"| node_n_c02
node_n_sidebar -->|"indexes"| node_n_c03
node_n_sidebar -->|"indexes"| node_n_c04
node_n_sidebar -->|"indexes"| node_n_c05
node_n_sidebar -->|"indexes"| node_n_c06

click node_n_index "https://github.com/datawhalechina/handy-n8n/blob/main/index.html"
click node_n_sidebar "https://github.com/datawhalechina/handy-n8n/blob/main/_sidebar.md"
click node_n_readme "https://github.com/datawhalechina/handy-n8n/blob/main/README.md"
click node_n_docsify_cjk "https://github.com/datawhalechina/handy-n8n/blob/main/js/docsify-plugin-cjk.js"
click node_n_docsify_n8n "https://github.com/datawhalechina/handy-n8n/blob/main/js/docsify-plugin-n8n.js"
click node_n_c01 "https://github.com/datawhalechina/handy-n8n/blob/main/c01/README.md"
click node_n_c02 "https://github.com/datawhalechina/handy-n8n/blob/main/c02/README.md"
click node_n_c03 "https://github.com/datawhalechina/handy-n8n/blob/main/c03/README.md"
click node_n_c04 "https://github.com/datawhalechina/handy-n8n/blob/main/c04/README.md"
click node_n_c05 "https://github.com/datawhalechina/handy-n8n/blob/main/c05/README.md"
click node_n_c06 "https://github.com/datawhalechina/handy-n8n/blob/main/c06/README.md"
click node_n_c02_deploy "https://github.com/datawhalechina/handy-n8n/blob/main/c02/local-pc-deploy.md"
click node_n_c03_core "https://github.com/datawhalechina/handy-n8n/blob/main/c03/n8n-core-nodes.md"
click node_n_c03_code "https://github.com/datawhalechina/handy-n8n/blob/main/c03/n8n-code.md"
click node_n_c04_ai "https://github.com/datawhalechina/handy-n8n/blob/main/c04/n8n-ai-concepts.md"
click node_n_c04_subflows "https://github.com/datawhalechina/handy-n8n/blob/main/c04/n8n-sub-workflows-and-error-handling.md"
click node_n_c06_cases "https://github.com/datawhalechina/handy-n8n/blob/main/c06/README.md"
click node_n_c04_data "https://github.com/datawhalechina/handy-n8n/blob/main/c04/data/chat嬛嬛.txt"
click node_n_images "https://github.com/datawhalechina/handy-n8n/tree/main/images"
click node_n_c02_images "https://github.com/datawhalechina/handy-n8n/tree/main/c02/images"
click node_n_c03_images "https://github.com/datawhalechina/handy-n8n/tree/main/c03/images"
click node_n_c04_images "https://github.com/datawhalechina/handy-n8n/tree/main/c04/images"
click node_n_c05_images "https://github.com/datawhalechina/handy-n8n/tree/main/c05/images"
click node_n_work_c03 "https://github.com/datawhalechina/handy-n8n/tree/main/workflows/c03"
click node_n_work_c04 "https://github.com/datawhalechina/handy-n8n/tree/main/workflows/c04"
click node_n_work_c06 "https://github.com/datawhalechina/handy-n8n/tree/main/workflows/c06"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_n_index,node_n_sidebar,node_n_readme toneBlue
class node_n_c01,node_n_c02,node_n_c03,node_n_c04,node_n_c05,node_n_c06,node_n_c02_deploy,node_n_c03_core,node_n_c03_code,node_n_c04_ai,node_n_c04_subflows,node_n_c06_cases toneAmber
class node_n_c04_data,node_n_images,node_n_c02_images,node_n_c03_images,node_n_c04_images,node_n_c05_images toneMint
class node_n_work_c03,node_n_work_c04,node_n_work_c06 toneRose
class node_n_docsify_cjk,node_n_docsify_n8n toneIndigo
```

## Components

### Site Shell

Static entry points and client-side docs runtime

- [index.html](https://github.com/datawhalechina/handy-n8n/blob/main/index.html): entry page · Browser entry point for the static docs site · `index.html`
- [Sidebar](https://github.com/datawhalechina/handy-n8n/blob/main/_sidebar.md): nav config · Docsify navigation structure for chapters and lessons · `_sidebar.md`
- [Home README](https://github.com/datawhalechina/handy-n8n/blob/main/README.md): landing content · Top-level overview and course landing page · `README.md`

### Course Content

Markdown lessons organized by chapter

- [Chapter 1](https://github.com/datawhalechina/handy-n8n/blob/main/c01/README.md): intro chapter · Introduction and comparison of n8n · `c01/README.md`
- [Chapter 2](https://github.com/datawhalechina/handy-n8n/blob/main/c02/README.md): deployment chapter · Installation and deployment options · `c02/README.md`
- [Chapter 3](https://github.com/datawhalechina/handy-n8n/blob/main/c03/README.md): core chapter · Core concepts, nodes, code, and workspace · `c03/README.md`
- [Chapter 4](https://github.com/datawhalechina/handy-n8n/blob/main/c04/README.md): advanced chapter · AI concepts, sub-workflows, and error handling · `c04/README.md`
- [Chapter 5](https://github.com/datawhalechina/handy-n8n/blob/main/c05/README.md): custom nodes chapter · Community nodes and custom node development · `c05/README.md`
- [Chapter 6](https://github.com/datawhalechina/handy-n8n/blob/main/c06/README.md): cases chapter · Case studies and applied automations · `c06/README.md`
- [Deploy docs](https://github.com/datawhalechina/handy-n8n/blob/main/c02/local-pc-deploy.md): deployment lesson · Local, cloud host, and SaaS installation guides · `c02/local-pc-deploy.md`
- [Core nodes](https://github.com/datawhalechina/handy-n8n/blob/main/c03/n8n-core-nodes.md): concept lesson · Node categories and workflow building blocks · `c03/n8n-core-nodes.md`
- [Code node](https://github.com/datawhalechina/handy-n8n/blob/main/c03/n8n-code.md): concept lesson · Custom JavaScript logic inside workflows · `c03/n8n-code.md`
- [AI concepts](https://github.com/datawhalechina/handy-n8n/blob/main/c04/n8n-ai-concepts.md): advanced lesson · AI, memory, tools, and RAG-oriented concepts · `c04/n8n-ai-concepts.md`
- [Sub-workflows](https://github.com/datawhalechina/handy-n8n/blob/main/c04/n8n-sub-workflows-and-error-handling.md): advanced lesson · Reuse patterns and error handling · `c04/n8n-sub-workflows-and-error-handling.md`
- [Case studies](https://github.com/datawhalechina/handy-n8n/blob/main/c06/README.md): case lesson · Real-world automation examples · `c06/README.md`

### Assets

Images and sample data used by lessons

- [Sample text](https://github.com/datawhalechina/handy-n8n/blob/main/c04/data/chat嬛嬛.txt): example data · Input text used by advanced examples · `c04/data/chat嬛嬛.txt`
- [Shared images](https://github.com/datawhalechina/handy-n8n/tree/main/images): media library · Repository-wide diagrams and screenshots · `images`
- [Chapter 2 images](https://github.com/datawhalechina/handy-n8n/tree/main/c02/images): media set · Illustrations for deployment lessons · `c02/images`
- [Chapter 3 images](https://github.com/datawhalechina/handy-n8n/tree/main/c03/images): media set · Illustrations for core concept lessons · `c03/images`
- [Chapter 4 images](https://github.com/datawhalechina/handy-n8n/tree/main/c04/images): media set · Illustrations for advanced lessons · `c04/images`
- [Chapter 5 images](https://github.com/datawhalechina/handy-n8n/tree/main/c05/images): media set · Illustrations for custom-node lessons · `c05/images`

### Workflow Examples

Importable n8n workflow artifacts grouped by chapter

- [Ch 3 workflows](https://github.com/datawhalechina/handy-n8n/tree/main/workflows/c03): workflow catalog · Importable workflow demos for core concepts · `workflows/c03`
- [Ch 4 workflows](https://github.com/datawhalechina/handy-n8n/tree/main/workflows/c04): workflow catalog · Importable workflows for AI and advanced patterns · `workflows/c04`
- [Ch 6 workflows](https://github.com/datawhalechina/handy-n8n/tree/main/workflows/c06): workflow catalog · Importable workflows for case studies · `workflows/c06`

### Docsify Plugins

Frontend-only enhancements to the documentation site

- [CJK plugin](https://github.com/datawhalechina/handy-n8n/blob/main/js/docsify-plugin-cjk.js): docsify extension · Frontend plugin for Chinese/Japanese/Korean text handling · `js/docsify-plugin-cjk.js`
- [n8n plugin](https://github.com/datawhalechina/handy-n8n/blob/main/js/docsify-plugin-n8n.js): docsify extension · Frontend plugin for n8n-specific docs behavior · `js/docsify-plugin-n8n.js`

## Connections

- index.html → CJK plugin: loads · The entry page includes the CJK plugin
- index.html → n8n plugin: loads · The entry page includes the n8n plugin
- index.html → Sidebar: renders nav · Docsify uses the sidebar for chapter navigation
- index.html → Home README: opens · The landing page content is served through Docsify
- Home README → Chapter 1: links to · Top-level course overview points into chapter 1
- Home README → Chapter 2: links to · Top-level course overview points into chapter 2
- Home README → Chapter 3: links to · Top-level course overview points into chapter 3
- Home README → Chapter 4: links to · Top-level course overview points into chapter 4
- Home README → Chapter 5: links to · Top-level course overview points into chapter 5
- Home README → Chapter 6: links to · Top-level course overview points into chapter 6
- Chapter 2 → Deploy docs: contains · Chapter 2 includes deployment-focused lessons
- Chapter 3 → Core nodes: contains · Chapter 3 includes workflow core concepts
- Chapter 3 → Code node: contains · Chapter 3 includes code-node guidance
- Chapter 4 → AI concepts: contains · Chapter 4 includes AI-focused material
- Chapter 4 → Sub-workflows: contains · Chapter 4 includes reuse and error-handling material
- Chapter 6 → Case studies: contains · Chapter 6 presents applied case studies
- Deploy docs → Chapter 2 images: uses · Deployment lessons reference chapter images
- Core nodes → Chapter 3 images: uses · Core concept lessons reference chapter images
- AI concepts → Chapter 4 images: uses · Advanced AI lessons reference chapter images
- AI concepts → Sample text: uses · AI examples consume the sample text artifact
- Chapter 5 → Chapter 5 images: uses · Custom-node lessons reference chapter images
- Deploy docs → Shared images: also uses · Lessons may pull from shared repository images
- Core nodes → Ch 3 workflows: pairs with · Core concept lessons are illustrated by workflow demos
- Code node → Ch 3 workflows: pairs with · Code-node lessons use workflow examples
- AI concepts → Ch 4 workflows: pairs with · AI lessons are illustrated by advanced workflows
- Sub-workflows → Ch 4 workflows: pairs with · Sub-workflow lessons use advanced workflow examples
- Case studies → Ch 6 workflows: pairs with · Case studies are backed by runnable workflow artifacts
- Sidebar → Chapter 1: indexes · Sidebar enumerates the chapter modules
- Sidebar → Chapter 2: indexes · Sidebar enumerates the chapter modules
- Sidebar → Chapter 3: indexes · Sidebar enumerates the chapter modules
- Sidebar → Chapter 4: indexes · Sidebar enumerates the chapter modules
- Sidebar → Chapter 5: indexes · Sidebar enumerates the chapter modules
- Sidebar → Chapter 6: indexes · Sidebar enumerates the chapter modules