Skip to content
glyphcss

Mermaid entity relationship diagrams as text

Use erDiagram with renderGlyphDiagram. Entity attributes occupy compartments; relationship endpoints carry cardinality symbols.

                                   ┌──────────┐                               
                                   │ CUSTOMER │                               
                                   └────┼─────┘                               
                                        ┼                                     
                                 places │                                     
                                        ○                                     
                                    ┌───v───┐                                 
                                    │ ORDER │                                 
                                    └──┼─┼──┘                                 
                                       ┼ ┼                                    
                              receives │ │ contains                           
                                 ┌─────┘ └─────┐                              
                                 ○             ┼                              
                            ┌────v────┐     ┌──v───┐                          
                            │ PAYMENT │     │ LINE │                          
                            └────┼────┘     └──^───┘                          
                                 ┼             ○                              
                        reverses │  references │                              
                                 ○             ┼                              
                             ┌───┼────┐   ┌────┼────┐                         
                             │ REFUND │   │ PRODUCT │                         
                             └────────┘   └─────────┘                         
Code
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram(`
erDiagram
 CUSTOMER ||--o{ ORDER : places
 ORDER ||--|{ LINE : contains
 LINE }o--|| PRODUCT : references
 ORDER ||--o{ PAYMENT : receives
 PAYMENT ||--o| REFUND : reverses
`, {
  target: "chat",
  width: 78,
  height: 25,
  overflow: "expand"
});
console.log(text);
                      ┌─────────────────┐                       
                      │      ORDER      │                       
                      ├─────────────────┤                       
                      │ int id PK       │                       
                      │ int buyer_id FK │                       
                      └────────┼────────┘                       
                               ┼                                
                      contains │                                
                               ┼                                
                     ┌─────────v──────────┐                     
                     │        LINE        │                     
                     ├────────────────────┤                     
                     │ int order_id PK,FK │                     
                     │ int quantity       │                     
                     └────────────────────┘                     
Code
import { renderGlyphDiagram } from "@glyphcss/diagrams";

const { text } = await renderGlyphDiagram(`
erDiagram
 ORDER {
 int id PK
 int buyer_id FK
 }
 LINE {
 int order_id PK, FK
 int quantity
 }
 ORDER ||--|{ LINE : contains
`, {
  target: "chat",
  width: 64,
  height: 16,
  overflow: "expand"
});
console.log(text);
  • Entity declarations can include typed attribute rows and PK, FK, or UK markers. Backtick identifiers and comments in attribute syntax remain text.
  • ||, o|, |{, and o{ encode one, zero-or-one, one-or-more, and zero-or-more endpoints. Crow-foot heads carry the distinction without color.
  • Solid/dotted relationships and captions are adapted to graph edges. Attributes are displayed, not validated as database types.
  • Styles and URLs are inert. Wide attribute lists need more columns or rows; use faithful detail to retain identities before splitting.