- Published on
n8n, Dify, and Mermaid Complete Guide -- AI Agent and Diagram Automation
- Authors

- Name
- Youngju Kim
- @fjvbn20031
Introduction
With the advent of the AI agent era, complex workflow automation beyond simple chatbots has become a core competency. This article covers three powerful tools in depth:
- n8n -- Open-source workflow automation platform
- Dify -- LLM app builder platform
- Mermaid -- Diagram-as-code tool
We explain each tool from basic concepts to practical applications, with examples you can follow along immediately.
Part 1: n8n -- Open-Source Workflow Automation
1. What is n8n?
n8n (pronounced "nodemation") is an open-source workflow automation platform. Similar to Zapier or Make (formerly Integromat), its biggest differentiator is that it supports self-hosting.
| Feature | Description |
|---|---|
| License | Fair-code (source available, commercial use OK) |
| Integrations | 400+ service connections |
| Hosting | Self-hosted or n8n Cloud |
| AI Support | Built-in AI Agent, LLM chains, Tool nodes |
| UI | No-code visual editor |
| Custom Code | JavaScript/Python code nodes supported |
n8n's strength is that your data stays on your server, making it especially useful for organizations handling sensitive data.
2. Installation
Docker Installation (Recommended)
docker run -it --rm \
--name n8n \
-p 5678:5678 \
-v n8n_data:/home/node/.n8n \
docker.n8n.io/n8nio/n8n
After installation, access http://localhost:5678 in your browser.
Docker Compose Installation
version: "3.8"
services:
n8n:
image: docker.n8n.io/n8nio/n8n
restart: always
ports:
- "5678:5678"
environment:
- N8N_BASIC_AUTH_ACTIVE=true
- N8N_BASIC_AUTH_USER=admin
- N8N_BASIC_AUTH_PASSWORD=your-secure-password
- N8N_HOST=your-domain.com
- N8N_PROTOCOL=https
- WEBHOOK_URL=https://your-domain.com/
volumes:
- n8n_data:/home/node/.n8n
volumes:
n8n_data:
Quick Start with npx
npx n8n
3. AI Agent Workflow Configuration
The biggest update to n8n in 2024-2025 is its AI Agent functionality. Built on LangChain, it allows creating AI agents with no code.
Core Components of an AI Agent
The AI Agent node connects to LLM models, Tool nodes (web search, DB queries, API calls, code execution), and Memory nodes (Window Buffer Memory, Postgres Chat Memory, Redis Chat Memory).
Tool Node Configuration
Tool nodes are how AI agents interact with the external world.
Key Tool node types:
- SerpAPI / Google Search -- Web search
- HTTP Request -- External API calls
- Postgres / MySQL -- Database queries
- Code (JavaScript/Python) -- Custom logic execution
- Calculator -- Mathematical operations
- Wikipedia -- Wikipedia search
- Vector Store -- Vector search for RAG
When multiple tools are connected, the AI agent selects the appropriate tool based on the situation.
4. Practical Example: Email Auto-Classification AI Agent
An email auto-classification agent useful in actual work.
System Prompt
You are an email classification expert. Analyze received emails and classify them into one of the following categories:
1. URGENT -- Emails requiring immediate attention (incident alerts, customer complaints, contract-related)
2. NORMAL -- Regular business emails (meeting requests, reports, information sharing)
3. SPAM -- Advertisements, promotions, spam
Response format:
- category: Classification category (one of URGENT, NORMAL, SPAM)
- reason: Classification reason (one-line explanation)
- summary: Email summary (2-3 sentences)
The Switch node branches based on the AI Agent's output. URGENT triggers a Slack notification, NORMAL adds a label, and SPAM moves to trash.
Part 2: Dify -- LLM App Builder
5. What is Dify?
Dify is an open-source LLM app development platform. You can create and deploy AI applications without writing code.
| Feature | Description |
|---|---|
| License | Apache 2.0 (open source) |
| App Types | Chatbot, Text Generator, Agent, Workflow |
| RAG Support | Built-in Knowledge Base (vector search) |
| Model Support | OpenAI, Anthropic, Hugging Face, Ollama, etc. |
| Deployment | Docker self-hosting or Dify Cloud |
| API | Auto-generated RESTful API |
Dify Installation (Docker Compose)
git clone https://github.com/langgenius/dify.git
cd dify/docker
cp .env.example .env
docker compose up -d
After installation, proceed with initial setup at http://localhost/install.
6. Key Features
Chatbot Mode
Create conversational AI apps with just prompt settings, model selection, and variable definitions.
Agent Mode
Dify's Agent mode enables LLMs to perform complex tasks using tools. Built-in tools include web search, Wikipedia, DALL-E, weather, stocks, math, web scraping, and custom API tools.
Workflow Mode
Build complex logic as visual flowcharts. Workflow mode supports conditional branching, loops, and parallel processing, and different LLM models can be used at each step.
7. RAG Pipeline Configuration
RAG (Retrieval-Augmented Generation) is a core Dify feature.
Knowledge Base Setup
- Document Upload: Supports PDF, TXT, Markdown, HTML, DOCX
- Chunk Settings: Chunk size (default 500 tokens), overlap (default 50 tokens)
- Embedding Model Selection: OpenAI text-embedding-3-small, Cohere, local models
- Vector DB: Supports Weaviate, Qdrant, Milvus, PGVector
Search Strategy Settings
Search method options:
- Semantic Search: Vector similarity based (default)
- Full-text Search: BM25 keyword based
- Hybrid Search: Semantic + Full-text combined (recommended)
Hybrid search weight settings:
- Semantic search weight: 0.7
- Full-text search weight: 0.3
- Top-K: 5 (return top 5 chunks)
- Score Threshold: 0.5 (return only similarity 0.5+)
8. Dify vs LangChain vs n8n Comparison
| Criterion | Dify | LangChain | n8n |
|---|---|---|---|
| Type | LLM app builder | LLM framework | Workflow automation |
| Interface | Web UI (no-code) | Code (Python/JS) | Web UI (no-code) |
| RAG | Built-in Knowledge Base | Implement in code | Vector Store nodes |
| Agent | Built-in Agent mode | Implement in code | AI Agent nodes |
| Integrations | Limited (API-centric) | Vast ecosystem | 400+ services |
| Learning curve | Low | High | Medium |
| Customization | Medium | Very high | High |
| Best for | Rapid AI app prototyping | Deep customization needs | Cross-service automation |
Recommended scenarios:
- Dify -- When you want to quickly build a RAG chatbot or AI app
- LangChain -- When you need fine-grained code control over complex AI pipelines
- n8n -- When you need automation connecting various services including AI
Using all three together is also a great strategy.
Part 3: Mermaid -- Diagrams as Code
9. Mermaid Syntax Basics
Mermaid is a text-based diagram tool. Write code and diagrams are automatically rendered.
Advantages of Mermaid:
- Code-managed, so version control (Git) is possible
- Native support in GitHub, GitLab, Notion, Obsidian, etc.
- Instant rendering within Markdown without installing separate tools
- AI can auto-generate diagrams
Supported Diagram Types
| Type | Keyword | Use |
|---|---|---|
| Flowchart | flowchart / graph | Process flows |
| Sequence Diagram | sequenceDiagram | API call flows |
| Class Diagram | classDiagram | Object design |
| State Diagram | stateDiagram-v2 | State transitions |
| ER Diagram | erDiagram | Database design |
| Gantt Chart | gantt | Project schedules |
| Pie Chart | pie | Ratio visualization |
| Mindmap | mindmap | Concept organization |
10. Diagram Type Examples
Flowchart
The most basic and frequently used diagram.
flowchart TD
A[Write Code] --> B{Tests Pass?}
B -->|Yes| C[Code Review]
B -->|No| D[Fix Bugs]
D --> A
C --> E{Review Approved?}
E -->|Yes| F[Merge to Main]
E -->|No| G[Apply Feedback]
G --> C
F --> H[Deploy]
Syntax points:
TDis Top-Down,LRis Left-Right- Square brackets
[]for rectangles, curly braces for diamonds (conditions), parentheses()for rounded rectangles - Arrows:
-->solid,-.->dotted,==>thick
Sequence Diagram
Represents API call flows and inter-system interactions.
sequenceDiagram
actor User
participant Frontend
participant API
participant Auth
participant DB
User->>Frontend: Login request
Frontend->>API: POST /auth/login
API->>Auth: Token verification
Auth-->>API: Verification result
alt Auth success
API->>DB: Query user info
DB-->>API: User data
API-->>Frontend: 200 OK + JWT token
Frontend-->>User: Navigate to dashboard
else Auth failure
API-->>Frontend: 401 Unauthorized
Frontend-->>User: Show error message
end
ER Diagram
Represents database table structures and relationships.
erDiagram
USER {
int id PK
string name
string email UK
datetime created_at
}
POST {
int id PK
string title
text content
int author_id FK
datetime published_at
}
COMMENT {
int id PK
text body
int post_id FK
int user_id FK
datetime created_at
}
TAG {
int id PK
string name UK
}
POST_TAG {
int post_id FK
int tag_id FK
}
USER ||--o{ POST : "writes"
USER ||--o{ COMMENT : "writes"
POST ||--o{ COMMENT : "contains"
POST ||--o{ POST_TAG : "tagged"
TAG ||--o{ POST_TAG : "tagged"
Gantt Chart
Represents project schedules and progress.
gantt
title AI Chatbot Development Project
dateFormat YYYY-MM-DD
section Planning
Requirements Analysis :done, req, 2026-04-01, 5d
Technical Review :done, tech, after req, 3d
Architecture Design :active, arch, after tech, 4d
section Development
Backend API :dev1, after arch, 10d
Frontend UI :dev2, after arch, 8d
AI Model Integration :dev3, after dev1, 5d
section Testing
Unit Tests :test1, after dev3, 3d
Integration Tests :test2, after test1, 4d
User Testing :test3, after test2, 5d
section Deployment
Staging Deploy :deploy1, after test3, 2d
Production Deploy :deploy2, after deploy1, 1d
11. Practical Usage: Mermaid in Various Environments
GitHub
GitHub natively supports Mermaid in Markdown files, issues, and PRs.
Notion
In Notion, use the /mermaid command to insert a Mermaid block.
VS Code
Install the Markdown Preview Mermaid Support extension to see Mermaid diagrams in real-time in Markdown preview.
Mermaid Live Editor
Access https://mermaid.live in your browser for an online editor with real-time preview and PNG/SVG export.
Using All Three Tools Together
Scenario: AI-Based Tech Blog Auto-Generation Pipeline
- n8n detects new tech articles from RSS feeds
- Dify Agent reads and summarizes the original content
- Dify Workflow generates Mermaid diagram code based on the summary
- n8n Code node renders Mermaid to SVG
- n8n assembles a Markdown blog post and creates a GitHub PR
- A Slack notification is sent when the entire process completes
Tips and Best Practices
n8n Tips
- Error Handling: Use Error Trigger nodes for workflow failure notifications
- Environment Variables: Manage sensitive info (API keys) as environment variables
- Execution Data Retention: Set retention periods in production to manage disk space
- Webhook Security: Add authentication header validation to webhook endpoints
Dify Tips
- Prompt Version Control: Dify automatically saves prompt change history
- Model Fallback: Configure automatic failover to backup models
- Chunk Optimization: RAG performance heavily depends on chunk size and overlap settings
- API Deployment: Dify auto-generates REST APIs for easy external service integration
Mermaid Tips
- Theme Settings: Use init directives to change diagram themes
- Styling: Apply CSS classes per node
- Split Large Diagrams: Break overly large diagrams into multiple smaller ones for readability
- Accessibility: Include text descriptions alongside diagrams for improved accessibility
Conclusion
n8n, Dify, and Mermaid are powerful tools in their respective domains, but when used together they enable building a complete AI-based workflow automation pipeline.
- n8n forms the backbone of triggers, integrations, and automation
- Dify serves as the AI brain by creating LLM apps
- Mermaid documents system structures and flows
All three tools are open source and support self-hosting, making them especially useful in environments where data sovereignty and cost savings matter.
Start now by installing n8n and Dify with Docker, and draw your first diagram with Mermaid.