How to Draw Requirement Diagrams in Mermaid

2026-03-05 · MermZen Tutorial

Requirement diagrams visualize project requirements, relationships between requirements, and verification methods. They are ideal for requirements management, project planning, and software development lifecycle management. Mermaid uses requirementDiagram keyword for requirement diagrams.

Declaring a Chart

Use requirementDiagram keyword:

requirementDiagram
    title Requirement Diagram Title

在 MermZen 中试试 →

Requirement Definition

Create requirement nodes:

requirementDiagram
    title Basic Requirement Diagram
    requirement "Requirement 1" {
        id: R1
        text: Users can log into the system
        type: functional
        status: approved
    }
    requirement "Requirement 2" {
        id: R2
        text: Users can view their personal information
        type: functional
        status: pending
    }
    requirement "Requirement 3" {
        id: R3
        text: System should have responsive design
        type: non-functional
        status: approved
    }

在 MermZen 中试试 →

Requirement Relationships

Define relationships between requirements:

requirementDiagram
    title Requirement Relationship Diagram
    requirement "Login Functionality" {
        id: R1
        text: Users can log into the system
    }
    requirement "Profile Management" {
        id: R2
        text: Users can view and edit their profile
    }
    requirement "Responsive Design" {
        id: R3
        text: System should display properly on all devices
    }

    "Login Functionality" --> "Profile Management" : requires
    "Login Functionality" --> "Responsive Design" : requires
    "Profile Management" --> "Responsive Design" : requires

在 MermZen 中试试 →

Full Example: Software Project Requirements Management

requirementDiagram
    title E-Commerce System Requirements
    requirement "User Management" {
        id: R1
        text: Users can register, log in, and modify personal information
        type: functional
        status: approved
        priority: high
        verification: "User testing"
    }
    requirement "Product Display" {
        id: R2
        text: System can display product lists, details, and categories
        type: functional
        status: approved
        priority: high
        verification: "Automated testing"
    }
    requirement "Shopping Cart" {
        id: R3
        text: Users can add, delete, and modify shopping cart items
        type: functional
        status: pending
        priority: medium
        verification: "Manual testing"
    }
    requirement "Payment Functionality" {
        id: R4
        text: Supports multiple payment methods (Alipay, WeChat, Credit Card)
        type: functional
        status: approved
        priority: high
        verification: "Integration testing"
    }
    requirement "Performance Requirements" {
        id: R5
        text: System response time should be less than 2 seconds
        type: non-functional
        status: approved
        priority: medium
        verification: "Performance testing"
    }

    "User Management" --> "Product Display" : requires
    "User Management" --> "Shopping Cart" : requires
    "Product Display" --> "Shopping Cart" : requires
    "Shopping Cart" --> "Payment Functionality" : requires
    "User Management" --> "Performance Requirements" : impacts
    "Product Display" --> "Performance Requirements" : impacts
    "Shopping Cart" --> "Performance Requirements" : impacts
    "Payment Functionality" --> "Performance Requirements" : impacts

在 MermZen 中试试 →

Quick Reference

Syntax	Function
`requirementDiagram`	Declare requirement diagram
`title Title`	Set chart title
`requirement "Name" { ... }`	Define requirement
`id: identifier`	Set unique requirement identifier
`text: description`	Set requirement description
`type: type`	Set requirement type (functional/non-functional)
`status: status`	Set requirement status (approved/pending/rejected)
`priority: priority`	Set requirement priority (high/medium/low)
`verification: method`	Set verification method
`"Requirement1" --> "Requirement2" : relationship`	Define relationship between requirements
`%% comment`	Line comment

Next Step

After mastering requirement diagrams, you can continue learning other Mermaid diagram types or check our Mermaid Cheat Sheet for complete syntax reference.

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