Diagram examples
177 public diagrams, every one generated from a plain-language description. Open any example to see its structure live, or download it as PNG or SVG.
Sequence diagram showing the Asset Specialist interacting with the Asset Management System, which in turn works with the Asset Store and records activity in the Transaction Log.
Sequence Diagram — sequence diagram with 4 nodes and 13 connections.
University enrollment — er diagram with 4 nodes and 3 connections.
Flowchart of a reporting function workflow: open reporting, choose report type and scope, set filters, validate access and parameters, then retrieve and aggregate data. Branches to show the report for review/print/export or display a no-results message before ending.
System architecture for a ride-sharing app showing rider and driver mobile apps connecting through an API gateway to services for users, trips, matching, location, pricing, payments, and notifications, with supporting databases, event streaming, analytics, maps, and Stripe.
Flowchart of a modern data platform showing ingestion from Postgres, SaaS APIs, event streams, and files into bronze, silver, and gold layers, orchestrated with Airflow and transformed with dbt and Spark. It also maps downstream use in warehouses, BI, ML, reverse ETL, and…
Flowchart of the von Neumann computer architecture showing input devices, the control unit and ALU, registers and main memory, and how the address, data, and control buses connect processing, storage, and output.
Flowchart of a data warehouse architecture showing source systems like CRM, ERP, web analytics, and CSV exports feeding extract, staging, transform, and load processes into an enterprise data warehouse, marts, and analytics tools.
Activity diagram showing a restaurant order flow from browsing the menu and placing an order through POS entry, food preparation and drink service, billing, payment confirmation, receipt printing, and checkout.
BPMN swimlane diagram of an insurance claim process across policyholder, claims agent, adjuster, and finance roles, from claim submission and policy verification to damage inspection, approval, payment, or rejection.
Diagram of a three-tier web application architecture where a web SPA and mobile app deliver traffic through a CDN and load balancer to API servers, with supporting auth, caching, background jobs, databases, storage, and external email and payment services.
Entity-relationship diagram for a hotel reservation system showing guests, hotels, rooms, reservations, payments, services, reviews, and the join table used to attach multiple services to a reservation.
Class diagram of an airline reservation system showing how passengers make bookings for flights, receive tickets, choose seats, and submit payments. It also connects flights to airports, aircraft, and the airline that operates them.
State transition diagram of an order lifecycle, from pending payment through processing, shipping, delivery, returns, cancellation, and refund outcomes. It also includes exception paths such as backordered and lost in transit.
Hospital Patient Intake — bpmn diagram with 12 nodes and 12 connections.
Flowchart of the water cycle showing water moving from oceans, lakes, and rivers through evaporation, transpiration, and sublimation to condensation, cloud growth, and precipitation, then returning by runoff, infiltration, groundwater, accumulation, and melting.
Flowchart of mitosis from Interphase through Prophase, Prometaphase, Metaphase, Anaphase, Telophase, and Cytokinesis, ending with Daughter Cells. It also marks the spindle checkpoint before chromosomes separate.
State machine for a thermostat showing how it moves between Idle, Heating, Cooling, Off, and Lockout from Start to End. It captures the operating modes and the transitions between normal control and safety lockout states.
State machine for a media player showing the main playback states: start, stopped, playing, paused, buffering, error, and end, with transitions between user actions and playback conditions.
State diagram of a Git feature branch lifecycle, from creation and active development through code review, requested changes, approval, merge conflicts, and final outcomes like merge, deletion, or abandonment.
Level 1 data flow diagram of a payroll system showing how employee timesheets move through validation, gross pay and deduction calculations, payment issuance, and tax reporting. It includes interactions with HR, the bank, tax authority, and payroll data stores.
Level 0 data flow diagram for an online store, showing the main interactions between the customer, the store system, payment gateway, warehouse, and marketing team. It outlines the system’s external data exchanges at a high level.
C4 container diagram of an internet banking system showing how customers use a single-page web app or mobile app, which connect through a web server and API application to a database, email system, and mainframe banking platform.
C4 context diagram for an internet banking system, showing personal banking customers and bank staff interacting with the system and its connections to the mainframe banking platform and email service.
About these examples
Every diagram on this page was generated by ChartCraft from a plain-language description. The prompt goes to a language model that returns the diagram's structure — the steps, entities, states, or participants and how they connect — and a layout engine (ELK) then positions the nodes and routes the connections. Nothing is hand-drawn: what you see is the real output of the same pipeline that runs in the studio, which is why each example lists its node and connection counts.
Flowcharts, BPMN process diagrams with swimlanes, sequence diagrams, entity-relationship diagrams, UML class diagrams, state machine diagrams, and activity diagrams. Each type also has a curated page with annotated examples and notation notes: flowchart examples, BPMN examples, sequence diagram examples, ER diagram examples, class diagram examples, state diagram examples, UML diagram examples.
Yes. Every example is free to download as an image: append .png or .svg to its URL (for instance /examples/login-sequence-diagram.svg) to get a vector or raster file, or open the diagram in the studio to edit your own copy. The same renderer is available as a free diagram image API for embedding diagrams in documentation and READMEs.
Describe the process, system, or schema in a sentence or two in the ChartCraft studio and it draws the diagram in seconds. You can then refine it conversationally ("add an approval step after review") or edit nodes and connections directly. Diagrams can also be created from Claude or any other MCP client through the ChartCraft MCP server, and the AI diagram generator page walks through what kinds of descriptions work best.