Tooling for the C4 Model: Structurizr Lite

In a previous blog post, I did a brief introduction to Architecture Software Visualization using the C4 Model.


On this one, I want to show you some of the available tooling and give you a quick walkthrough on how to create our architecture models.

Structurizr

Simon Brown created Structurizr to build software architecture models as code (Diagrams as code 2.0).
It’s a Domain Specific Language (DSL) that you use to define your model, and then it can be visualized with some tooling.
The DSL uses the domain language of software architecture, check the documentation for the full language reference.
In Diagrams as code 2.0 you create and maintain a single model, and the tool generates and keep in sync multiple diagrams. Just for reference, with the first version, you would have to create and maintain the code for multiple diagrams and keep them all in sync.

Advantages of Diagrams as Code 2.0

  • Maintain a single model
  • Easier to create and collaborate on
  • Can be added to version control
  • Can be integrated into your CI/CD

Creating Our Model – DSL Basics

With Structurizr you can use different programming languages to create your model, or a text-based DSL, I will try to keep it simple, and we are going to use the text-based DSL version.
Here is a full sample (workspace) and some comments on the structure.

The first building block is the workspace (1), a wrapper for your model (2), views (4), and additional documentation.
Notice the naming of the views, systemContext, container, component, implement to the C4 Model, also the code view is not available in the DSL, because is not expected to be in our models.
Inside your model you will have the different elements that defines your architecture in the C4 Model, like softwareSystem, container or component along with the properties for every element, and the relations (3) between the different parts.
The theme and styles (5) section allow customization of your model.
Now that we have our model defined, let me show you how we can visualize it.

Structurizr Lite

This is a free version of Structurizr designed for developers and packaged as a Docker container. You can locally view your diagrams and export it as PNG files.

Install and Configure Structurizr Lite

To use Structurizr Lite on your local computer, you will need Docker installed.
After you have Docker running, you need to pull the Structurizr Lite image, and run the tool with the following command (I’m using Power Shell on a Windows PC)

docker pull structurizr/lite
docker run -it –rm -p 8080:8080 -v C:/architecture-demo:/usr/local/structurizr structurizr/lite

Structurizr will start and show the following message

Notice that we are setting a local folder (c:\architecture-demo) were our dsl file will be deployed, so, we take our example file, name it workspace.dsl, and copy it to that folder.
Now we can open any web browser and navigate to https://localhost:8080, accept the license, and see our model in the Diagram section.

The diagrams window has a navigation panel to the left, that you can use to access any of the views (1), the thumbnails will be created after you access the individual views.
In any diagram that you can zoom in, you will see a + sign that will navigate to that view (2). In the following screenshot, the plus sign will navigate to the container diagram.

Additional Content

This is just a quick overview, a lot of interesting topics are not covered here like exporting views, the cloud services to use Structurizr as a hosted app, extensions to work with text-based DSL on Visual Studio Code or code-based DSL with .NET.
Please check the resources section, and thanks for reading!

Resources

Structurizr official site
Play with the DSL
Cloud Services (Hosted Structurizr)
Visual Studio Code extensions for text-based DSL
Code-based DSL for .Net

Related Blog Posts

We hope you’ve found this to be helpful and are walking away with some new, useful insights. If you want to learn more, here are a couple of related articles that others also usually find to be interesting:

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

Montage Portal

Montage Furniture Services provides furniture protection plans and claims processing services to a wide selection of furniture retailers and consumers.

Project Background

Montage was looking to build a new web portal for both Retailers and Consumers, which would integrate with Dynamics CRM and other legacy systems. The portal needed to be multi tenant and support branding and configuration for different Retailers. Trailhead architected the new Montage Platform, including the Portal and all of it’s back end integrations, did the UI/UX and then delivered the new system, along with enhancements to DevOps and processes.

Logistics

We’ve logged countless miles exploring the tech world. In doing so, we gained the experience that enables us to deliver your unique software and systems architecture needs. Our team of seasoned tech vets can provide you with:

Custom App and Software Development

We collaborate with you throughout the entire process because your customized tech should fit your needs, not just those of other clients.

Cloud and Mobile Applications

The modern world demands versatile technology, and this is exactly what your mobile and cloud-based apps will give you.

User Experience and Interface (UX/UI) Design

We want your end users to have optimal experiences with tech that is highly intuitive and responsive.

DevOps

This combination of Agile software development and IT operations provides you with high-quality software at reduced cost, time, and risk.

Trailhead stepped into a challenging project – building our new web architecture and redeveloping our portals at the same time the business was migrating from a legacy system to our new CRM solution. They were able to not only significantly improve our web development architecture but our development and deployment processes as well as the functionality and performance of our portals. The feedback from customers has been overwhelmingly positive. Trailhead has proven themselves to be a valuable partner.

– BOB DOERKSEN, Vice President of Technology Services
at Montage Furniture Services

Technologies Used

When you hit the trails, it is essential to bring appropriate gear. The same holds true for your digital technology needs. That’s why Trailhead builds custom solutions on trusted platforms like .NET, Angular, React, and Xamarin.

Expertise

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

  • Project Management
  • Architecture
  • Web App Development
  • Cloud Development
  • DevOps
  • Process Improvements
  • Legacy System Integration
  • UI Design
  • Manual QA
  • Back end/API/Database development

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the contact form. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Thank you message.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.