Architecture as a code

Visualize, collaborate, and evolve the software architecture with always actual and live diagrams from your code

What is LikeC4? Why "like"?

LikeC4 is a modeling language for describing software architecture, and tools to generate diagrams from the model.

LikeC4 is inspired by C4 Model and Structurizr DSL, but provides some flexibility. You customize or define your own notation, element types, and any number of nested levels in architecture model.
Perfectly tailored to your needs.

What does LikeC4 look like?

LikeC4 source (full source on github):

CLI to generate react components (or export to other format):

likec4 codegen react -o likec4-generated.tsx

Website:

import { LikeC4View } from '$/likec4-generated'

// ...
;<LikeC4View viewId='index' />

And this is rendered:

Check the Tutorial - a bit better overview of LikeC4.

Local development

Development tasks:

yarn typecheck: TypeScript compilation
yarn build: Build packages
yarn test: Test packages
yarn vitest:ui: Opens Vitest UI
yarn dev: ...requires work...

For VSCode:

Task Run Extension to start a new VSCode instance with the extension loaded.

About this repository

Top-level layout

This repository's contents is divided across four primary sections:

/docs contains the content for our docs site at likec4.dev
/examples our local development / examples project
/integration integration tests (not yet implemented)
/packages contains the source for packages

Packages

cli: obviously, the CLI
core: model definitions
create-likec4: scaffolding tool
diagrams: react components for rendering diagrams
generators: LikeC4 -> Other formats
graph: Architecture model graph, compute views
language-server: parser and language server
layouts: layout algorithms for views
likec4: the main package, published to npm as likec4
tsconfig: typescript configuration
vscode: vscode extension
vscode-preview: preview panel in vscode extension

neculai-stanciu/likec4