Creating UML Diagrams in IntelliJ IDEA, PyCharm, and WebStorm

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.

• 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

• 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

• 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)

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

• 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)

• 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

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

• 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

• 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

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)

• 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

• 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

• 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