UML diagram types supported
UML 2.5.1 defines 14 diagram types. flow-chart.io supports the four most commonly used in software engineering:
| Diagram type | Elements generated | Best for |
|---|---|---|
| Class diagram | Classes, interfaces, attributes, methods, inheritance, association, dependency | Domain modelling, OOP design, API contracts, database schema planning. |
| Sequence diagram | Lifelines, synchronous/async messages, return arrows, alt/opt/loop fragments | API flows, authentication sequences, inter-service communication. |
| Component diagram | Components, interfaces (provided/required), dependencies, subsystems | Service architecture, microservice boundaries, deployment topology. |
| Use case diagram | Actors, use cases, association, include, extend, system boundary | Requirements gathering, stakeholder communication, scope definition. |
Class diagram relationship types
Using the correct relationship type matters — inheritance and composition have different implications for object lifecycle and coupling that readers will infer from the arrow style.
| Element | Meaning |
|---|---|
| Class box | Three-compartment rectangle: name (top), attributes (middle), methods (bottom). |
| Interface | Class box with «interface» stereotype, or lollipop notation for component diagrams. |
| Inheritance (▷) | Solid line with hollow arrowhead. 'Is-a' relationship. Subclass → Superclass. |
| Association (→) | Solid line with open arrowhead. Navigable relationship between classes. |
| Composition (◆→) | Solid diamond at whole, line to part. Part cannot exist without the whole. |
| Aggregation (◇→) | Hollow diamond at whole, line to part. Part can exist independently. |
| Dependency (⟶) | Dashed line with open arrowhead. One class uses another but does not own it. |
Example: user authentication sequence diagram
The following message sequence covers a standard login flow across four participants — Browser, API Gateway, Auth Service, and UserDB:
| From | To | Message | Type |
|---|---|---|---|
| Browser | API Gateway | POST /auth/login {email, password} | sync |
| API Gateway | Auth Service | validateCredentials(email, password) | sync |
| Auth Service | UserDB | SELECT user WHERE email = ? | sync |
| UserDB | Auth Service | user record | return |
| Auth Service | API Gateway | JWT token | return |
| API Gateway | Browser | 200 OK {token} | return |
Type this prompt to generate the above diagram:
User authentication sequence: Browser sends POST /auth/login with email and password to the API Gateway. API Gateway calls Auth Service validateCredentials. Auth Service queries UserDB for the user record. UserDB returns the user record to Auth Service. Auth Service returns a JWT token to API Gateway. API Gateway returns 200 OK with the token to Browser. Add an alt fragment for invalid credentials returning 401 Unauthorized. Show as a UML sequence diagram.
How AI UML generation works in flow-chart.io
- Domain detection. The prompt is analysed to determine the UML diagram type. "Classes with relationships" routes to a class diagram; "messages between services" routes to a sequence diagram; "modules and interfaces" routes to a component diagram.
- Typed generation. Each element is generated as a named object: a class box with compartments, a lifeline with an activation bar, a component with interface connectors. Every element conforms to UML 2.5.1 notation.
- Layout pass. Class diagrams are arranged to minimise crossing lines, with inheritance hierarchies running top-to-bottom. Sequence diagrams lay out lifelines left-to-right and messages top-to-bottom chronologically.
UML diagramming best practices
- Show only what matters for the audience. A class diagram for a code review includes method signatures; one for a stakeholder meeting may show only class names and relationships.
- In sequence diagrams, use 'alt' fragments to show conditional paths rather than a separate diagram per path.
- Limit class diagrams to 8–12 classes per diagram. Split large models into packages and show inter-package dependencies on a separate diagram.
- Name associations from the perspective of the source class ('Customer places Order', not just a line).
- Use «include» in use case diagrams for mandatory sub-behaviour; use «extend» only for genuinely optional or conditional extensions.
- In component diagrams, model interfaces explicitly — a component that provides an interface should show the lollipop; one that requires it should show the socket.
Frequently asked questions
- What is the difference between a class diagram, a sequence diagram, and a component diagram?
- A class diagram is a structural diagram — it shows the types in a system (classes, interfaces, enumerations) along with their attributes, methods, and static relationships (inheritance, association, dependency). A sequence diagram is a behavioural diagram — it shows how objects collaborate over time to execute a specific use case, with lifelines representing participants and arrows representing messages in chronological order. A component diagram is an architectural diagram — it shows the physical or logical modules of a system (components, subsystems, services) and the interfaces through which they communicate.
- Is UML a standard, and which version does flow-chart.io follow?
- Yes. UML is maintained by the Object Management Group (OMG) and the current version is UML 2.5.1, published as ISO/IEC 19505. flow-chart.io generates diagrams that conform to UML 2.5.1 notation for class, sequence, component, and use case diagrams.
- Is the generated UML diagram editable, or is it a static image?
- Fully editable. Every element — class box, lifeline, message arrow, alt fragment, component, interface lollipop — is a typed object in the diagram's scene graph. You can double-click any element to rename it, drag it to reposition, add or remove attributes and methods from a class, and reconnect arrows. Nothing is flattened to pixels until you explicitly export to PNG.
- What export formats are available for UML diagrams?
- SVG (vector, scalable), PNG at 2× and 4× resolution, PDF (print-ready), JSON (re-importable scene graph), and Mermaid (.mmd). SVG is best for embedding in documentation or design tools. JSON lets you re-import the diagram into flow-chart.io for further editing or store it in version control alongside your codebase.
- How does flow-chart.io compare with PlantUML?
- PlantUML is a text-to-diagram tool: you write a DSL script and it renders a raster image that is not interactively editable. flow-chart.io generates a fully interactive scene graph from plain-language descriptions, so you can edit the result visually without managing a DSL. The JSON and Mermaid exports keep your diagram in a version-controllable format if text-as-source matters to your team.
- How many UML diagrams can I generate on the free plan?
- The free plan includes 40 AI credits per month — roughly 8–10 standard UML diagrams depending on complexity. No credit card required. Pro and Team plans include higher credit limits, PDF export, JSON export, version history, and team sharing features.
- Can flow-chart.io generate use case diagrams as well?
- Yes. Use case diagrams show actors (users or external systems) and the use cases they interact with, connected by association, include, and extend relationships. Describe the actors and the actions they can perform and flow-chart.io generates the use case diagram with correctly placed actor figures, use case ovals, and relationship arrows.