Restruct is a modern, developer-centric suite of tools designed to visualize, document, and present software architecture. Built on the foundations of the Structurizr DSL and the C4 Model, Restruct allows you to treat architecture as code while providing world-class visual experiences.
Restruct aims to bridge the gap between static architecture documents and dynamic, living software systems. With Restruct, you can:
- Design with DSL: Use a clean, TypeScript-based DSL to define your software systems, containers, and components.
- Visualize Instantly: High-fidelity, interactive C4 diagrams that support deep navigation through architectural layers.
- Collaborate in Real-time: Built-in support for P2P collaborative sessions for team architecture reviews.
- Present Your Vision: A unique "Presentation Mode" that allows you to record "stories" through your architecture and play them back for stakeholders.
- Developer-First: Integrated deeply into the developer workflow, including a VS Code extension for live previews.
The backbone of the suite. A type-safe TypeScript library for building Structurizr-compatible workspace models. It supports both imperative and fluent coding styles.
A comprehensive library of React components for rendering C4 diagrams. These components are interactive, accessible, and highly customizable.
The primary interface for developers. It provides a real-time, interactive preview of your architecture DSL files directly within VS Code, featuring:
- C4 Rendering: Automatic layout and rendering of your models.
- Interactive Viewport: Infinite pan, zoom, and fit-to-screen.
- Breadcrumb Navigation: Path-based navigation (e.g.,
System > Container > Component). - Presentation Tools: Record and present architecture walkthroughs.
- Node.js: v18 or higher.
- pnpm: v8 or higher (Restruct uses pnpm workspaces).
git clone https://github.com/JustMeGaaRa/restruct.git
cd restruct
pnpm installTo start the development server for all apps (Preview, Web, Docs) and watch for package changes:
pnpm devTo explore the UI components in isolation:
pnpm storybookrestruct/
├── apps/
│ ├── vscode-preview/ # Core rendering engine & VS Code webview
│ ├── web/ # Main web application (Next.js)
│ └── docs/ # Documentation portal (Next.js)
├── packages/
│ ├── structurizr-dsl/# TS library for C4 modeling
│ ├── structurizr-react/# React components for diagrams
│ ├── ui/ # Shared UI Design System
│ ├── graph-svg/ # Low-level SVG generation utilities
│ ├── eslint-config/ # Shared linting rules
│ └── typescript-config/# Shared TS configurations
└── pnpm-workspace.yaml # Monorepo configuration
We welcome contributions! Please feel free to open issues or submit pull requests.
- Fork the repo.
- Create your feature branch (
git checkout -b feature/amazing-feature). - Commit your changes (
git commit -m 'Add amazing feature'). - Push to the branch (
git push origin feature/amazing-feature). - Open a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.