# Diagram examples The rest of this branch is organised by language, which is the right structure once you know what you are writing. This page is the other way round: start from what you want to show, and it points you at a working diagram. ![The examples browser in the Capable Diagrams app with languages listed on the left and a grid of Mermaid examples including a user journey, state diagram, flowchart, sequence diagram, class diagram an](https://help.gocapable.com/images/366abce5-f5ae-48ed-ba10-2c2c3a03db6e.webp) The sidebar groups examples by language, and each card opens a working diagram you can copy into a template. Every diagram linked here is real. Open one, edit it, and nothing breaks. If you want the language reference rather than an example, that is in [Reference](https://help.gocapable.com/diagrams/reference.html). --- ## Start from what you want to draw | **You want to show** | **Working examples** | | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | A process or a flow | [Flowchart (Mermaid)](https://help.gocapable.com/diagrams/flowchart-mermaid.html) · [Flowchart (draw.io)](https://help.gocapable.com/diagrams/flowchart-draw-io.html) · [Swimlane process (draw.io)](https://help.gocapable.com/diagrams/swimlane-process-draw-io.html) · [Employee onboarding process (BPMN)](https://help.gocapable.com/diagrams/employee-onboarding-process-bpmn.html) | | How a system is built | [Container diagram (C4)](https://help.gocapable.com/diagrams/container-diagram-c4.html) · [Architecture diagram (D2)](https://help.gocapable.com/diagrams/architecture-diagram-d2.html) · [Component diagram (PlantUML)](https://help.gocapable.com/diagrams/component-diagram-plantuml.html) · [AWS architecture (draw.io)](https://help.gocapable.com/diagrams/aws-architecture-draw-io.html) | | An interaction over time | [Sequence diagram (Mermaid)](https://help.gocapable.com/diagrams/sequence-diagram-mermaid.html) · [Sequence diagram (PlantUML)](https://help.gocapable.com/diagrams/sequence-diagram-plantuml.html) · [Sequence diagram (D2)](https://help.gocapable.com/diagrams/sequence-diagram-d2.html) · [Timeline (Mermaid)](https://innovator.atlassian.net/wiki/spaces/NDFC/pages/1409220966) | | Data and schemas | [Entity relationship diagram (Mermaid)](https://help.gocapable.com/diagrams/entity-relationship-diagram-mermaid.html) · [eCommerce database (DBML)](https://help.gocapable.com/diagrams/ecommerce-database-dbml.html) · [SQL schema diagram (D2)](https://help.gocapable.com/diagrams/sql-schema-diagram-d2.html) · [Entity relationship diagram (ERD)](https://help.gocapable.com/diagrams/entity-relationship-diagram-erd.html) | | Numbers | [Bar chart (Vega-Lite)](https://help.gocapable.com/diagrams/bar-chart-vega-lite.html) · [Line chart (Vega-Lite)](https://help.gocapable.com/diagrams/line-chart-vega-lite.html) · [Sankey diagram (Mermaid)](https://help.gocapable.com/diagrams/sankey-diagram-mermaid.html) · [Heat map (Vega-Lite)](https://help.gocapable.com/diagrams/heat-map-vega-lite.html) | | Rules and decisions | [Discount by customer tier (DMN)](https://help.gocapable.com/diagrams/discount-by-customer-tier-dmn.html) · [Loan eligibility (DMN)](https://help.gocapable.com/diagrams/loan-eligibility-dmn.html) · [Support ticket priority (DMN)](https://help.gocapable.com/diagrams/support-ticket-priority-dmn.html) · [Access level by role (DMN)](https://help.gocapable.com/diagrams/access-level-by-role-dmn.html) | | Infrastructure | [Network diagram (NWDiag)](https://help.gocapable.com/diagrams/network-diagram-nwdiag.html) · [Rack diagram (RackDiag)](https://help.gocapable.com/diagrams/rack-diagram-rackdiag.html) · [Rack layout (draw.io)](https://help.gocapable.com/diagrams/rack-layout-draw-io.html) · [Subnet and VLAN diagram](https://help.gocapable.com/diagrams/subnet-and-vlan-diagram.html) | | Hardware and binary formats | [TCP header (Bytefield)](https://help.gocapable.com/diagrams/tcp-header-bytefield.html) · [Signal timing (WaveDrom)](https://help.gocapable.com/diagrams/signal-timing-wavedrom.html) · [Connector and cable (WireViz)](https://help.gocapable.com/diagrams/connector-and-cable-wireviz.html) · [Hardware module (Symbolator)](https://help.gocapable.com/diagrams/hardware-module-symbolator.html) | --- ## If you are new to this * **Start with Mermaid.** It covers most of what people draw, and the syntax is short enough to read without training. * **Copy, then change one line.** Every example page has the source underneath the diagram. That loop teaches a language faster than any reference page. * **Use draw.io when position matters.** Floor plans, network diagrams and anything with official icons belong on a canvas. ℹ️ **Nothing here is a screenshot.** Every diagram on this branch is stored, rendered and editable exactly like one you drew yourself. --- ## Related [By languageThe same examples, grouped by language.](https://help.gocapable.com/diagrams/by-language.html) [Diagram typesGuidance on which diagram to choose.](https://help.gocapable.com/diagrams/diagram-types.html) [Get startedIf you have not drawn one yet.](https://help.gocapable.com/diagrams/get-started.html) --- _Start from the picture you want._