All Diagram Examples

Flowchart

Visualize flowcharts and directed graphs

Basic Flowchart

Code

Ctrl + Enter|

Online Checkout Flow

Code

Ctrl + Enter|

CI/CD Pipeline with Subgraphs

Code

Ctrl + Enter|

Expanded Node Shapes

Code

Ctrl + Enter|

C4 Diagram

Visualize software architecture using the C4 model (Context, Container, Component, Code)

Internet Banking System Context

Code

Ctrl + Enter|

Internet Banking Container Diagram

Code

Ctrl + Enter|

Ishikawa Diagram

Visualize problem and causes in fishbone

Ishikawa Diagram

Code

Ctrl + Enter|

Late Food Delivery Root Causes

Code

Ctrl + Enter|

Kanban Diagram

Visualize work items in a Kanban board

Mermaid Sprint Board

Code

Ctrl + Enter|

Personal Task Board

Code

Ctrl + Enter|

Class Diagram

Visualize class structures and relationships in object-oriented programming

Basic Class Inheritance

Code

Ctrl + Enter|

E-commerce Domain Model

Code

Ctrl + Enter|

Sequence Diagram

Visualize interactions between objects over time

Basic Sequence

Code

Ctrl + Enter|

Online Payment Flow

Code

Ctrl + Enter|

Food Delivery with Parallel Actions

Code

Ctrl + Enter|

Pie Chart

Visualize data as proportional segments of a circle

Basic Pie Chart

Code

Ctrl + Enter|

Workday Breakdown with Values

Code

Ctrl + Enter|

User Journey Diagram

Visualize user interactions and experiences with a system

My Working Day

Code

Ctrl + Enter|

Online Grocery Shopping

Code

Ctrl + Enter|

Mindmap

Visualize ideas and concepts in a tree-like structure

Basic Mindmap

Code

Ctrl + Enter|

Trip Planning with Shapes and Icons

Code

Ctrl + Enter|

Requirement Diagram

Visualize system requirements and their relationships

E-Bike Braking System

Code

Ctrl + Enter|

Radar Diagram

Visualize data in a radial format

Student Grades

Code

Ctrl + Enter|

Framework Comparison with Polygon Grid

Code

Ctrl + Enter|

State Diagram

Visualize the states and transitions of a system

Basic State Diagram

Code

Ctrl + Enter|

Order Lifecycle with Composite States

Code

Ctrl + Enter|

Choice and Concurrency

Code

Ctrl + Enter|

Entity Relationship Diagram

Visualize database schemas and relationships between entities

Basic ER Schema

Code

Ctrl + Enter|

Streaming Service with Keys and Comments

Code

Ctrl + Enter|

Git Graph

Visualize Git repository history and branch relationships

Basic Git Flow

Code

Ctrl + Enter|

Release and Hotfix Workflow

Code

Ctrl + Enter|

Highlighted Commits

Code

Ctrl + Enter|

Architecture Diagram

Visualize system architecture and components

Basic System Architecture

Code

Ctrl + Enter|

Web App with Frontend and Backend Groups

Code

Ctrl + Enter|

Load Balancing with Junctions

Code

Ctrl + Enter|

XY Chart

Create scatter plots and line charts with customizable axes

Sales Revenue

Code

Ctrl + Enter|

Coffee Sales with Data Labels

Code

Ctrl + Enter|

Sign-ups vs Churn

Code

Ctrl + Enter|

Sankey Diagram

Visualize flow quantities between different stages or processes

Monthly Budget Flow

Code

Ctrl + Enter|

Job Application Funnel

Code

Ctrl + Enter|

Energy Flow (UK)

Code

Ctrl + Enter|

Gantt Chart

Visualize project schedules and timelines

Product Launch Plan

Code

Ctrl + Enter|

Website Redesign with Dependencies

Code

Ctrl + Enter|

Timeline Diagram

Visualize events and milestones in chronological order

Project Timeline

Code

Ctrl + Enter|

Product Roadmap with Sections

Code

Ctrl + Enter|

Quadrant Chart

Visualize items in a 2x2 matrix based on two variables

Product Positioning

Code

Ctrl + Enter|

Eisenhower Matrix with Styled Points

Code

Ctrl + Enter|

Packet Diagram

Visualize packet data and network traffic

TCP Packet

Code

Ctrl + Enter|

UDP Packet with Relative Bits

Code

Ctrl + Enter|

Block Diagram

Create block-based visualizations with beta styling

Three-Tier Web Architecture

Code

Ctrl + Enter|

Block Arrows and Nested Blocks

Code

Ctrl + Enter|

Treemap

Visualize hierarchical data as nested rectangles

Monthly Household Budget

Code

Ctrl + Enter|

Disk Usage with Styling

Code

Ctrl + Enter|

Use Case Diagram

Show actors, use cases, system boundaries, and associations

Basic Use Cases

Code

Ctrl + Enter|

System Boundaries

Code

Ctrl + Enter|

Actor Collaboration

Code

Ctrl + Enter|

Event Modeling Diagram

Describe systems using an example of how information has changed within them over time

Shopping Cart Story

Code

Ctrl + Enter|

Cross-System Flow with Data

Code

Ctrl + Enter|

Venn Diagram

Represent relationships in overlapping circles

Product Sweet Spot

Code

Ctrl + Enter|

Team Skill Overlap with Sizes and Styles

Code

Ctrl + Enter|

TreeView

Visualize hierarchical data as a tree structure

Project File Structure

Code

Ctrl + Enter|

Shared Drive with Quoted Names

Code

Ctrl + Enter|

Annotations

Code

Ctrl + Enter|

File-Type Icons via Config Maps

Code

Ctrl + Enter|

Unicode Icons in Filenames

Code

Ctrl + Enter|

Wardley Maps

Visualize business strategy and value chains with component evolution

Tea Shop Value Chain

Code

Ctrl + Enter|

Custom Evolution Stages

Code

Ctrl + Enter|

Pipeline Components

Code

Ctrl + Enter|

GPT Tokeniser Architecture

Code

Ctrl + Enter|

Cynefin Framework

Decision-making framework for categorizing problems by complexity

Incident Response

Code

Ctrl + Enter|

Product Strategy with Domain Transitions

Code

Ctrl + Enter|

Railroad Diagram (IR)

Visualize grammar rules using railroad diagram IR primitives for direct layout control

Expression Grammar

Code

Ctrl + Enter|

JSON Grammar

Code

Ctrl + Enter|

Railroad Diagram (EBNF)

Visualize grammar rules using EBNF notation with W3C and ISO 14977 support

Expression Grammar

Code

Ctrl + Enter|

Semantic Version

Code

Ctrl + Enter|

Railroad Diagram (ABNF)

Visualize grammar rules using RFC 5234 ABNF notation

Email Address

Code

Ctrl + Enter|

Phone Number

Code

Ctrl + Enter|

Railroad Diagram (PEG)

Visualize grammar rules using Parsing Expression Grammar notation

Calculator Grammar

Code

Ctrl + Enter|

Identifiers with Predicates

Code

Ctrl + Enter|