# 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



```mermaid
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")
```

```text
                                                            ┌────────────────────┐      
                                                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   │      
                                                            └────────────────────┘      
```



## Containers



```mermaid
C4Container
 System_Boundary(shop, "Shop") {
 Container(api, "API", "Node")
 ContainerDb(db, "Orders", "Postgres")
 }
 Rel(api, db, "Stores")
```

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



## Components



```mermaid
C4Component
 Container_Boundary(api, "API") {
 Component(handler, "Checkout", "HTTP")
 Component(repo, "Repository", "SQL")
 }
 Rel(handler, repo, "Saves")
```

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



## Dynamic interactions



```mermaid
C4Dynamic
 Container(web, "Web", "React")
 Container(api, "API", "Node")
 Rel(web, api, "Submit cart")
 Rel(api, web, "Confirm")
```

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



## Deployment



```mermaid
C4Deployment
 Deployment_Node(prod, "Production", "Linux") {
 Container(api, "API", "Node")
 ContainerDb(db, "Orders", "Postgres")
 }
 Rel(api, db, "Writes")
```

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



## 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.