C4 Diagram

C4 diagrams implement the C4 model for visualizing software architecture at different levels of abstraction. Mermaid Studio provides comprehensive support for all C4 diagram types, making it easy to document your system architecture.

Basic Example

C4Context
    title System Context Diagram

    Person(user, "Customer", "A user of the application")
    System(app, "Web Application", "The main application")
    System_Ext(payment, "Payment Gateway", "Handles payments")

    Rel(user, app, "Uses", "HTTPS")
    Rel(app, payment, "Processes payments", "API")

What You Get

C4 diagrams have the most complete feature set:

• Syntax highlighting - Color-coded elements, boundaries, and relationships
• Code completion - Suggestions for C4 elements and relationship types
• Documentation hover - See element descriptions on hover
• Refactoring - Rename elements and update all references
• Find usages - See where elements are referenced
• Inlay hints - Inline parameter hints for clarity
• Code Vision - Relationship counts at a glance
• Navigation bar - Quick access to elements
• Code folding - Collapse boundaries and containers
• Formatting - Auto-format your diagram code
• Inspections - Detect undefined references

Quick Syntax Reference

Diagram types:

• C4Context - System context (highest level)
• C4Container - Container diagram
• C4Component - Component diagram
• C4Dynamic - Dynamic/sequence view

Elements:

C4Container
    Person(user, "User", "Description")
    System(sys, "System", "Description")
    System_Ext(ext, "External", "Description")
    Container(cont, "Container", "Tech", "Description")
    ContainerDb(db, "Database", "PostgreSQL", "Stores data")

Boundaries:

C4Container
    System_Boundary(b1, "My System") {
        Container(api, "API", "Node.js")
        ContainerDb(db, "Database", "PostgreSQL")
    }

Relationships:

• Rel(from, to, "label") - Basic relationship
• Rel(from, to, "label", "technology") - With technology
• BiRel(a, b, "label") - Bidirectional

For the complete syntax reference, see the Mermaid.js C4 Diagram documentation.