Mermaid C4 diagrams as text

All five Mermaid C4 headers use renderGlyphDiagram. Nodes carry stereotypes, technology, and descriptions as text; boundaries become groups. These are graph layouts, not pixel-identical Mermaid C4 drawings.

System context

                                                            ┌────────────────────┐      
                                                Charges     │      Payments      │      
                                              ┌─────────────▶ [system, external] │      
                                              │             │   Card processor   │      
                                              │             └────────────────────┘      
                                              │                                         
                          ┌─────────────────┐ │             ┌────────────────────┐      
      ╭──────────╮ Orders │  Order portal   │ │  Dispatches │      Shipping      │      
      │   Buyer  │────────▶    [system]     ├─┼─────────────▶ [system, external] │      
      │ [person] │        │ Online checkout │ │             │   Parcel tracking  │      
      ╰──────────╯        └─────────────────┘ │             └────────────────────┘      
                                              │                                         
                                              │             ┌────────────────────┐      
                                              │             │        Email       │      
                                              └─────────────▶ [system, external] │      
                                               Notifies     │    Order updates   │      
                                                            └────────────────────┘      

Code

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

const { text } = await renderGlyphDiagram(`
C4Context
 Person(buyer, "Buyer")
 System(portal, "Order portal", "Online checkout")
 System_Ext(pay, "Payments", "Card processor")
 System_Ext(ship, "Shipping", "Parcel tracking")
 System_Ext(mail, "Email", "Order updates")
 Rel(buyer, portal, "Orders")
 Rel(portal, pay, "Charges")
 Rel(portal, ship, "Dispatches")
 Rel(portal, mail, "Notifies")
`, {
  target: "chat",
  width: 88,
  height: 29,
  overflow: "expand"
});
console.log(text);

Containers

           ······················Shop·······················            
           ·                                               ·            
           · ┌─────────────┐            ◜────────────────◝ ·            
           · │     API     │   Stores   │     Orders     │ ·            
           · │ [container] │────────────▶ [container db] │ ·            
           · │    Node     │            │    Postgres    │ ·            
           · └─────────────┘            ◟────────────────◞ ·            
           ·                                               ·            
           ·················································            

Code

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

const { text } = await renderGlyphDiagram(`
C4Container
 System_Boundary(shop, "Shop") {
 Container(api, "API", "Node")
 ContainerDb(db, "Orders", "Postgres")
 }
 Rel(api, db, "Stores")
`, {
  target: "chat",
  width: 72,
  height: 24,
  overflow: "expand"
});
console.log(text);

Components

             ·····················API·····················              
             ·                                           ·              
             · ┌─────────────┐           ┌─────────────┐ ·              
             · │  Checkout   │   Saves   │ Repository  │ ·              
             · │ [component] │───────────▶ [component] │ ·              
             · │    HTTP     │           │     SQL     │ ·              
             · └─────────────┘           └─────────────┘ ·              
             ·                                           ·              
             ·············································              

Code

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

const { text } = await renderGlyphDiagram(`
C4Component
 Container_Boundary(api, "API") {
 Component(handler, "Checkout", "HTTP")
 Component(repo, "Repository", "SQL")
 }
 Rel(handler, repo, "Saves")
`, {
  target: "chat",
  width: 72,
  height: 24,
  overflow: "expand"
});
console.log(text);

Dynamic interactions

             ┌─────────────┐                ┌─────────────┐             
             │     Web     │ 1: Submit cart │     API     │             
             │ [container] │────────────────▶ [container] │             
             │    React    │                │    Node     │             
             └──────▲──────┘                └─────────────┘             
                    │         2: Confirm           │                    
                    └──────────────────────────────┘                    

Code

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

const { text } = await renderGlyphDiagram(`
C4Dynamic
 Container(web, "Web", "React")
 Container(api, "API", "Node")
 Rel(web, api, "Submit cart")
 Rel(api, web, "Confirm")
`, {
  target: "chat",
  width: 72,
  height: 24,
  overflow: "expand"
});
console.log(text);

Deployment

           ···············Production [Linux]················            
           ·                                               ·            
           · ┌─────────────┐            ◜────────────────◝ ·            
           · │     API     │   Writes   │     Orders     │ ·            
           · │ [container] │────────────▶ [container db] │ ·            
           · │    Node     │            │    Postgres    │ ·            
           · └─────────────┘            ◟────────────────◞ ·            
           ·                                               ·            
           ·················································            

Code

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

const { text } = await renderGlyphDiagram(`
C4Deployment
 Deployment_Node(prod, "Production", "Linux") {
 Container(api, "API", "Node")
 ContainerDb(db, "Orders", "Postgres")
 }
 Rel(api, db, "Writes")
`, {
  target: "chat",
  width: 72,
  height: 24,
  overflow: "expand"
});
console.log(text);

Syntax and limits

• Use Person, System, Container, and Component declarations with the appropriate header. External variants add an external marker.
• Database variants draw cylinders; queue variants draw rectangles. Person nodes use rounded outlines.
• Enterprise_Boundary, System_Boundary, Container_Boundary, and Deployment_Node enclose related nodes where supported.
• Rel and its directional variants create edges; dynamic relationships retain order in their labels.
• Index, style, layout, title, and asset directives are inert and reported. Set a rendered title through the API’s title option.
• C4 captions often need a wider or taller budget. The fitter protects words and captions before gutters; an explicit direction takes precedence over automatic C4 orientation.