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

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

Code

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

const { text } = await renderGlyphDiagram(`
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
`, {
  target: "chat",
  width: 78,
  height: 22,
  overflow: "expand"
});
console.log(text);

Group services

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

Code

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

const { text } = await renderGlyphDiagram(`
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
`, {
  target: "chat",
  width: 64,
  height: 16,
  overflow: "expand"
});
console.log(text);

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 to tune it.