# Mermaid architecture diagrams as text

Pass `architecture` or `architecture-beta` source to `renderGlyphDiagram`. Services become labelled nodes and icon names become text tags.

## Connect an API to storage



```mermaid
architecture-beta
 service api(server)[Order API]
 service db(database)[Orders]
 service queue(server)[Job queue]
 service worker(server)[Receipt worker]
 service files(disk)[Receipts]
 service mail(cloud)[Email gateway]
 api:R --> L:db
 api:R --> L:queue
 queue:R --> L:worker
 worker:R --> L:files
 worker:R --> L:mail
```

```text
                      ◜─────────────◝                                         
                   ┌──▶ [db] Orders │                                         
┌────────────────┐ │  ◟─────────────◞                       ┌───────────────┐ 
│ [server] Order ├─┤                                      ┌─▶ [cloud] Email │ 
│       API      │ │ ┌──────────────┐  ┌────────────────┐ │ │    gateway    │ 
└────────────────┘ └─▶ [server] Job │──▶    [server]    ├─┤ └───────────────┘ 
                     │     queue    │  │ Receipt worker │ │                   
                     └──────────────┘  └────────────────┘ │ ┌──────────┐      
                                                          └─▶  [disk]  │      
                                                            │ Receipts │      
                                                            └──────────┘      
```



## Group services



```mermaid
architecture-beta
 group cloud(cloud)[Production]
 service api(server)[API] in cloud
 service jobs(server)[Jobs] in cloud
 service files(disk)[Receipts] in cloud
 api:R --> L:jobs
 jobs:B --> T:files
```

```text
······················[cloud] Production························
·                                                              ·
· ┌──────────────┐    ┌───────────────┐    ┌─────────────────┐ ·
· │ [server] API │────▶ [server] Jobs │────▶ [disk] Receipts │ ·
· └──────────────┘    └───────────────┘    └─────────────────┘ ·
·                                                              ·
································································
```



## Syntax and limits

- Declare `service id(icon)[Label]`, `group id(icon)[Label]`, and membership with `in groupId`.
- Connections use side prefixes such as `api:R --> L:db`. The first source side guides the initial layout direction.
- Junctions become `+` nodes. Database icons become tags such as `[db]`; external icon assets do not load.
- Port sides, alignment, group-edge attachment, and self-loops are approximated where needed and recorded in the report.
- The result is a text graph, so icon artwork and exact Mermaid positioning are not preserved. Use explicit [direction and cell budgets](/diagrams/options/) to tune it.