Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>ArchTect — C4 Visual EditorNew to Visual Studio Code? Get it now.
ArchTect — C4 Visual Editor

ArchTect — C4 Visual Editor

NicoBit

|
6 installs
| (0) | Free
Visual editor for Structurizr DSL with bidirectional canvas ↔ code editing and view-aware modeling.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

ArchTect — Visual Structurizr DSL Editor

A visual editor for Structurizr DSL inside VS Code. Edit architecture as code and as diagrams with a bidirectional canvas ↔ DSL workflow.

ArchTect demo

✨ Key features

  • Bidirectional editing — changes in the diagram and DSL stay in sync.
  • View-aware modeling — system landscape, system context, container, component, dynamic, filtered, and deployment views.
  • DSL-aware drag & drop — semantic validation for valid relationships and view scope.
  • Layout controls — view layout settings with Graphviz/Dagre/ELK options.
  • Themes & styles — Structurizr themes and style blocks.
  • Export — PNG, SVG, ILOGRAPH exports from the editor.

🧭 Commands

  • ArchTect: Open Editor
  • ArchTect: Open Project
  • ArchTect: Open with ArchTect
  • ArchTect: New Project
  • ArchTect: Create View
  • ArchTect: Edit Architecture Info
  • ArchTect: Generate Documentation

📦 Resources

  • Documentation & User Guide
  • GitHub Repository
  • Report an Issue
  • License: MIT — © 2026 Nicola Bitetti
  • Third-Party Notices
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft