Diagrammatic

Diagrammatic is a powerful VSCode extension that automatically generates interactive visual representations of your codebase, helping you understand complex code structures at a glance.

Gain insights into unfamiliar code structures without spending hours reading documentation or tracing through files manually.

Diagrammatic is developed by a team of software engineers committed to making code comprehension easier. Our mission is to enhance software architecture understanding through intuitive visualization.

Features

🔍 Interactive Diagram Generation

• Instant Visualization: Convert your codebase into an interactive diagram with a single click
• Multi-Language Support: Works with TypeScript, JavaScript, Java, Python, and more
• Easy Navigation: Jump directly from diagram nodes to code files

🧩 Customizable Views

• Configurable Display: Choose what aspects of your code to highlight
• Filtering Options: Focus on specific components or relationships
• Layout Controls: Adjust the diagram to suit your needs

🔬 Code Quality Analysis

• Built-in Analysis: Identify code smells and potential issues
• Security Vulnerability Detection: Highlight security concerns in your code

🔄 Component Diagrams

• Automatic Component Detection: Visualize high-level architecture
• Relationship Mapping: See how components interact with each other
• C4 Model Support: Generate diagrams compatible with the C4 model

Getting Started

Requirements

• VS Code 1.60.0 or higher
• For large codebases: At least 8GB RAM recommended

Installation

1. Open VS Code
2. Go to Extensions
3. Search for Diagrammatic
4. Click Install

Quick Start

1. Open all commands with Cmd-Shift-P and type Diagrammatic
2. Select Generate Diagram to visualize your codebase
3. Select the folder of the repository you want to parse
4. Wait and see the magic!

Usage Examples

Code Reviews

Share diagrams with your team to facilitate more effective code reviews by providing a visual context for changes.

Architecture Planning

Use the component diagrams to plan refactoring efforts or discuss architectural changes with your team.

Known Issues

• Very large codebases (>100k LOC) may experience slower diagram generation
• Component grouping may need manual adjustments for complex architectures

About the Team

Diagrammatic is developed by a team of software engineers during their undergraduate CS programme in Singapore Management University (SMU). The team includes:

• Alex Choong Cheng Kang
• Ashley Tan
• Olivia Ow Jialin
• Bruce Wu Zi Jian
• Shawn Chia Jia Jin
• Sharlene Tio Xi Ning

This project was conducted in partnership with AETHER, the experimentations wing of RAiD focused on rapid prototyping and harnessing of technologies.