Mermaid class diagrams as ASCII text

Use classDiagram with renderGlyphDiagram. Class names, members, and relationship captions become text; the renderer does not execute methods.

Classes and inheritance

                             ┌────────────────┐                               
                             │     Account    │                               
                             ├────────────────┤                               
                             │ +String email  │                               
                             ├────────────────┤                               
                             │ +signIn() bool │                               
                             └──────△─△───────┘                               
                                    │ │                                       
                         ┌──────────┘ └──────────┐                            
                         │                       │                            
                 ┌────────────────┐    ┌───────────────────┐                  
                 │      Staff     │    │       Buyer       │                  
                 ├────────────────┤    ├───────────────────┤                  
                 │ +refund() bool │    │ +checkout() Order │                  
                 └────────────────┘    └───────────────────┘                  
                                                 │                            
                                          places │                            
                                                 │                            
                                         ┌───────▼────────┐                   
                                         │      Order     │                   
                                         ├────────────────┤                   
                                         │ +String status │                   
                                         ├────────────────┤                   
                                         │ +submit()      │                   
                                         └───────◆────────┘                   
                                                 │                            
                                [1] contains [*] │                            
                                                 │                            
                                         ┌───────────────┐                    
                                         │     Line      │                    
                                         ├───────────────┤                    
                                         │ +int quantity │                    
                                         └───────────────┘                    

Code

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

const { text } = await renderGlyphDiagram(`
classDiagram
 class Account {
 +String email
 +signIn() bool
 }
 class Buyer {
 +checkout() Order
 }
 class Staff {
 +refund() bool
 }
 class Order {
 +String status
 +submit()
 }
 class Line {
 +int quantity
 }
 Account <|-- Buyer
 Account <|-- Staff
 Buyer --> Order : places
 Order "1" *-- "*" Line : contains
`, {
  target: "chat",
  width: 78,
  height: 30,
  overflow: "expand"
});
console.log(text);

Composition and multiplicity

                              ┌───────────┐                     
                              │   Order   │                     
                              ├───────────┤                     
                              │ +submit() │                     
                              └─────◆─────┘                     
                                    │                           
                   [1] contains [*] │                           
                                    │                           
                            ┌───────────────┐                   
                            │     Line      │                   
                            ├───────────────┤                   
                            │ +int quantity │                   
                            └───────────────┘                   

Code

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

const { text } = await renderGlyphDiagram(`
classDiagram
 class Order {
 +submit()
 }
 class Line {
 +int quantity
 }
 Order "1" *-- "*" Line : contains
`, {
  target: "chat",
  width: 64,
  height: 16,
  overflow: "expand"
});
console.log(text);

Syntax and limits

• Braced member rows form compartments below the class header. Visibility markers and generic type text remain literal.
• Inheritance and realization use triangle heads; aggregation and composition use open and filled diamonds.
• Associations, dependencies, relationship labels, quoted multiplicities, namespaces, and notes are adapted into graph nodes, groups, and captions.
• Class identifiers may contain hyphens. Spaced generic types are accepted.
• Configuration, styles, and URLs are inert and reported. Cell budgets can wrap or omit captions: inspect the fidelity report and increase the budget.