Architecture diagrams using C4 diagrams likeC4

February 2, 2025

I have always been a fan of diagramming software systems. I have tried out many diagramming tools in the past. The most recent popular tool being Lucid charts. And then Draw.io. Due to some drawbacks of manually drawn diagrams, I have started to enjoyed diagrams as code. Initially there were sequence diagramming tools that supported defining the diagram as code. With time, it was possible to draw entire diagrams as code.

I have been fond of C4 diagrams as it provides a layered and encapsulated view and architecture. You can start looking at the high level architecture and drill all the way down to the detailed level using C4. At first Icepanel.io introduced me to the concepts of C4. It was a good tool to learn about C4. How to define and draw a layered architecture diagram. Thereafter I tried out a few C4 diagramming tools that allow the diagram to be defined using code.

Today I am trying out a new C4 diagramming tool. Its called likeC4.dev. I feel it is a great C4 diagramming tool.

This is how I am trying it out.

Setup

I have node.js already installed and running on my system.

To draw a diagram its as simple as selecting a folder for the diagram code, defining the diagram code and running a command.

mkdir c4like-diagrams
cd c4like-diagrams

touch tutorial.c4

run likec4

npx likec4 start

Follow the tutorial https://likec4.dev/tutorial/

tutorial.c4

specification {
    element actor
    element system
    element component
    element database
    element table
    element externalsystem

    tag nextjs
    tag microservices

    relationship async
    relationship uses
}

model {
    actor customer 'Customer' {
        description: 'Our dear customer'
        style {
            shape person
        }
    }

    system saas 'Our SaaS' {

        component ui 'Frontend' {
            #nextjs
            style {
                icon tech:nextjs
                shape browser
            }
            metadata {
                version '1.1.0'
            }
        }

        component backend 'Backend Services' {
            #microservices
            description 'Nextjs application, hosted on Vercel'
            technology 'Nextjs, Nodejs'
        }

        component database 'PostgreSQL' {
            description 'Backend database'
            technology 'PostgreSQL'
            style {
                shape storage
                icon tech:postgresql
            }

            table customers 'Customers table'
            table orders 'Orders table'


        }

        ui -> backend 'fetches via HTTPS'
        backend -> database 'data access'
    }

    component external 'External Systems' {

        externalsystem stripe 'Payment System' {
            description 'Stripe payment gateway'
            link https://stripe.com
            // icon tech:stripe
        }

        externalsystem sendgrid 'Email System' {
            description 'Sendgrid email service'
            link https://sendgrid.com
        }

    }

    customer -> ui 'opens in browser'
    customer -> saas 'enjoys our product'
    saas.backend -> external.stripe 'process payment'
    saas.backend .async external.sendgrid 'send email'



}

views {
    view index {
        include *
    }


    view of saas {
        include *
        include database.*
        include external.*

        style customer {
            color muted
        }
    }
}

Live demo
Overview http://c4likelearn.nilushansilva.info

Landscape view http://c4likelearn.nilushansilva.info/view/index

Saas View http://c4likelearn.nilushansilva.info/view/view_1c9nbub

View this page on GitHub.