Basic Components

Every architecture diagram is built from nodes (components) and edges (connections).

Nodes

Nodes represent components in your system: services, databases, queues, users, etc.

Syntax

id:Label

• id - Unique identifier (used for edges)

• Label - Display text

Examples

@arch
[nodes]
  api:API Gateway
  users:User Service
  orders:Order Service
  db:PostgreSQL Database
  queue:Message Queue

Rendered diagram

Naming Conventions

ID Style	Example	Best For
Short	api, db, q	Small diagrams
Descriptive	userService, orderDb	Large diagrams
Namespaced	backend_api, data_db	Multi-team systems

Multi-word Labels

Labels can contain spaces without quotes:

[nodes]
  api:API Gateway Service
  db:PostgreSQL Primary Database
  cache:Redis Session Cache

Rendered diagram

Special Characters in Labels

For labels with special characters, use quotes:

[nodes]
  endpoint:"GET /users/{id}"
  config:"config.yaml"

Rendered diagram

Edges

Edges show relationships between nodes.

Basic Syntax

source->target
source->target:label

Examples

@arch
[nodes]
  client:Client
  api:API
  db:Database

[edges]
  client->api
  api->db:query
  db-->api:results

Rendered diagram

Edge Types

Syntax	Style	Use For
->	Solid arrow	Synchronous calls
-->	Dashed arrow	Async, responses
..	Dotted line	Weak dependency
<->	Bidirectional solid	Two-way sync
<-->	Bidirectional dashed	Two-way async

Edge Labels

Add context with labels:

[edges]
  api->db:SELECT users
  api->cache:GET session
  queue-->worker:process job

Complete Example

@arch
[nodes]
  web:Web App
  mobile:Mobile App
  api:API Gateway
  auth:Auth Service
  users:User Service
  orders:Order Service
  db:PostgreSQL
  cache:Redis

[edges]
  web->api:REST
  mobile->api:REST
  api->auth:validate token
  api->users:get user
  api->orders:create order
  users->db:query
  orders->db:query
  auth->cache:session lookup

Rendered diagram

Next Steps

• Shapes - Visual differentiation

• Connections - Advanced edge styling