Toggle dropdown

Overview: UML Diagramming in JetBrains IDEs

JetBrains IDEs like IntelliJ IDEA Ultimate and PyCharm Professional provide built-in tools to generate UML class diagrams from source code. This relies on the "Diagrams" plugin, which is bundled and enabled by default in these editions. Community editions do not include this feature. WebStorm's diagramming is limited and does not provide full UML class diagram support for JavaScript/TypeScript.

1: Understanding Built-in UML Diagramming

JetBrains IDEs generate UML class diagrams from code. These are not general-purpose UML modeling tools and do not support designing diagrams before code ("model-first" means creating diagrams and generating code from them; JetBrains tools only generate diagrams from existing code).

1.1: What it is

The built-in UML diagramming tool generates Class Diagrams showing classes and their relationships (inheritance, dependencies) as found in your code. While the initial diagram provides a structural overview based on your source, you often need to use the diagram editor's tools to manage and populate the diagram with specific members (fields, methods) and refine connections to achieve a comprehensive view. It's a way to visualize and navigate your existing codebase rather than a design-first modeling tool.

1.2: Key Considerations

Code-First: Diagrams reflect the current state of your code. Some refactoring (like renaming) can be performed from the diagram
Plugin: The "Diagrams" plugin must be enabled (Settings/Preferences > Plugins)
Editions: Requires IntelliJ IDEA Ultimate or PyCharm Professional. WebStorm does not provide full UML class diagram support for JS/TS

2: How to Generate UML Class Diagrams

The process for generating UML class diagrams is as follows:

2.1: IntelliJ IDEA (Java/Kotlin)

Right-click a package, class, or multiple classes in the Project tool window
Select Diagrams > Show Diagram... (Ctrl+Alt+Shift+U on Windows/Linux, ⌥⇧⌘U on macOS)
If prompted, select Java Class Diagram
The diagram opens in a new editor tab

2.2: PyCharm (Python)

Right-click a Python file, class, or package in the Project tool window
Select Diagrams > Show Diagram...
Select Python Class Diagram
The diagram opens in a new editor tab
PyCharm can also visualize database schemas (separate from UML class diagrams)

2.3: WebStorm and IntelliJ support for JavaScript/TypeScript

While WebStorm doesn't include built-in UML class diagram support for JavaScript/TypeScript, you can use the third-party plugin UML JavaScript and TypeScript to add this functionality to any IntelliJ IDE:

Install the plugin from Settings/Preferences > Plugins > Marketplace
Right-click a JavaScript/TypeScript file or directory in the Project tool window
Select Diagrams > Show Diagram...
Select JavaScript Class Diagram or TypeScript Class Diagram
The diagram opens in a new editor tab

3: What Built-in UML Diagrams Can Do

3.1: Key Features and Capabilities

Visualize classes, interfaces, enums, and their members (fields, methods) with visibility modifiers (requires interaction with diagram tools to display specific elements and set visibility levels).
Show inheritance, implementation, and dependencies
Double-click to navigate to source code
Perform refactorings (e.g., renaming) directly from the diagram
Toggle member visibility, filter by visibility, show or hide dependencies, and rearrange the layout
Export diagrams as images (PNG, SVG)
Add classes to the diagram (press Space in the diagram editor)
Refine and manage the diagram by showing or hiding specific members, adjusting visibility levels, and manually adding or arranging elements and relationships using the diagram editor's context menu and toolbar
Run IntelliJ IDEA graph analysis features (focus on paths, measure node centrality)

4: Limitations of Built-in UML Tools

4.1: What to Keep in Mind

Only visualizes existing code; it is not a model-first UML design tool
Availability is limited to IntelliJ IDEA Ultimate and PyCharm Professional
Built-in support focuses on Java, Kotlin, and Python; other languages require Marketplace plugins
Large diagrams can become cluttered quickly
Visual customization options are limited compared to dedicated UML suites

5: Supported Languages for UML Diagramming

Support for UML class diagram generation:

5.1: Supported Languages

Java: IntelliJ IDEA Ultimate
Kotlin: IntelliJ IDEA Ultimate
Python: PyCharm Professional

5.2: Not Supported or Limited

JavaScript/TypeScript: WebStorm does not provide built-in UML class diagrams, but the UML JavaScript and TypeScript plugin adds this capability.
Other languages: No built-in UML class diagram generation

6: When to Look for Alternatives

If you need other UML diagram types or to design diagrams before code:

6.1: Dedicated UML Tools and Plugins

Use dedicated UML tools for full modeling: Visual Paradigm, StarUML, Lucidchart, PlantUML, or draw.io (also sometimes referred to as diagrams.net)
JetBrains Marketplace has plugins for additional diagram types and language support:
- UML JavaScript and TypeScript for JS/TS UML diagrams
- Other diagram plugins may be available for specific languages or diagram types

6.2: Tools for Automated Full Repository Diagramming

If your primary goal is to automatically generate comprehensive UML diagrams from an entire repository with minimal manual intervention, consider these types of tools:

GitUML: Generates UML diagrams directly from a Git repository. Often free for public projects and quick for structural overviews
Dedicated UML/Modeling Tools with Strong Reverse Engineering:
- Visual Paradigm: Imports source code across languages to produce detailed UML diagrams
- Sparx Systems Enterprise Architect: Comprehensive modeling with code reverse engineering for entire projects
- StarUML: Supports reverse engineering from code to class diagrams for several languages
Static Analysis & Visualization Tools:
- SciTools Understand: Generates UML class diagrams and other visualizations from large codebases
- SourceTrail: Interactive code visualization that helps explain class structures and dependencies. (development is discontinued but remains downloadable)

IntelliJ UML diagram export menu showing Open in Web Editor targets such as yEd Live, diagrams.net, Graphviz, Mermaid Live, and PlantUML Web Server

7.1: Save diagrams as PNG or SVG files

Right-click anywhere on the diagram canvas and choose Export Diagram to File...
Pick your preferred format (PNG, SVG, or other vector options) and destination folder
JetBrains remembers the last location you used, so subsequent exports are a single shortcut: press ⌘S (Ctrl+S on Windows/Linux) while the diagram tab is focused to overwrite the previous file
For documentation, pair the SVG export with your design system so the diagram stays sharp across dark and light themes

7.2: Open diagrams in browser editors for live tweaks

Select Open in Web Editor from the same context menu shown above
Choose the target that matches how you want to keep editing:
- yEd Live for quick rearrangement with auto-layout presets
- JGraph diagrams.net for collaborative diagramming directly in a browser tab
- Graphviz Online (with or without node positions) when you want DOT syntax you can script against later
- Mermaid Live or PlantUML Web Server to continue iterating in text-based diagram syntax
The IDE pushes the generated model to the selected web editor, so you can refine names, styling, or annotations without redrawing the structure from scratch

7.3: Keep exports synchronized with your codebase

Regenerate the diagram after each significant refactor (⌥⇧⌘U / Ctrl+Alt+Shift+U) so exported files stay aligned with the latest classes and relationships
Store exported artifacts next to design docs rather than in source control unless the files are part of formal documentation—this keeps your repository focused on code while preserving a clear paper trail for stakeholders
When you update an export, note the Git commit or release tag in the file name (for example, [email protected]) to clarify which code snapshot the diagram represents