Mermaid requirement diagrams as text

Pass requirementDiagram source to renderGlyphDiagram. Fields become compartment rows and relations become labelled edges.

Connect an implementation to a requirement

                           ┌─────────────────────┐    ┌─────────────────────┐           
                           │        suite        │    │         api         │           
                           │     <<element>>     │    │     <<element>>     │           
                           ├─────────────────────┤    ├─────────────────────┤           
                           │ type: test          │    │ type: service       │           
                           │ docref: Retry tests │    │ docref: Payment API │           
                           └─────────────────────┘    └─────────────────────┘           
                                      ╎                          ╎                      
                                      ╎ verifies       satisfies ╎                      
                                      └╌╌╌╌╌╌╌╌╌╌╌╌┬╌╌╌╌╌╌╌╌╌╌╌╌╌┘                      
                                                   │                                    
                                     ┌─────────────▼─────────────┐                      
           ┌────────────────────┐    │           safe            │                      
           │       ledger       │    │      <<requirement>>      │                      
           │     <<element>>    │    ├───────────────────────────┤                      
           ├────────────────────┤    │ id: R1                    │                      
           │ type: service      │    │ text: No duplicate charge │                      
           │ docref: Refund log │    │ risk: high                │                      
           └────────────────────┘    │ verifymethod: test        │                      
                     ╎               └───────────────────────────┘                      
                     ╎                             ╎                                    
                     ╎ satisfies          traces   ╎                                    
                     └╌╌╌╌╌╌╌╌╌╌╌╌╌╌┬╌╌╌╌╌╌╌╌╌╌╌╌╌╌┘                                    
                                    │                                                   
                      ┌─────────────▼─────────────┐                                     
                      │           audit           │                                     
                      │      <<requirement>>      │                                     
                      ├───────────────────────────┤                                     
                      │ id: R2                    │                                     
                      │ text: Record every refund │                                     
                      │ risk: medium              │                                     
                      │ verifymethod: test        │                                     
                      └───────────────────────────┘                                     

Code

import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram(`
requirementDiagram
 requirement safe {
 id: R1
 text: "No duplicate charge"
 risk: high
 verifymethod: test
 }
 requirement audit {
 id: R2
 text: "Record every refund"
 risk: medium
 verifymethod: test
 }
 element api {
 type: service
 docref: "Payment API"
 }
 element suite {
 type: test
 docref: "Retry tests"
 }
 element ledger {
 type: service
 docref: "Refund log"
 }
 api - satisfies -> safe
 suite - verifies -> safe
 ledger - satisfies -> audit
 safe - traces -> audit
`, {
  target: "chat",
  width: 88,
  height: 34,
  overflow: "expand"
});
console.log(text);

Record verification

                     ┌────────────────────┐                     
                     │        suite       │                     
                     │     <<element>>    │                     
                     ├────────────────────┤                     
                     │ type: test         │                     
                     │ docref: Load tests │                     
                     └────────────────────┘                     
                               ╎                                
                      verifies ╎                                
                               ╎                                
                 ┌─────────────▼──────────────┐                 
                 │            fast            │                 
                 │ <<performanceRequirement>> │                 
                 ├────────────────────────────┤                 
                 │ id: R2                     │                 
                 │ text: Checkout under 2s    │                 
                 │ risk: medium               │                 
                 │ verifymethod: analysis     │                 
                 └────────────────────────────┘                 

Code

import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram(`
requirementDiagram
 performanceRequirement fast {
 id: R2
 text: "Checkout under 2s"
 risk: medium
 verifymethod: analysis
 }
 element suite {
 type: test
 docref: "Load tests"
 }
 suite - verifies -> fast
`, {
  target: "chat",
  width: 64,
  height: 16,
  overflow: "expand"
});
console.log(text);

Syntax and limits

• Requirement declarations include requirement, functionalRequirement, interfaceRequirement, performanceRequirement, physicalRequirement, and designConstraint.
• Fields include id, text, risk, and verifymethod. Elements include type and docref.
• Relations are contains, copies, derives, satisfies, verifies, refines, and traces.
• Markdown is reduced to plain text; styles and external assets are inert and reported.
• Long field text wraps inside compartments. Give detailed requirements more rows and inspect render notes before sharing.