Skip to main content
KJL Logo
KJL Digital Delivery Consultancy
← Back to Projects
Go back to the list of projects...

AspireC4

🚀Live
This project is deployed/ running/ available
An Aspire extension library that auto-generates live LikeC4 architecture diagrams from the Aspire resource graph. Diagrams update in real-time as resources start, stop, or produce errors — with each element linking back to the Aspire dashboard.
GitHub
Open GitHub in a new tab
NuGet
Open NuGet in a new tab
Aspire
Open Aspire in a new tab
LikeC4
Open LikeC4 in a new tab
aspiredotnetc4likec4architecturevisualisationc4-modeldiagrams-as-code

AspireC4 is an extension library for the Aspire framework that generates live C4 architecture diagrams using LikeC4.

It provides real-time visualizations of your system’s architecture, automatically updating as resources change state. Each element in the diagram links back to the Aspire dashboard for easy navigation and monitoring.

You can find the source code and installation instructions on the GitHub repository and the package is available on NuGet.

For more information on LikeC4, visit the LikeC4 website.

All of this was made possible by the excellent hard work of the Aspire and LikeC4 teams, and the rest of the open-source community. AspireC4 is licensed under the MIT License, allowing you to freely use, modify, and distribute it in your projects.

Examples

Here is a basic example of AspireC4 in action, showing a live architecture diagram generated from an Aspire resource graph using only the builder.AddAspireC4() extension method:

Basic Example

With a few additional configuration options, you can customize the diagram’s appearance and behaviour:

AppHost/Program.cs
 var builder = DistributedApplication.CreateBuilder(args);
 builder.AddAspireC4(opts => {
   opts.Title = "MakerStack Architecture";
 });


 // ...add other projects/resources such as databases, services, etc.
 builder
   .AddNodeApp("frontend", "../../frontend")
   .WithLikeC4Details(opts => {
     opts
       .WithLabel("MakerStack React SPA")
       .WithIcon("tech:react")
       ... etc
   });


 builder
   .AddProject<Projects.Web>("web")
   .WithLikeC4Details(opts => {
     opts
       .WithLabel("Web Host")
       .WithSummary(".NET 10/ ASP.NET Minimal API web app. Hosting APIs, and the Astro-based landing site and the MarkerStack SPA");
   })
   # Note the reference to the database project here, to save you from calling .WithReference(db) as well..
   .WithLikeC4Reference(db, opts => {
     opts
       .WithLabel("Tabular Data Stream (TDS)")
       ... etc
   });

Enhanced integration