Skip to content
LikeC4
Docs Playground

Project config

To define a project, create a likec4.config.json file in the folder.
All files in the folder (and subfolders) will be part of this project:

  • Directoryexternals
    • amazon.c4
    • …
  • Directoryservices
    • service1.c4
    • service2.c4
    • …
  • specification.c4
  • likec4.config.json

Configuration

Section titled “Configuration”

The likec4.config.json file must have the name of the project.

{
  "$schema": "https://likec4.dev/schemas/config.json",
  "name": "project-name",  // required
  "title": "Project Title" // optional
}

The name must be unique if you use multiple projects.

Exclude files

Section titled “Exclude files”

By default, LikeC4 recursively scans in the project folder.
You can exclude files by adding an exclude array to the config file.

{
  "$schema": "https://likec4.dev/schemas/config.json",
  "name": "project-name",
  "exclude": [
    "**/node_modules/**"
  ]
}

If no exclude pattern is provided, LikeC4 uses ["**/node_modules/**"] as default.
The exclude pattern is the same as the one used by picomatch.

Image Aliases

Section titled “Image Aliases”

When using local images in your LikeC4 model, you can create aliases for the folder your images are in to make them more readable and the files more transportable.

Use the likec4.config.json to add an imageAliases field:

{
  "$schema": "https://likec4.dev/schemas/config.json",
  "name": "project-name",
  "imageAliases": {
    "@": "./images",
    "@root": "../../some-more-images"
  }
}

You can then use the alias in your model:

example
// ./amazon.c4
model {
  serviceA = service {
    icon: @/service-a.png
  }


  serviceB = service {
    icon: @root/service-b.png
  }
}


// ./externals/externals.c4
model {
  serviceC = service {
    icon: @/service-c.png
  }
}
  • Directorysome-more-images
    • service-b.png
    • …
  • Directorydocs
    • Directoryproject
      • Directoryimages
        • service-a.png
        • service-c.png
        • …
      • Directoryexternals
        • externals.c4
      • likec4.config.json
      • amazon.c4
      • …

Naming Rules

Section titled “Naming Rules”

When using image aliases, keep the following rules in mind:

  • Aliases must start with @ and can include letters, numbers, and underscores.
  • The alias must be unique within the project.
  • The alias can point to a relative or absolute path.

Defaults

Section titled “Defaults”

When no LikeC4 configuration file is found, or when no imageAliases field is found, LikeC4 uses the following defaults:

{
  "$schema": "https://likec4.dev/schemas/config.json",
  "name": "project-name",
  "imageAliases": {
    "@": "./images",
  }
}

Simply override the @ to change the default location.

{
  "imageAliases": {
    "@": "./my-images",
  }
}

Styles customization

Section titled “Styles customization”

LikeC4 provides advanced style customization capabilities.

Theme overrides

Section titled “Theme overrides”

You can override default theme colors and sizes by adding a styles.theme section to the config file. Each definition can be either a CSS value or a detailed object specifying color for specific parts.

Example of simple color definition:

{
  "$schema": "https://likec4.dev/schemas/config.json",
  "name": "project-name",
  "styles": {
    "theme": {
      "colors": {
        "primary": "#FF6B6B",
        "secondary": "rgba(37,99,235,1)",
      }
    },
  }
}

Example of detailed color definition:

{
  "$schema": "https://likec4.dev/schemas/config.json",
  "name": "project-name",
  "styles": {
    "theme": {
      "colors": {
        "muted": {
          "elements": {
            "fill": "#2563eb", // Background color
            "stroke": "#1d4ed8", // Border color
            "hiContrast": "#ffffff", // Title text color
            "loContrast": "#e2e8f0" // Description text color
          },
          "relationships": {
            "line": "#1d4ed8", // Line color
            "label": "#ffffff", // Label text color
            "labelBg": "rgba(37,99,235,0.1)" // Label background color
          }
        },
        // You can give detailed definitions for a custom color in your specification
        "custom-color-from-your-spec": {
          // ...
        }
      }
    },
  }
}

You can override sizes used in LikeC4:

{
  "$schema": "https://likec4.dev/schemas/config.json",
  "name": "project-name",
  "styles": {
    "theme": {
      "sizes": {
        "md": {
          "width": 200,
          "height": 200
        },
        "lg": {
          "width": 300,
          "height": 300
        }
      }
    }
  }
}

Default styles

Section titled “Default styles”

You can override default values for style properties by adding a styles.defaults section to the config file.
These values will be applied to all elements and relationships, unless properties are explicitly defined in the specification.

{
  "$schema": "https://likec4.dev/schemas/config.json",
  "name": "project-name",
  "styles": {
    "defaults": {
      // Defaults for all elements
      "border": "dashed",
      "opacity": 100,
      "size": "md",
      "color": "primary", // theme color name


      // Defaults for groups
      "group": {
        "color": "primary",
        "opacity": 10,
        "border": "dashed"
      },


      // Defaults for relationships
      "relationship": {
        "color": "gray",
        "line": "dashed",
        "arrow": "normal"
      }
    }
  }
}