Diagram examples

Diagram examples built in ChartCraft.

Q: Can I download or reuse these 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.

164 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.

BPMN Diagram 8/29/2026

Hospital Patient Intake

Hospital Patient Intake — bpmn diagram with 12 nodes and 12 connections.

12 nodes 12 connections 4 lanes

Flowchart 8/29/2026

Water Cycle Flowchart

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.

water cyclehydrologyprecipitationgroundwaterflowchart

17 nodes 24 connections

Flowchart 8/29/2026

Mitosis Flowchart

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.

mitosiscell cyclecell divisionspindle checkpointchromosomes

9 nodes 9 connections

State Diagram 8/29/2026

Thermostat State Machine

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 machinethermostathvac controlheating and coolinglockout

7 nodes 12 connections

State Diagram 8/29/2026

Media Player State Machine

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 machinemedia playerplayback statesbufferingerror handling

7 nodes 13 connections

State Diagram 8/29/2026

Git Feature Branch State Machine

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.

gitfeature branchstate machinecode reviewmerge conflicts

11 nodes 14 connections

Flowchart 8/29/2026

Level 1 Data Flow Diagram - Payroll System

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.

data flow diagrampayroll systemtimesheetstax reportinghr processpayment processing

13 nodes 16 connections

Flowchart 8/29/2026

Level 0 Data Flow Diagram - Online Store

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.

data flow diagramlevel 0 dfdonline storepayment gatewaywarehousesystem context

5 nodes 8 connections

Flowchart 8/29/2026

C4 Container Diagram - Internet Banking

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 modelcontainer diagraminternet bankingweb applicationmobile appsystem architecture

8 nodes 9 connections

Flowchart 8/29/2026

C4 Context Diagram - Internet Banking

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.

c4 context diagraminternet bankingsystem contextbanking systemexternal systems

8 nodes 5 connections

Flowchart 8/29/2026

Home Network Diagram

A home network diagram showing the internet connection through the ISP, modem, and router, then splitting into wired devices, wireless devices, and a separate IoT network for smart home equipment.

home networkrouterwifiwired devicesiotsmart home

20 nodes 28 connections

Flowchart 8/29/2026

Office Network Topology Diagram

Office network topology showing the path from the internet and ISP modem through a firewall, core switch, and floor access switches to workstations, printers, VoIP phones, video devices, and Wi-Fi. It also includes a server room with file, intranet, and NAS backup systems plus…

office networknetwork topologywifivoipserver roomfirewall

24 nodes 29 connections

Flowchart 8/29/2026

MCP Architecture Diagram

Flowchart of an MCP setup where an AI application connects through an MCP client and JSON-RPC transport to filesystem, database, web API, and diagram servers, which in turn access local disk, Postgres, and a SaaS REST API.

mcparchitecturejson-rpcai applicationsclient-serversystem integration

10 nodes 9 connections

Flowchart 8/29/2026

AI Agent Architecture

Flowchart of an AI agent architecture where a user request passes through guardrails, planning, tool routing, memory, and external tools such as web search, a code sandbox, and a vector database before producing a final answer.

ai agentsagent architecturetool routingmemory systemsvector databaseflowchart

10 nodes 15 connections

Flowchart 8/29/2026

RAG Pipeline Architecture

Flowchart of a retrieval-augmented generation pipeline: documents are loaded, chunked, embedded, and stored in a vector database, then a user question is retrieved, re-ranked, added to a prompt, and answered by an LLM.

ragretrieval pipelinevector databaseembeddingsllm

9 nodes 10 connections

BPMN Diagram 8/23/2026

Customer Order Process

Customer Order Process — bpmn diagram with 13 nodes and 12 connections.

13 nodes 12 connections 2 lanes

BPMN Diagram 8/23/2026

Purchase Order Approval Swimlane

Purchase Order Approval Swimlane — bpmn diagram with 17 nodes and 18 connections.

17 nodes 18 connections 5 lanes

BPMN Diagram 8/23/2026

Customer Order Process

Customer Order Process — bpmn diagram with 13 nodes and 12 connections.

13 nodes 12 connections 2 lanes

BPMN Diagram 8/23/2026

Swimlane Process Map

Swimlane process map of a purchasing workflow across Requester, Manager, Procurement, Finance, and Supplier. It traces request creation and approval, supplier checks and quotes, budget review, purchase order issuance, delivery, document matching, and payment.

swimlane diagramprocurement processpurchase approvalbudget reviewaccounts payable

17 nodes 18 connections 5 lanes

BPMN Diagram 8/23/2026

BPMN Subprocess Example

BPMN diagram of an order fulfillment subprocess across Sales and Fulfillment lanes, from order validation and payment check to picking, packing, shipping, confirmation, and returns handling.

bpmnsubprocessorder fulfillmentsalesshippingreturns

13 nodes 12 connections 2 lanes

BPMN Diagram 8/23/2026

BPMN Parallel Gateway Example

BPMN onboarding workflow showing a parallel gateway after offer acceptance that starts HR, IT, and Facilities tasks at the same time, then rejoins before the welcome email and onboarding completion.

bpmnparallel gatewayemployee onboardinghr workflowit provisioningfacilities

11 nodes 12 connections 3 lanes

State Diagram 8/23/2026

Moore Machine State Diagram

State diagram of a Moore machine with states Start, S0, S1, S2, S3, and End, showing seven directed transitions. It illustrates a finite-state sequence where outputs are associated with states rather than transitions.

moore machinestate diagramfinite state machineautomatasequential logic

6 nodes 7 connections

State Diagram 8/23/2026

Mealy Machine State Diagram

State diagram of a Mealy machine with states Start, S0, S1, S2, and End, showing six transitions between the states. It illustrates how the machine moves through named states in response to inputs.

mealy machinestate diagramfinite-state machineautomatatransitions

5 nodes 6 connections

State Diagram 8/23/2026

Finite State Machine Diagram

Finite state machine diagram showing a system moving from Start into Locked or Unlocked states, with transitions to Out of Service and End. It illustrates the possible state changes and terminal outcomes in a simple state-based workflow.

finite state machinestate diagramlocked stateunlocked stateworkflow

5 nodes 6 connections

About these examples

How were these diagram examples made?

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.

Which diagram types are included?

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.

Can I download or reuse these 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.

How do I create my own diagram?

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.