Our Architecture DSL is designed to be lean, readable, and close to Mermaid flowchart syntax. It translates automatically into clean, styled diagrams.
1. Component Type Prefixes & Icons
| Prefix |
Category |
Icon & Shape |
Example |
client: | Browser / Mobile | π€ π± π» | client:Web App [React Frontend] |
gateway: | API Gateway | πͺ | gateway:Kong [API Gateway] |
lb: | Load Balancer | βοΈ | lb:ALB [Application Load Balancer] |
server: | Compute / Microservice | βοΈ | server:OrderSvc [Order Service] |
db: | Database (SQL/NoSQL) | ποΈ (Cylinder) | db:Postgres [(Orders Database)] |
cache: | In-Memory Cache | β‘ | cache:Redis [(Session Cache)] |
queue: | Queue / Event Broker | π¬ | queue:Kafka [[Events Stream]] |
storage: | Object Storage | πͺ£ | storage:S3 [(Media Bucket)] |
sec: | WAF / Security | π‘οΈ | sec:WAF [Cloudflare Shield] |
auth: | Auth / IAM | π | auth:Auth0 [Identity Provider] |
ext: | External / Third-party | π | ext:Stripe [Payment Gateway] |
monitor: | Telemetry / Logs | π | monitor:Datadog [Metrics] |
2. Connections & Protocols
| Syntax |
Connection Style |
Example |
-> or --> | Solid arrow | [Client] -> [API Gateway] |
->|Protocol| | Solid arrow with label | [Client] ->|HTTPS / JSON| [Gateway] |
-.-> or ..> | Dashed / Async arrow | [Service] -.->|Async Event| [Queue] |
<-> or <--> | Bidirectional arrow | [Service] <->|gRPC| [Auth] |
-- or --- | Solid line without arrow | [Node A] -- [Node B] |
| Chained | Multi-hop connection | [A] -> [B] -> [C] |
3. Grouping & Subgraphs
group "VPC / Private Network" {
server:Order Service
server:Auth Service
db:Postgres
}