✍️ 필사 모드: n8n, Dify, and Mermaid Complete Guide -- AI Agent and Diagram Automation

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.

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.

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

1. Document Upload: Supports PDF, TXT, Markdown, HTML, DOCX
2. Chunk Settings: Chunk size (default 500 tokens), overlap (default 50 tokens)
3. Embedding Model Selection: OpenAI text-embedding-3-small, Cohere, local models
4. 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

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

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:

• TD is Top-Down, LR is 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

1. n8n detects new tech articles from RSS feeds
2. Dify Agent reads and summarizes the original content
3. Dify Workflow generates Mermaid diagram code based on the summary
4. n8n Code node renders Mermaid to SVG
5. n8n assembles a Markdown blog post and creates a GitHub PR
6. 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.