C4 DSL Model Extension for Visual Studio Code

Overview

This Visual Studio Code extension enables software architecture modeling using the Structurizr DSL. The Structurizr DSL implements the "diagrams as code" approach (learn more) and provides a textual representation of the C4 model.

The extension includes:

• A language server built on the official Structurizr DSL parser
• Advanced capabilities for architectural description automation
• Syntax highlighting and validation
• Text decorations
• Go to Definition
• Diagram visualization (embedded or structurizr.com cloud)
• Graphviz based diagram auto layouting
• Workspace.json based diagram manual layouting
• Diagram exporing to .svg and .drawio, back imprting layout from .drawio
• Support for workspace extends and !include files

Prerequisites

• Java 17+ (download) - required for the language server
• Workspace containing model files with .dsl extension

Features

Syntax Highlighting

Field values like name and technology are highlighted when the diagram contains no errors.

Diagram Preview

Error-free diagrams can be previewed by clicking the diagram icon next to the corresponding view.

Code Snippets

The Explorer provides quick access to frequently used code blocks for faster architecture modeling.

ArchOps Server Integration Features

API Specification Parsing

Create components matching API descriptions with method specification imports from:

• Swagger
• WSDL
• Protocol Buffers

Tech Radar Integration

Load technology lists from your company's tech radar when specifying container or interaction technologies.

Capability Tooltips and Completions

Create capability-aware components with descriptions loaded from your company's capabilities map.

Terraform Integration

Generate Terraform scripts for environments with a single click.

Export diagram

Export diagram to drawio and svg formats

Configuration

Option	Values	Default	Description
c4.diagram.render	String	embedded	Diagram rendering method (embedded or structurizr.com cloud)
c4.editor.autoformat.indent	Number	4	Spaces per indentation level
c4.languageserver.logs.enabled	true/false	false	Enable language server logging
c4.decorations.enabled	off, onChange, onSave	onChange	Text decoration timing
c4.beeline.cert.verification.enabled	true/false	false	Enable SSL-certificate verification when interacting with the ArchOPS server
c4.beeline.telemetry.enabled	true/false	true	Enable telemetry collection when interacting with the ArchOPS server
c4.beeline.api.url	URL		ArchOPS server URL
c4.beeline.api.key	String		ArchOPS API key
c4.beeline.api.secret	String		ArchOPS API secret
c4.beeline.cloud.token	String		Beeline Cloud security token
c4.beeline.cloud.url	URL	https://cloud.beeline.ru	Beeline Cloud API URL
c4.beeline.glossaries	Comma-separated list	Product,Service,Customer	Data dictionaries for model integration

Getting Started

Building the Extension

Requirements:

• Node.js 20+
• Yarn2
• JDK 17+
• Apache Maven

Build commands:

cd ./extension/
yarn install
yarn package

How to install extension in VSCode

In order to install the extension at Visual Studio Code:

1. Open the extensions sidebar (at left vertical sidebar)
2. Click on the ellipsis in the right upper corner
3. Choose Install from VSIX
4. Open .vsix file built earlier
5. Open C4 Structurizr workspace, check message "C4 DSL Language Server is ready" at right side of statusbar