How to Draw Architecture Diagrams in Mermaid

2026-03-05 · MermZen Tutorial

Architecture diagrams visualize system architectures, component relationships, and deployment patterns. They are ideal for system design, architecture reviews, and technical documentation. Mermaid uses architectureBeta keyword for architecture diagrams.

Declaring a Chart

Use architectureBeta keyword:

architectureBeta
    title System Architecture Diagram

在 MermZen 中试试 →

Component Definition

Define system components including services, databases, external systems:

architectureBeta
    title Basic Architecture Components
    container "Frontend Application" {
        component "User Interface"
        component "API Calls"
    }
    container "Backend Services" {
        component "Business Logic"
        component "Data Access"
    }
    database "Database" {
        component "User Data"
        component "Business Data"
    }
    system "External Payment System"

在 MermZen 中试试 →

Connection Relationships

Define connections and dependencies between components:

architectureBeta
    title Component Relationship Diagram
    container "Frontend Application" {
        component "User Interface"
        component "API Calls"
    }
    container "Backend Services" {
        component "Business Logic"
        component "Data Access"
    }
    database "Database" {
        component "User Data"
        component "Business Data"
    }
    system "External Payment System"

    "User Interface" --> "API Calls"
    "API Calls" --> "Business Logic"
    "Business Logic" --> "Data Access"
    "Data Access" --> "User Data"
    "Data Access" --> "Business Data"
    "Business Logic" --> "External Payment System"

在 MermZen 中试试 →

Full Example: Microservices Architecture

architectureBeta
    title E-Commerce System Microservices Architecture
    container "User Interface Layer" {
        component "Web Interface"
        component "Mobile App"
        component "Admin Console"
    }
    container "API Gateway" {
        component "Request Routing"
        component "Authentication"
        component "Rate Limiting & Circuit Breaking"
    }
    container "Business Services Layer" {
        component "User Service"
        component "Product Service"
        component "Order Service"
        component "Payment Service"
        component "Inventory Service"
    }
    database "Data Storage" {
        component "MySQL Primary"
        component "MySQL Replica"
        component "Redis Cache"
    }
    system "External Systems" {
        component "Alipay"
        component "WeChat Pay"
        component "Logistics System"
    }

    "Web Interface" --> "API Gateway"
    "Mobile App" --> "API Gateway"
    "Admin Console" --> "API Gateway"

    "API Gateway" --> "User Service"
    "API Gateway" --> "Product Service"
    "API Gateway" --> "Order Service"
    "API Gateway" --> "Payment Service"
    "API Gateway" --> "Inventory Service"

    "User Service" --> "MySQL Primary"
    "User Service" --> "Redis Cache"
    "Product Service" --> "MySQL Primary"
    "Product Service" --> "Redis Cache"
    "Order Service" --> "MySQL Primary"
    "Inventory Service" --> "MySQL Primary"

    "Payment Service" --> "Alipay"
    "Payment Service" --> "WeChat Pay"
    "Order Service" --> "Logistics System"

在 MermZen 中试试 →

Quick Reference

Syntax	Function
`architectureBeta`	Declare architecture diagram
`title Title`	Set chart title
`container "Name" { ... }`	Define container component
`component "Name"`	Define internal component
`database "Name" { ... }`	Define database component
`system "Name"`	Define external system
`"Component1" --> "Component2"`	Define connection between components
`%% comment`	Line comment

Next Step

After mastering architecture diagrams, continue learning Mermaid Block Diagrams for complex system architecture and process flow visualization.

To try the above code in MermZen, click Open Editor and paste the code there.