UML diagram
A guide to simplified software design
Turn complex systems into clear visuals. Map structures, processes, and interactions so teams can plan faster and communicate better.
What is a UML diagram?
A UML diagram is a visual representation of a software system that follows the Unified Modeling Language (UML). By using a standardized set of symbols, they show what a system is made of and how its parts work together, from components and relationships to workflows and business processes. That gives software engineers, architects, and stakeholders a shared, clear, and visual reference for software design.
There are 14 UML diagram types, each serving a specific purpose. They are divided into two classes: structure diagrams and behavior diagrams.
Using UML diagrams across the software design process
Imagine your team is building a CI/CD platform that builds, tests, and deploys apps whenever developers push code.Here's how you could use different UML diagram types at each stage of the design process.
Start with a use case diagram to define user needs
Use case diagrams come first. They clarify requirements, set system boundaries, and align developers, product teams, and stakeholders on what the system must do. At this point, technical details aren't required.
In the CI/CD platform, developers and administrators become the actors, and the platform is the system boundary. Business analysts and product managers define the use cases inside it: pushing code, running tests, reviewing build results, approving a deployment, and managing environment settings.
Use an activity diagram to map the workflow
With requirements defined, the next step is to map how the work flows from start to finish. Activity diagrams are flowcharts that show actions, decisions, alternative paths, and parallel activities. Teams use them to agree on a workflow before implementing or refining it.
In our example, a UML activity diagram follows a code push through build, automated tests, approval, and deployment. Unit and integration tests can run in parallel. A failed test stops the pipeline and notifies the developer. A rejected deployment sends the change back for review.
Draw a component diagram to outline the architecture
With the workflow mapped, you can move to the software architecture. A component diagram shows the system's major building blocks, their interfaces, and the dependencies between them. It sets boundaries before you detail objects and interactions.
A component diagram can map the Git integration, CI server, build runner, test environment, artifact storage, and deployment service of the CI/CD platform. DevOps engineers and architects see at a glance which services connect.
Build a class diagram to model core objects
Class diagrams model core objects, their properties, and the relationships between them. They give the team a shared blueprint before implementation.
Inside the CI/CD platform, class diagrams can define core objects: Repository, Commit, Build, Test, Deployment, Environment, and User. They can also specify their properties and relationships, like inheritance or association, to establish the structure of the app.
Add a sequence diagram to refine interactions
You’ve defined the system’s main structure. Now, a sequence diagram can help you understand how its parts interact over time, showing the order of messages, API calls, responses, and alternative or failure paths before implementation.
In our case, a sequence diagram starts when a developer pushes a commit. The Git provider calls the CI server, then the server triggers the build service and test runner. If tests fail, the test runner reports back, and the CI server notifies the developer.
Finish with a state diagram to track pipeline status
A state machine diagram, or state diagram, shows how a system or object responds to events over its lifetime. Define the states and transitions before you implement its behavior.
For the CI/CD app, software engineers can model how a build changes state from Queued → Running → Passed → Deploying → Deployed. The state diagram can also include alternative states like Failed, Cancelled, or Blocked to cover different events.
Who works with UML diagrams?
Software Developers
Use component diagrams to map the architecture of a software system and its dependencies. Show how components such as an API, authentication service, database, and payment gateway connect and interact.
Business Analysts
Use activity diagrams to map business processes and identify gaps or bottlenecks. Visualize workflows such as order fulfillment, employee onboarding, or customer support escalation.
Product Managers
Create use case diagrams to define system scope and align teams around key functionality. Map user interactions such as signing up, placing an order, or submitting a support request.
Educators
Use class diagrams to teach object-oriented programming. Model a simple system, such as a library or online store, to help students connect programming concepts to a concrete example.
Tips and tricks for creating UML diagrams
Creating UML diagrams
- Use standard notation: Stick to widely recognized UML symbols and conventions for consistency and ease of understanding.
- Incremental detailing: Start with a high-level view and add details as needed. This helps in maintaining the big picture while refining specifics.
- Avoid redundancy: Eliminate repetitive or unnecessary elements to keep diagrams concise and focused.
- Consider the audience: Tailor the level of complexity to your audience. A diagram meant for technical experts can be more detailed than one for a business user.
How to make a UML diagram in Excalidraw?
- Save clicks with shortcuts: Press R or 2 to draw a rectangle, A or 5 to draw an arrow, and T or 8 to create a text box. Press ? to see all shortcuts.
- Add labels to arrows: Double-click on an arrow to add a label. Click the label to move it.
- Create nodes quickly: With a shape selected, press Cmd/Ctrl+Arrow key to add nodes. Hold Cmd/Ctrl while pressing an Arrow key repeatedly to create multiple nodes at once.
- Use grid and snapping: Right-click on the whiteboard and select "Snap to objects" or "Toggle grid" to give your diagrams a well-structured look.
- Create with libraries and templates: Search Excalidraw libraries for system design components and icons, or open a new scene with editable UML diagram templates. Note: The scene opens in the free editor. You'll be able to save or export your current work before loading the scene.
- Draw faster with built-in tools: Use Text to diagram or Mermaid to Excalidraw to draft UML diagrams from prompts or Mermaid code. You can find both tools in the editor toolbar.
- Start with a tutorial: Watch our YouTube guide to learn how to create UML diagrams in Excalidraw.
How to create a UML diagram with MCP
Connect your LLM of choice through MCP to generate diagrams from prompts, documentation, or a codebase. Edit and refine them in Excalidraw.
▶️ YouTube tutorial
Learn how to connect Excalidraw+ to your LLM of choice using Homebrew. Get practical ideas for using the MCP connection for work, personal productivity, and fun.
📄 Documentation
MCP/API keys, authenticator, permissions, tools. All the technical details you need for a more advanced MCP setup.
Wrapping up
UML (Unified Modeling Language) diagrams give software teams a standard way to visualize system design. Each diagram type shows a different view, from requirements and structure to behavior and architecture.
With UML diagrams, engineers, architects, and stakeholders share one picture, making it easier to collaborate and spot design flaws before implementation.
Easier diagramming for teams with PLUS
💬 Comments: Keep collaboration organized by adding comments directly on the board.
✨ Extended AI: Generate more UML diagrams to support your work with expanded gen AI limits.
🎙️ Voice hangouts and screenshare: Excalidraw is the only tool you need to discuss and share your diagrams in real time.
📺 Presentations: Frame diagrams to turn them into slides without exporting or redrawing in other tools.
😎 Unlimited scenes: Create any number of dedicated boards for specific UML diagrams.
📂 Work organization: Make collaboration easier with scene collections, user accounts, access controls, and team workspaces.
UML diagram types in a nutshell
A quick reference guide to all types of UML diagrams.
Structure diagrams
Structure diagrams capture the static side of a system and what it's made of: classes, components, and the relationships between them.
UML diagram type | What does it do? | Use it to... |
|---|---|---|
Class diagram | Visualizes classes of a system, their attributes, operations, and relationships between them. | Plan or document a system's main building blocks and how they relate. |
Component diagram | Represents system components, their dependencies, and how they interact with each other. | Show a system's major parts and what depends on what. |
Composite structure diagram | Shows the internal parts of a class or component, their structure, and their collaborations. | Explain how a single component is built from smaller parts. |
Deployment diagram | Represents how software is deployed across hardware and how these components are connected. | Plan or document where software runs and how the hardware connects. |
Object diagram | Shows specific objects, their attributes, and relationships at a specific moment. | Give a concrete example of your data at one moment, e.g., to explain or test a class diagram. |
Package diagram | Groups model elements into packages and shows the dependencies between them. | Organize a large model into groups and show how those groups depend on each other. |
Profile diagram | Defines custom UML elements for specific domains. | Adapt UML to a specific domain or industry with your own terms. |
Behavior diagrams
Behavior diagrams focus on the dynamic side of a system and what it does: interactions between components, users, and other systems.
UML diagram type | What does it do? | Use it to... |
|---|---|---|
Activity diagram | Maps workflows and processes with their actions, decisions, and internal flows. | Lay out a process step by step, especially one with decisions or parallel steps. |
State machine diagram | Lists the states an object or system can be in and the events that trigger transitions between them. | Visualize how an object or system behaves depending on its current state. |
Use case diagram | Shows how actors (users or external systems) interact with a system and the functions needed to achieve specific goals. | Capture what users expect from a system before you design it. |
Communication diagram | Focus on interactions between objects, their relationships, and the messages they exchange. | Show who talks to whom rather than the exact order of events. |
Sequence diagram | Shows how objects or participants communicate with one another in a specific sequence over time. | Represent the message order, such as in API calls or login flows. |
Interaction overview diagram | Provides a high-level view of complex interactions through a sequence of other diagrams ordered in a flow. | Create a big-picture map of a complex process that spans several other diagrams. |
Timing diagram | Maps how the state or value of one or more objects changes in a specific time frame. | Visualize processes where the exact timing counts, such as in real-time or hardware-related systems. |
