# likec4/likec4

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/likec4-likec4).**

2,723 stars · 178 forks · TypeScript · mit

## Links

- GitHub: https://github.com/likec4/likec4
- Homepage: https://likec4.dev
- awesome-repositories: https://awesome-repositories.com/repository/likec4-likec4.md

## Topics

`architecture` `architecture-as-code` `c4` `diagrams`

## Description

likec4 is an architecture-as-code framework that transforms text-based architecture definitions into interactive diagrams, static websites, and image files. It serves as a system architecture visualizer and C4 model diagram generator, allowing users to define software components, boundaries, and deployment infrastructure using a domain-specific language.

The tool distinguishes itself by providing a modeling environment with Language Server Protocol integration for real-time validation and autocomplete. It enables interactive architecture documentation where users can navigate through hierarchical system views via drill-down exploration and scoped views.

Beyond basic visualization, the framework covers deployment modeling to map logical software components to physical infrastructure. It includes capabilities for interaction sequence visualization, architectural drift detection to identify discrepancies between design and implementation, and the generation of React or web components for embedding diagrams into applications.

A command-line interface is provided for automated diagram generation in CI/CD pipelines and hosting a local preview server for real-time updates.

## Tags

### Software Engineering & Architecture

- [System Architecture Models](https://awesome-repositories.com/f/software-engineering-architecture/component-port-definitions/system-architecture-models.md) — Provides a domain-specific language to define custom architectural models with nested levels and tailored notations. ([source](https://cdn.jsdelivr.net/gh/likec4/likec4@main/README.md))
- [Diagram as Code Frameworks](https://awesome-repositories.com/f/software-engineering-architecture/diagram-as-code-frameworks.md) — Provides a framework for defining software architecture and system models using a version-controlled, text-based language.
- [Documentation-as-Code Systems](https://awesome-repositories.com/f/software-engineering-architecture/documentation-as-code-systems.md) — Provides a framework for defining system architecture as code within version-controlled repositories. ([source](https://likec4.dev/index/))
- [Architectural Documentation](https://awesome-repositories.com/f/software-engineering-architecture/architectural-documentation.md) — Provides interactive, navigable technical overviews of system design and component hierarchies.
- [Architectural Relationship Models](https://awesome-repositories.com/f/software-engineering-architecture/architectural-relationship-models.md) — Maps associations and dependencies between system entities to analyze architectural hierarchies and relationship chains. ([source](https://likec4.dev/tooling/ai-tools/))
- [Architecture Element Referencing](https://awesome-repositories.com/f/software-engineering-architecture/architecture-element-referencing.md) — Links components using unique identifiers or paths to resolve ambiguity between architectural elements. ([source](https://likec4.dev/dsl/references/))
- [Architecture Model Parsing](https://awesome-repositories.com/f/software-engineering-architecture/architecture-model-parsing.md) — Processes architecture descriptions from files or strings to create a traversable data model. ([source](https://likec4.dev/tooling/model-api/))
- [Hierarchy Definitions](https://awesome-repositories.com/f/software-engineering-architecture/component-port-definitions/system-architecture-models/hierarchy-definitions.md) — Organizes architectural elements into nested structures to represent relationships between high-level systems and internal components. ([source](https://likec4.dev/tutorial/))
- [Logical Element Definitions](https://awesome-repositories.com/f/software-engineering-architecture/component-port-definitions/system-architecture-models/logical-element-definitions.md) — Allows the creation of logical building blocks to represent the structural components of a software system. ([source](https://likec4.dev/dsl/intro/))
- [Declarative View Projections](https://awesome-repositories.com/f/software-engineering-architecture/declarative-view-projections.md) — Generates dynamic architectural diagrams by applying scoping and filtering rules to a global system model.
- [Deployment Infrastructure Modeling](https://awesome-repositories.com/f/software-engineering-architecture/deployment-infrastructure-modeling.md) — Provides the ability to create physical models of deployment nodes to represent target environments and their properties. ([source](https://likec4.dev/dsl/deployment/model/))
- [Deployment Model Visualization](https://awesome-repositories.com/f/software-engineering-architecture/deployment-model-visualization.md) — Renders diagrams based on deployment models, applying filters to organize visible infrastructure elements. ([source](https://likec4.dev/dsl/deployment/views/))
- [Element Relationship Mapping](https://awesome-repositories.com/f/software-engineering-architecture/element-relationship-mapping.md) — Allows mapping connections between architecture elements to describe how different software components interact. ([source](https://likec4.dev/dsl/relationships/))
- [Infrastructure Relationship Modeling](https://awesome-repositories.com/f/software-engineering-architecture/infrastructure-relationship-modeling.md) — Establishes physical connections between deployed instances to represent network and hardware dependencies. ([source](https://likec4.dev/dsl/deployment/model/))
- [Logical to Infrastructure Mapping](https://awesome-repositories.com/f/software-engineering-architecture/logical-to-infrastructure-mapping.md) — Maps logical software components to physical deployment nodes to visualize architectural distribution. ([source](https://likec4.dev/dsl/deployment/model/))
- [Scoped Views](https://awesome-repositories.com/f/software-engineering-architecture/scoped-views.md) — Limits diagrams to a specific element and its descendants to focus on a particular subsystem. ([source](https://likec4.dev/dsl/views/))
- [C4 Architecture Diagrams](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/diagramming-standards/c4-architecture-diagrams.md) — Generates visual projections based on the C4 model to illustrate system overviews and data flows. ([source](https://likec4.dev/dsl/views/))
- [Architecture Visualizers](https://awesome-repositories.com/f/software-engineering-architecture/static-analysis-engines/architecture-visualizers.md) — Generates visual diagrams and topology maps based on defined architectural models to visualize system structure. ([source](https://likec4.dev/dsl/intro/))
- [Text-to-Diagram Generators](https://awesome-repositories.com/f/software-engineering-architecture/text-to-diagram-generators.md) — Integrates with CI/CD pipelines to automatically transform architecture definitions into static sites or image exports. ([source](https://likec4.dev/tooling/github/))
- [Container Nesting](https://awesome-repositories.com/f/software-engineering-architecture/workflow-nodes/hierarchical-nesting/container-nesting.md) — Organizes components as nested containers to represent complex system hierarchies and namespaces.
- [Architecture Model Querying](https://awesome-repositories.com/f/software-engineering-architecture/architecture-model-querying.md) — Enables traversal of elements and metadata within a model to retrieve structural and deployment data. ([source](https://likec4.dev/tooling/model-api/))
- [React Component Generators](https://awesome-repositories.com/f/software-engineering-architecture/component-port-definitions/cli-component-generators/react-component-generators.md) — Generates React components that render architecture model views for integration into web applications. ([source](https://likec4.dev/tooling/code-generation/react/))
- [Cross-Project Element Referencing](https://awesome-repositories.com/f/software-engineering-architecture/cross-project-element-referencing.md) — Enables referencing elements defined in separate projects to reuse architectural components without duplicating definitions. ([source](https://likec4.dev/dsl/config/multi-projects/))
- [Deployment Model Visualizations](https://awesome-repositories.com/f/software-engineering-architecture/deployment-model-visualizations.md) — Maps logical software components to physical infrastructure nodes to visualize system distribution.
- [Diagram Layout Organizers](https://awesome-repositories.com/f/software-engineering-architecture/diagram-layout-organizers.md) — Provides auto-layout configuration to automatically organize the arrangement and directional flow of nodes in diagrams. ([source](https://likec4.dev/dsl/views/predicates/))
- [Element Interaction Mapping](https://awesome-repositories.com/f/software-engineering-architecture/element-interaction-mapping.md) — Enables the definition of interactions and data flows between different components of a software system. ([source](https://likec4.dev/tutorial/))
- [External Model Inclusions](https://awesome-repositories.com/f/software-engineering-architecture/external-model-inclusions.md) — Supports loading architecture specifications from external locations to share common elements across different projects. ([source](https://likec4.dev/dsl/config/))
- [Implicit View Generation](https://awesome-repositories.com/f/software-engineering-architecture/implicit-view-generation.md) — Automatically generates scoped views for elements to enable seamless drill-down navigation through the architecture. ([source](https://likec4.dev/dsl/config/))
- [Deployment Workflows](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/workflow-automation-integrations/ci-cd-integrations/github-actions/deployment-workflows.md) — Automates the deployment of architecture diagrams to static sites using CI/CD workflows. ([source](https://likec4.dev/guides/deploy-github-pages/))
- [Interaction Sequence Visualization](https://awesome-repositories.com/f/software-engineering-architecture/interaction-sequence-visualization.md) — Renders interaction scenarios as sequence charts to visualize the order of actor interactions. ([source](https://likec4.dev/dsl/views/dynamic/))
- [Metadata-Based Element Filtering](https://awesome-repositories.com/f/software-engineering-architecture/metadata-based-element-filtering.md) — Enables precise isolation of system components using metadata tags and boolean logic for focused architectural views. ([source](https://likec4.dev/tooling/ai-tools/))
- [Model Definition Modularization](https://awesome-repositories.com/f/software-engineering-architecture/modular-extension-architectures/model-definition-modularization.md) — Allows distributing architecture definitions across multiple files that are merged into a single model during parsing. ([source](https://likec4.dev/dsl/extend/))
- [External Component Definitions](https://awesome-repositories.com/f/software-engineering-architecture/modular-program-composition/nested-api-definitions/external-component-definitions.md) — Allows defining internal components in separate files to keep top-level architectural views clean and manageable. ([source](https://likec4.dev/dsl/extend/))
- [Shared Configuration Files](https://awesome-repositories.com/f/software-engineering-architecture/project-management-governance/project-governance/standards-rule-enforcement/team-configuration-standards/shared-configuration-files.md) — Allows including a single source specification file across multiple projects to maintain consistent architectural definitions. ([source](https://likec4.dev/dsl/config/multi-projects/))
- [Live Preview Servers](https://awesome-repositories.com/f/software-engineering-architecture/technical-architecture-diagramming/live-preview-servers.md) — Ships a local preview server that provides real-time, hot-reloading updates for architecture diagrams as source files are edited. ([source](https://likec4.dev/tooling/cli/))
- [Use Case Modeling](https://awesome-repositories.com/f/software-engineering-architecture/use-case-modeling.md) — Provides tools and notations for defining system actors and use case scenarios without altering the global model. ([source](https://likec4.dev/dsl/views/dynamic/))

### Data & Databases

- [Graph Relationship Modeling](https://awesome-repositories.com/f/data-databases/graph-relationship-modeling.md) — Maintains the system architecture as a resource graph of components and dependencies for hierarchy analysis.
- [Relationship Edge Styling](https://awesome-repositories.com/f/data-databases/connection-managers/redis/edge-connection-adapters/predefined-edge-types/relationship-edge-styling.md) — Allows defining colors and arrow types for connections to visually distinguish between different types of system interactions. ([source](https://likec4.dev/dsl/styling/))

### Development Tools & Productivity

- [System Architecture Visualizers](https://awesome-repositories.com/f/development-tools-productivity/diagramming-tools/system-architecture-visualizers.md) — Transforms architectural models into interactive visual maps of software structures and interaction logic.
- [Architecture Visualizers](https://awesome-repositories.com/f/development-tools-productivity/git-tooling/architecture-visualizers.md) — Transforms architectural code into interactive visual representations that can be explored at multiple levels of detail. ([source](https://likec4.dev/index/))
- [Architecture Element Styling](https://awesome-repositories.com/f/development-tools-productivity/appearance-customizers/architecture-element-styling.md) — Enables setting custom colors, shapes, and icons for architectural elements both globally and on an individual basis. ([source](https://likec4.dev/dsl/styling/))
- [Code Navigators](https://awesome-repositories.com/f/development-tools-productivity/code-navigators.md) — Implements project-wide navigation for jumping to definitions, finding references, and renaming elements within the architecture model. ([source](https://likec4.dev/tooling/editors/))
- [Diagramming Integrations](https://awesome-repositories.com/f/development-tools-productivity/diagramming-tools/diagramming-integrations.md) — Provides plugins and web components to integrate interactive architectural views into websites and documentation. ([source](https://likec4.dev/index/))
- [Label-Based Categorization](https://awesome-repositories.com/f/development-tools-productivity/label-based-categorization.md) — Assigns labels to architectural elements to group and filter components based on semantic metadata. ([source](https://likec4.dev/dsl/specification/))
- [Language Server Protocol Implementations](https://awesome-repositories.com/f/development-tools-productivity/language-server-protocol-implementations.md) — Implements the Language Server Protocol to provide real-time validation, autocomplete, and navigation for the modeling language.
- [Language Servers](https://awesome-repositories.com/f/development-tools-productivity/language-servers.md) — Exposes a standalone language server that provides autocomplete, diagnostics, and navigation to any LSP-compliant editor. ([source](https://likec4.dev/tooling/editors/))
- [Live Preview Servers](https://awesome-repositories.com/f/development-tools-productivity/live-preview-servers.md) — Hosts a local server that provides real-time visual rendering of diagrams as source files are edited. ([source](https://likec4.dev/tooling/docker/))
- [Programmatic Architecture Construction](https://awesome-repositories.com/f/development-tools-productivity/programmatic-architecture-construction.md) — Enables the creation of architectural models using a type-safe builder to ensure structural consistency through code. ([source](https://likec4.dev/tooling/model-api/))
- [Project Configuration](https://awesome-repositories.com/f/development-tools-productivity/project-configuration.md) — Allows defining project settings and visual styles using type-safe code files instead of static configuration formats. ([source](https://likec4.dev/dsl/config/programmatic/))

### Graphics & Multimedia

- [Interactive Diagramming Libraries](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/visualization-frameworks/interactive-diagramming-libraries.md) — Ships a framework for embedding interactive, browser-rendered architecture diagrams into external applications. ([source](https://likec4.dev/))

### Programming Languages & Runtimes

- [Domain Specific Language Parsers](https://awesome-repositories.com/f/programming-languages-runtimes/domain-specific-language-parsers.md) — Translates text-based architecture definitions into a structured, traversable data model of elements and relationships.

### User Interface & Experience

- [Interactive Architecture Navigation](https://awesome-repositories.com/f/user-interface-experience/interactive-architecture-navigation.md) — Offers an interactive interface to explore diagrams and drill down into specific architectural components. ([source](https://likec4.dev/index/))
- [Interactive Diagram Embedding](https://awesome-repositories.com/f/user-interface-experience/interactive-diagram-embedding.md) — Enables rendering interactive architectural views within web applications using dedicated components and popup browsers. ([source](https://likec4.dev/tooling/community/mkdocs-plugin/))
- [Constraint Layout Engines](https://awesome-repositories.com/f/user-interface-experience/constraint-layout-engines.md) — Implements a constraint-based layout engine to automatically organize node positions and axis alignments in diagrams.
- [Custom Element Renderers](https://awesome-repositories.com/f/user-interface-experience/custom-element-renderers.md) — Allows replacing default node visualizations with custom components to tailor how architectural elements are presented. ([source](https://likec4.dev/tooling/react/))
- [Element Groupings](https://awesome-repositories.com/f/user-interface-experience/element-groupings.md) — Wraps architectural elements within rendered boundaries to visually represent logical groupings and namespaces. ([source](https://likec4.dev/dsl/views/predicates/))
- [Icon Set Integrations](https://awesome-repositories.com/f/user-interface-experience/icon-set-integrations.md) — Supports embedding external image formats or selecting from icon sets to visually represent specific system components. ([source](https://likec4.dev/dsl/styling/))
- [Shared Style Modules](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/shared-style-modules.md) — Allows importing reusable style definitions from external configuration files to maintain visual consistency across different repositories. ([source](https://likec4.dev/dsl/config/))
- [Visual Style Customization](https://awesome-repositories.com/f/user-interface-experience/visual-style-customization.md) — Allows the definition of custom colors and themes to apply branding to architecture views. ([source](https://likec4.dev/dsl/specification/))
- [Diagram Element Styling](https://awesome-repositories.com/f/user-interface-experience/visual-styling-rules/diagram-element-styling.md) — Defines the appearance of elements using a sequence of overriding rules for colors and line styles. ([source](https://likec4.dev/dsl/views/predicates/))
- [Theme Customization](https://awesome-repositories.com/f/user-interface-experience/visual-theme-configurations/visual-themes/theme-customization.md) — Provides capabilities to override default colors and sizes using CSS or configuration objects to customize the global appearance. ([source](https://likec4.dev/dsl/config/))

### Artificial Intelligence & ML

- [Model Domain Splitting](https://awesome-repositories.com/f/artificial-intelligence-ml/foundation-model-pipelines/model-domain-splitting.md) — Enables dividing large architectural models into smaller, domain-based projects to improve organization and maintainability. ([source](https://likec4.dev/dsl/config/multi-projects/))

### Part of an Awesome List

- [Modeling Intelligence](https://awesome-repositories.com/f/awesome-lists/devtools/ide-and-editor-support/modeling-intelligence.md) — Provides syntax highlighting, live previews, and real-time error reporting within code editors to streamline the architectural modeling process. ([source](https://likec4.dev/tooling/editors/))
- [LSP-Integrated Environments](https://awesome-repositories.com/f/awesome-lists/devtools/integrated-development-environments/lsp-integrated-environments.md) — Integrates a Language Server to provide real-time validation and autocomplete for architecture modeling within editors.

### Content Management & Publishing

- [Website Builders](https://awesome-repositories.com/f/content-management-publishing/static-site-document-generators/website-builders.md) — Generates a standalone website or single HTML file containing all architectural diagrams for easy hosting and sharing. ([source](https://likec4.dev/tooling/cli/))
- [Static Websites](https://awesome-repositories.com/f/content-management-publishing/static-websites.md) — Generates static HTML files and assets from architecture definitions for hosting. ([source](https://likec4.dev/guides/static-website/))

### DevOps & Infrastructure

- [Drift Detection](https://awesome-repositories.com/f/devops-infrastructure/infrastructure-as-code-alerting/drift-detection.md) — Identifies structural discrepancies and undeclared dependencies between the architectural model and actual code. ([source](https://likec4.dev/tooling/community/erode/))

### Testing & Quality Assurance

- [Architectural Design Validations](https://awesome-repositories.com/f/testing-quality-assurance/architectural-design-validations.md) — Checks for drift and breaking changes to ensure the software implementation matches the architectural design. ([source](https://likec4.dev/index/))
- [Model Structural Validation](https://awesome-repositories.com/f/testing-quality-assurance/model-structural-validation.md) — Checks source files for syntax errors and outdated manual layouts to ensure the architectural model remains structurally correct. ([source](https://likec4.dev/tooling/cli/))

### Web Development

- [Diagram Web Components](https://awesome-repositories.com/f/web-development/diagram-web-components.md) — Creates a JavaScript bundle that embeds diagrams as a customizable and reusable HTML element. ([source](https://likec4.dev/tooling/code-generation/webcomponent/))
- [Headless Rendering Engines](https://awesome-repositories.com/f/web-development/headless-browsers/headless-rendering-engines.md) — Uses a headless browser rendering engine to rasterize dynamic web diagrams into static image files like PNG.
- [Live Component Embedding](https://awesome-repositories.com/f/web-development/live-component-embedding.md) — Allows live architecture diagrams to be integrated directly into web applications with instant updates via hot module replacement. ([source](https://likec4.dev/tooling/vite-plugin/))
- [Multi-Target Component Generation](https://awesome-repositories.com/f/web-development/multi-target-component-generation.md) — Produces diverse output formats including React components, web components, and static HTML from architectural definitions.