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.

Why Use Requirement Diagrams?

Requirement diagrams play an important role in software engineering and project management:

Visualize requirement hierarchy and relationships: Clearly show parent-child relationships and dependencies between requirements, helping teams understand the requirement structure
Track dependencies between requirements: Identify which requirements depend on others, facilitating development planning and risk identification
Manage "how requirements are verified": Associate verification methods with requirements, ensuring each requirement has corresponding tests or reviews

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 中试试 →

Requirements Management Practices

Requirement diagrams support three main types of requirements:

Functional Requirements

Functions that the system must implement, describing "what the system does":

requirementDiagram
    title Functional Requirement Example
    requirement "User Authentication" {
        id: FR-001
        text: System supports username/password login
        type: functional
        status: approved
    }

Non-Functional Requirements

Requirements for performance, security, usability, etc., describing "how well the system performs":

requirementDiagram
    title Non-Functional Requirement Example
    requirement "Performance Requirement" {
        id: NFR-001
        text: System response time under 2 seconds
        type: non-functional
        status: approved
    }

Constraint Requirements

External conditions such as technical limitations, budget, and time:

requirementDiagram
    title Constraint Requirement Example
    requirement "Tech Stack Constraint" {
        id: CON-001
        text: Must use React framework for frontend
    }

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 中试试 →

Requirement Verification Methods

Every requirement should be verifiable. Mermaid requirement diagrams use element nodes and verifies relationships to annotate verification methods:

requirementDiagram
    title Requirement Verification Example
    requirement "User Login" {
        id: R1
        text: Users can log in with username and password
        type: functional
        status: approved
    }
    element "Login Test Case" {
        type: test
    }
    element "Security Review" {
        type: review
    }
    
    "Login Test Case" - verifies -> "User Login"
    "Security Review" - verifies -> "User Login"

Common verification methods include:

Verification Type	Description	Applicable Scenarios
Test	Automated testing, unit testing, integration testing	Functional requirements
Review	Code review, design review, requirement review	Non-functional requirements, architecture requirements
Demonstration	Demonstrate functionality to stakeholders	User interface requirements
Analysis	Performance analysis, security analysis	Performance requirements, security requirements

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 中试试 →

Best Practices

1. Unique ID for Each Requirement

Use meaningful ID naming conventions for easy tracking and referencing:

requirementDiagram
    requirement "User Management Module" {
        id: R1
        text: Complete user management functionality
    }
    requirement "User Registration" {
        id: R1.1    ← Sub-requirement uses parent ID prefix
        text: New users can register accounts
    }

2. Clearly Define Requirement Status

Explicitly annotate the current status of each requirement:

approved — Approved, ready for development
pending — Pending approval, needs further discussion
rejected — Rejected, no longer considered

3. Establish "Contains" Relationships Between Requirements

Use contains relationship to organize requirement hierarchy:

requirementDiagram
    title Requirement Hierarchy
    requirement "User Management Module" {
        id: R1
        text: Complete user management functionality
        type: functional
    }
    requirement "User Registration" {
        id: R1.1
        text: New users can register accounts
        type: functional
    }
    requirement "User Login" {
        id: R1.2
        text: Registered users can log in
        type: functional
    }
    requirement "Password Reset" {
        id: R1.3
        text: Users can reset passwords
        type: functional
    }
    
    "User Management Module" - contains -> "User Registration"
    "User Management Module" - contains -> "User Login"
    "User Management Module" - contains -> "Password Reset"

4. Set Verification Standards for Non-Functional Requirements

Non-functional requirements (performance, security, etc.) must have clear verification standards:

requirementDiagram
    requirement "Response Time" {
        id: NFR-001
        text: Page load time under 3 seconds
        type: non-functional
        verification: "Performance testing"
    }

Comparison with Other Diagrams

Requirement Diagram vs Use Case Diagram

Feature	Requirement Diagram	Use Case Diagram
Focus	Requirement hierarchy and verification	User-system interaction
Main Elements	Requirement nodes, verification elements	Actors, use cases, relationships
Applicable Scenarios	Requirements management, project planning	Requirements analysis, system design
Relationship Types	requires, contains, verifies	include, extend, generalize

Requirement diagrams emphasize hierarchical relationships between requirements and verification methods, suitable for project managers and requirements engineers.

Use case diagrams emphasize how users interact with the system, suitable for requirements analysis and system design phases.

Requirement Diagram vs Class Diagram

Feature	Requirement Diagram	Class Diagram
Focus	Requirement hierarchy	System structure design
Main Elements	Requirements, elements	Classes, interfaces, relationships
Applicable Phase	Requirements phase	Design phase
Purpose	Understand and manage requirements	Guide code implementation

Requirement diagrams are abstractions of requirement hierarchy, describing "what the system should do".

Class diagrams are abstractions of system structure, describing "how the system is implemented".

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.