Mermaid Requirement Diagrams

Requirement diagrams visualize system requirements and their relationships. Perfect for documenting functional requirements, tracing requirements, and showing requirement dependencies.

Use Case

Use requirement diagrams when you need to:

• Document system requirements
• Show requirement relationships
• Trace requirements to design
• Visualize requirement dependencies
• Manage requirement coverage

Code

 1```mermaid
 2requirementDiagram
 3    requirement FunctionalReq {
 4        id: 1
 5        text: System shall process payments
 6        risk: high
 7        verifymethod: test
 8    }
 9    
10    element PaymentSystem {
11        type: system
12    }
13    
14    FunctionalReq - satisfies -> PaymentSystem
15```

Result:

Examples

Example 1: System Requirements

 1```mermaid
 2requirementDiagram
 3    requirement Req1 {
 4        id: 1
 5        text: User authentication required
 6        risk: high
 7        verifymethod: test
 8    }
 9    
10    requirement Req2 {
11        id: 2
12        text: Data encryption at rest
13        risk: high
14        verifymethod: inspection
15    }
16    
17    requirement Req3 {
18        id: 3
19        text: API response time < 200ms
20        risk: medium
21        verifymethod: test
22    }
23    
24    element AuthSystem {
25        type: system
26    }
27    
28    element Database {
29        type: system
30    }
31    
32    Req1 - satisfies -> AuthSystem
33    Req2 - satisfies -> Database
34    Req3 - satisfies -> AuthSystem
35```

Result:

Requirement Properties

• id - Requirement identifier
• text - Requirement description
• risk - Risk level (high, medium, low)
• verifymethod - Verification method (test, inspection, analysis, demonstration)

Relationship Types

• - satisfies -> - Requirement satisfies element
• - contains -> - Requirement contains sub-requirement
• - derives -> - Requirement derives from another
• - refines -> - Requirement refines another

Notes

• Requirements must have id and text
• Elements represent system components
• Relationships show requirement traceability
• Use descriptive requirement text

Gotchas/Warnings

• ⚠️ Properties: Must include id and text in requirements
• ⚠️ Risk: Use consistent risk levels
• ⚠️ Relationships: Use appropriate relationship types
• ⚠️ Complexity: Large requirement diagrams can be hard to maintain

Related Snippets

• Architecture Diagrams (C4 Model)
  Create system architecture diagrams using C4 model with Mermaid
• Chart.js Bar Chart
  Create bar charts for data visualization
• Graphviz DOT Diagrams
  Create complex graph layouts with Graphviz DOT language
• KaTeX Math Examples and Tips
  Comprehensive guide to KaTeX math notation with examples and tips
• Mermaid Arbitrary Graphs
  Create arbitrary graphs and networks with Mermaid
• Mermaid Block Diagrams
  Create block diagrams for system architecture with Mermaid
• Mermaid Charts (Pie, Bar, Line)
  Create pie charts, bar charts, and line charts with Mermaid
• Mermaid Class Diagrams (UML)
  Create UML class diagrams with Mermaid
• Mermaid Entity Relationship Diagrams
  Create Entity Relationship Diagrams (ERD) with Mermaid
• Mermaid Flowchart
  Create flowcharts and decision trees with Mermaid
• Mermaid Gantt Chart
  Create Gantt charts for project timelines and scheduling
• Mermaid Git Diagrams
  Create Git branch and commit diagrams with Mermaid
• Mermaid Kanban Boards
  Create Kanban boards for project management with Mermaid
• Mermaid Mindmaps
  Create mindmaps for brainstorming and organizing ideas with Mermaid
• Mermaid Packet Diagrams
  Create packet diagrams for network protocols with Mermaid
• Mermaid Quadrant Charts
  Create quadrant charts for prioritization with Mermaid
• Mermaid Radar Charts
  Create radar charts for multi-dimensional comparisons with Mermaid
• Mermaid Sankey Diagrams
  Create Sankey diagrams for flow visualization with Mermaid
• Mermaid Sequence Diagram
  Create sequence diagrams for interactions and API flows
• Mermaid State Diagrams
  Create state diagrams and state machines with Mermaid
• Mermaid Timeline Diagrams
  Create timeline diagrams for chronological events with Mermaid
• Mermaid Treemap Diagrams
  Create treemap diagrams for hierarchical data visualization with Mermaid
• Mermaid User Journey Diagrams
  Create user journey maps with Mermaid
• Mermaid ZenUML Diagrams
  Create ZenUML sequence diagrams with Mermaid
• P5.js Interactive Visualizations
  Create interactive visualizations and animations with P5.js