Diagram types and examples for AI assistants
Example prompts and the diagrams they produced, with the format the assistant chose and what each took with Claude Sonnet 5.5. Every diagram is the unedited result of the prompt above it. Click a diagram to see it larger, or open it in draw.io.
Processes
Flowchart
Draw an online shop's order process as a diagram: a flowchart with at least two decisions and one retry loop (if the payment fails, retry up to 3 times).
Swimlane process
Draw an employee onboarding process as a diagram: a swimlane process with three lanes (HR, IT, Manager) and at least six steps.
Decision tree
Draw a decision tree that helps choose a database for a new project.
Structure and data
Org chart
Draw the org chart of a 15-person startup: the CEO; a CTO with two engineering managers who each lead three engineers; a CFO with an accountant; and a COO with a head of sales and a support lead. Use names and job titles.
UML class diagram
Draw a UML class diagram for an online store: Customer, Order, OrderItem, Product and Payment, with their main attributes, a few methods and the relationships between them.
State diagram
Draw a state diagram for the lifecycle of an online order: created, paid, shipped, delivered, cancelled and refunded.
Use case diagram
Draw a use case diagram for an ATM.
ER diagram
Draw an ER diagram for a blog: users, posts, comments, tags and a post_tags join table.
Architecture and infrastructure
Three-tier web application
Draw a three-tier web application architecture with a load balancer, two web servers, an application server cluster and a primary database with a read replica.
AWS architecture
Draw the AWS architecture of a photo-sharing app as a diagram, using CloudFront, S3, API Gateway, Lambda, DynamoDB and Cognito.
Office network
Draw the network diagram of a small office: internet connection, firewall, router, two switches, six workstations, a network printer, a file server and a Wi-Fi access point with laptops.
Microservices
Draw the system architecture of a food delivery app: mobile apps for customers and couriers, an API gateway, order, restaurant, courier and payment services, a message queue between them, and a database per service.
CI/CD pipeline
Draw our CI/CD pipeline: a push to GitHub triggers build, unit tests and a security scan; then deploy to staging, run integration tests, wait for manual approval and deploy to production, with a rollback if the production smoke tests fail.
Ideas and time
Mind map
Make a mind map for planning a family vacation.
Timeline
Show the history of the internet as a timeline.
Engineering, business and visuals
Floor plan
Draw a floor plan of a two-bedroom apartment: a living room with an open kitchen, two bedrooms, a bathroom and a hallway with the entrance. Show the walls, doors, windows and the main furniture.
Electrical circuit
Draw the circuit diagram of a 5 V power supply: a 230 V transformer, a bridge rectifier, a smoothing capacitor, a 7805 voltage regulator, an output capacitor and an LED with its resistor as a power indicator.
Business model canvas
Fill in a business model canvas for a meal-kit delivery startup.
Infographic
Make an infographic of the five steps to launch a product: research, design, build, test and launch, each with an icon and a one-line description.
Mermaid diagrams
Sequence diagram
Draw the OAuth 2.0 authorization code flow as a diagram: a sequence diagram between the user, the browser, the client app, the authorization server and the resource server.
Gantt chart
Create a Gantt chart for a 3-month website redesign project.
Pie chart
Make a pie chart of our website traffic sources: search 46%, direct 27%, social 15%, referral 12%.
Kanban board
Show our sprint as a kanban board. To do: release notes, new screenshots. In progress: login bug, API docs. Done: 1.2.0 release, Docker image.
All diagram types
Drawn as draw.io XML
The assistant places these itself, with any of draw.io's shapes, up to about 30 shapes. The Gallery has an example of each:
- Processes: flowcharts, decision trees, swimlane processes, BPMN, CI/CD and approval pipelines, data flow diagrams
- Software: UML class, component, deployment, state and use case diagrams, ER diagrams, C4, ArchiMate, sitemaps
- Architecture: software and system architecture, AWS, Azure and Google Cloud, Kubernetes, networks, server racks
- Engineering and buildings: floor plans, seating plans, electrical and logic circuits, P&ID, fault trees, block diagrams
- Business: org charts, roadmaps, SWOT analyses, business model canvases, sales funnels
- Visuals: infographics, pyramids, concept maps, mind maps, timelines, family trees, scenes such as the water cycle, wireframes
- Anything with icons from the libraries below
Drawn as Mermaid
| Process and flow | Structure and data | Charts | Planning and ideas |
|---|---|---|---|
| Flowchart | Class diagram | Pie chart | Mind map |
| Sequence diagram | ER diagram | XY chart (bar, line) | Timeline |
| ZenUML sequence | Requirement diagram | Quadrant chart | Kanban board |
| State diagram | Block diagram | Sankey diagram | Ishikawa (fishbone) |
| User journey | C4 model | Radar chart | Venn diagram |
| Gantt chart | Architecture | Treemap | Tree view |
| Git graph | Packet diagram | Wardley map | |
| Event modeling |
Flowcharts, class, state and ER diagrams, mind maps, timelines and architecture diagrams are drawn as draw.io XML unless you ask for Mermaid, or a flowchart has more than about 30 shapes.
Icon libraries
Ask for the icons by name ("use Azure icons"). The assistant searches over 10,000 draw.io shapes, plus the draw.io icon collection for logos and general icons:
- Cloud and platforms: AWS, Azure, Google Cloud, IBM Cloud, Alibaba Cloud, Oracle, OpenStack, SAP, Kubernetes, VMware, Citrix, Office 365, Salesforce, Dynamics 365, Atlassian
- Networks: Cisco, Cisco SAFE, Allied Telesis, Cumulus, generic network, racks
- Engineering: P&ID, electrical, fluid power (ISO 1219), floor plans
- Software and business: UML, BPMN 2.0, ArchiMate, SysML, enterprise integration patterns, value stream mapping
- User interfaces: web, iOS and Android mockups, Bootstrap, Material Design