Structurizr Visualizer

Architecture as code, with the editing experience of a real language.

Write, split, navigate, and validate Structurizr DSL workspaces without leaving Visual Studio Code.

Quick start · Multi-file · Styles · Installation · Issues

Structurizr Visualizer adds IDE-grade language tooling to every .dsl file. It understands complete workspaces and standalone fragments, follows local includes, resolves identifiers across files, and recommends valid DSL and style values exactly where you need them.

Structurizr Visualizer is a language extension. It does not render diagrams or replace the official Structurizr parser and exporters.

✨ Everything you need to write Structurizr DSL

Syntax highlighting, line comments, block comments, bracket matching, and automatic quote/bracket closing are included out of the box.

🚀 Quick start

Create workspace.dsl and start typing:

workspace "Getting Started" {
    model {
        user = person "User"
        system = softwareSystem "Software System"

        user -> system "Uses"
    }

    views {
        systemContext system "SystemContext" {
            include *
            autolayout lr
        }

        styles {
            element "Software System" {
                background #1168bd
                color #ffffff
                shape RoundedBox
            }
        }
    }
}

Use Ctrl+Space to request suggestions and F12 to open the definition of a referenced element.

🧩 Multi-file workspaces

Keep large architecture models focused and maintainable:

architecture/
├─ workspace.dsl
├─ model/
│  ├─ people.dsl
│  ├─ systems.dsl
│  └─ relationships.dsl
├─ views/
│  └─ system-context.dsl
└─ styles/
   └─ style.dsl

workspace {
    model {
        !include model
    }

    views {
        !include views/system-context.dsl

        styles {
            !include styles/style.dsl
        }
    }
}

Included files are parsed as contextual fragments, so people.dsl, relationships.dsl, and style.dsl can contain their declarations directly. Start typing a relative path after !include; / and \ continue suggestions as you move through folders.

🎨 Style with confidence

Style fragments can be reused across workspaces and include element and relationship definitions:

element "Critical" {
    shape Hexagon
    background #b91c1c
    color #ffffff
    stroke #7f1d1d
    strokeWidth 5
}

relationship "Relationship" {
    thickness 2
    style dashed
    opacity 90
}

Completion covers the Structurizr DSL 6.2.3 style inventory, including the supported shapes and constrained values for routing, border styles, text alignment, metadata, descriptions, and more.

📦 Installation

Install from a VSIX

1. Download structurizr-visualizer.vsix.
2. Open the Extensions view in VS Code.
3. Select the ... menu and choose Install from VSIX....
4. Select the downloaded file and reload VS Code if requested.

Or install it from a terminal:

code --install-extension structurizr-visualizer.vsix

✅ Compatibility at a glance

Requires Visual Studio Code 1.140.0 or newer.

🔒 Local and private by default

The extension contains no telemetry and does not send workspace contents over the network. Static parsing, validation, navigation, and local include resolution run on your machine. Include resolution is read-only.

💬 Feedback and support

Found a parsing edge case or missing completion? Open a GitHub issue with a minimal DSL example, your VS Code version, and the extension version.

• Source code
• Compatibility documentation
• Changelog
• Roadmap

License

Released under the Apache License 2.0.