Elements & Styling - Archyl Docs

Learn about the different element types at each C4 level and how to style them

Elements & Styling

Each C4 level supports different element types. Understanding these helps you create accurate and meaningful architecture diagrams.

Elements by Level

Level 1: System Context

The highest level shows your system in its environment:

Element Description
Software System Your main system or product
Person Users or personas interacting with the system
External System Third-party systems your system integrates with

Level 2: Container

Shows the technical building blocks within a system:

Element Description
Service Backend services or microservices
API REST, GraphQL, or gRPC APIs
Web App Frontend web applications
Mobile App iOS or Android applications
Database SQL or NoSQL databases
Cache Redis, Memcached, etc.
Message Queue Kafka, RabbitMQ, SQS, etc.
File Storage S3, blob storage, file systems

Level 3: Component

Shows the internal structure of a container:

Element Description
Controller HTTP request handlers
Handler Event or message handlers
Repository Data access layer
Adapter External system adapters
Middleware Request/response processors
Utility Helper functions and utilities
Model Domain models and entities

Level 4: Code

Shows implementation details:

Element Description
Class Object-oriented classes
Interface Interface definitions
Struct Data structures
Function Standalone functions
Method Class methods
Enum Enumeration types
Constant Constant values
Type Type definitions

Adding Elements

Using the Add Button

  1. Click Add in the toolbar
  2. Select the element type
  3. Enter name and description
  4. Click Create

Using Context Menu

  1. Right-click on empty canvas
  2. Select Add [Element Type]
  3. Fill in details
  4. Click Create

Drag and Drop

For containers and components, you can drag elements from the sidebar directly onto the canvas.

Styling Elements

Accessing Style Options

Right-click on any element to access styling:

  • Background color: Fill color of the element
  • Border color: Outline color
  • Text color: Label color
  • Icon: Visual icon representing the element

Color Palette

Archyl provides a curated color palette:

  • Blue shades: Services, APIs
  • Green shades: Databases, storage
  • Purple shades: External systems
  • Orange shades: Message queues, async
  • Gray shades: Utilities, infrastructure

Consistent Styling Tips

  • Use the same color for similar element types
  • Match colors to your organization's conventions
  • Consider colorblind-friendly palettes
  • Document your color scheme in project notes

Overlays

Overlays are colored visual groupings that help organize elements on your diagram.

Creating an Overlay

  1. Click Add and select Overlay
  2. Give it a name (e.g., "Backend Services", "Frontend Apps")
  3. Choose a color from the palette
  4. Click Create

Using Overlays

  • Drag elements into the overlay area
  • The overlay provides visual grouping
  • Overlays are level-specific
  • Different groupings at each C4 level

Overlay Use Cases

  • Group by team responsibility
  • Group by deployment unit
  • Group by domain (DDD bounded contexts)
  • Highlight critical path components
  • Show security boundaries

Overlay Best Practices

  1. Keep it simple: 3-5 overlays maximum per level
  2. Use meaningful names: "Payment Domain" not "Group 1"
  3. Consistent colors: Same overlay color across levels for related groupings
  4. Don't overlap: Avoid confusing overlapping overlays

Styling Relationships

Relationships can also be styled:

Property Options
Color Match element colors or use neutral
Line style Solid, dashed, dotted
Line width Thin, medium, thick
Arrow style Standard, hollow, none

Relationship Styling Tips

  • Use dashed lines for async communication
  • Use thicker lines for primary data flows
  • Color-code by protocol (HTTP, gRPC, events)

Next Steps