---
title: Examples · Pele
description: Every diagram type that Pele draws, with examples from Mermaid's documentation.
---
## Agentflow
```mermaid
agentflow-beta TB
flow intake["Intake"]
receive["Receive request"]@{ shape: input }
end
flow processing["Processing"]
validate["Validate"]@{ shape: task }
enrich["Enrich"]@{ shape: task }
validate --> enrich
end
processing@{ view: "collapsed" }
flow output["Output"]
publish["Publish"]@{ shape: action }
end
receive --> validate
enrich --> publish
```
```mermaid
agentflow-beta TB
connector llm["LLM API"]
llm@{ protocol: "http", endpoint: "https://api.example.com/chat" }
flow coffee_team["Coffee Team"]
city["city"]@{ shape: input, value: "Stockholm" }
flow researcher["Researcher"]
research["research_location"]@{ shape: tool, params: "city :: String", returns: "Report" }
write["write_copy"]@{ shape: tool, connectorRef: "llm.chat", returns: "CoffeeCopy" }
city --> research --> write
end
researcher@{ instruction: "Research the city and draft English coffee copy citing sources." }
flow designer["Designer"]
render["generate_html"]@{ shape: tool, connectorRef: "llm.chat", returns: "String" }
brand["Nordic Brand Guide"]@{ shape: refdoc }
render -.- brand
end
researcher --> designer
end
```
## Architecture
```mermaid
architecture-beta
service left_disk(disk)[Disk]
service top_disk(disk)[Disk]
service bottom_disk(disk)[Disk]
service top_gateway(internet)[Gateway]
service bottom_gateway(internet)[Gateway]
junction junctionCenter
junction junctionRight
left_disk:R -- L:junctionCenter
top_disk:B -- T:junctionCenter
bottom_disk:T -- B:junctionCenter
junctionCenter:R -- L:junctionRight
top_gateway:B -- T:junctionRight
bottom_gateway:T -- B:junctionRight
```
```mermaid
architecture-beta
group sources(cloud)[Sources]
service src_a(server)[Source A] in sources
service src_b(server)[Source B] in sources
service src_c(server)[Source C] in sources
group storage(database)[Storage]
service db_one(database)[DB One] in storage
service db_two(database)[DB Two] in storage
service db_three(database)[DB Three] in storage
group output(disk)[Output]
service brief(disk)[Brief] in output
service analyst(server)[Analyst] in output
service delivery(cloud)[Delivery] in output
src_a:B --> T:db_one
src_b:B --> T:db_two
src_c:B --> T:db_three
db_two:B --> T:brief
brief:R --> L:analyst
analyst:R --> L:delivery
align row src_a src_b src_c
align row db_one db_two db_three
align row brief analyst delivery
align column src_a db_one
align column src_b db_two brief
align column src_c db_three
```
## Block
```mermaid
block
blockArrowId<["Label"]>(right)
blockArrowId2<["Label"]>(left)
blockArrowId3<["Label"]>(up)
blockArrowId4<["Label"]>(down)
blockArrowId5<["Label"]>(x)
blockArrowId6<["Label"]>(y)
blockArrowId7<["Label"]>(x, down)
```
```mermaid
block
columns 3
a:3
block:group1:2
columns 2
h i j k
end
g
block:group2:3
%% columns auto (default)
l m n o p q r
end
```
## C4
```mermaid
C4Component
title Component diagram for Internet Banking System - API Application
Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to the internet banking functionality to customers via their mobile device.")
ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Container_Boundary(api, "API Application") {
Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
Component(accounts, "Accounts Summary Controller", "MVC Rest Controller", "Provides customers with a summary of their bank accounts")
Component(security, "Security Component", "Spring Bean", "Provides functionality related to singing in, changing passwords, etc.")
Component(mbsfacade, "Mainframe Banking System Facade", "Spring Bean", "A facade onto the mainframe banking system.")
Rel(sign, security, "Uses")
Rel(accounts, mbsfacade, "Uses")
Rel(security, db, "Read & write to", "JDBC")
Rel(mbsfacade, mbs, "Uses", "XML/HTTPS")
}
Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
Rel(spa, accounts, "Uses", "JSON/HTTPS")
Rel(ma, sign, "Uses", "JSON/HTTPS")
Rel(ma, accounts, "Uses", "JSON/HTTPS")
UpdateRelStyle(spa, sign, $offsetY="-40")
UpdateRelStyle(spa, accounts, $offsetX="40", $offsetY="40")
UpdateRelStyle(ma, sign, $offsetX="-90", $offsetY="40")
UpdateRelStyle(ma, accounts, $offsetY="-40")
UpdateRelStyle(sign, security, $offsetX="-160", $offsetY="10")
UpdateRelStyle(accounts, mbsfacade, $offsetX="140", $offsetY="10")
UpdateRelStyle(security, db, $offsetY="-40")
UpdateRelStyle(mbsfacade, mbs, $offsetY="-40")
```
## Class
```mermaid
---
config:
class:
hierarchicalNamespaces: false
---
classDiagram
namespace Company.Engineering.Backend {
class Developer {
+writeCode()
}
}
namespace Company.Engineering.Frontend {
class Designer {
+createMockup()
}
}
namespace Company {
class CEO {
+makeDecisions()
}
}
CEO --> Developer : oversees
CEO --> Designer : oversees
```
```mermaid
---
title: Animal example
---
classDiagram
note "From Duck till Zebra"
Animal <|-- Duck
note for Duck "can fly
can swim
can dive
can help in debugging"
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
```
## Cynefin
```mermaid
cynefin-beta
title Strategy Categorization
complex
"Market research"
complicated
"Competitive analysis"
clear
"Standard pricing"
chaotic
"Crisis management"
complex --> complicated : "Pattern identified"
complicated --> clear : "Best practice codified"
clear --> chaotic : "Complacency"
chaotic --> complex : "Stabilized"
```
```mermaid
cynefin-beta
title Incident Response
complex
"Investigate root cause"
"Run chaos experiment"
complicated
"Analyze performance data"
"Expert review needed"
clear
"Restart service"
"Apply known fix"
chaotic
"Page on-call immediately"
confusion
"Unknown failure mode"
```
## Entity relationship
```mermaid
erDiagram
subgraph title1
CUSTOMER
CUSTOMER {
string name
string custNumber
string sector
}
end
subgraph title2
CAR ||--o{ NAMED-DRIVER : allows
subgraph title3
PERSON
PERSON {
string firstName
string lastName
int age
}
end
end
```
```mermaid
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
CAR {
string registrationNumber PK
string make
string model
string[] parts
}
PERSON ||--o{ NAMED-DRIVER : is
PERSON {
string driversLicense PK "The license #"
string(99) firstName "Only 99 characters are allowed"
string lastName
string phone UK
int age
}
NAMED-DRIVER {
string carRegistrationNumber PK, FK
string driverLicence PK, FK
}
MANUFACTURER only one to zero or more CAR : makes
```
## Event modeling
```mermaid
eventmodeling
timeframe 01 ui CartUI
timeframe 02 command AddItem [[AddItem01]]
timeframe 03 event ItemAdded [[ItemAdded]]
timeframe 04 command AddItem [[AddItem02]]
timeframe 05 event ItemAdded [[ItemAdded]]
data AddItem01 {
description: 'john'
image: 'avatar_john'
price: 20.4
}
data AddItem02 {
description: 'jack'
image: 'avatar_jack'
price: 12.5
}
data ItemAdded {
description: string
image: string
price: number
}
```
```mermaid
eventmodeling
timeframe 01 ui CartUI
timeframe 02 command AddItem
timeframe 03 event ItemAdded
resetframe 04 event External.InventoryChanged
timeframe 05 processor InventoryProcessor
timeframe 06 command ChangeInventory
timeframe 07 event Cart.InventoryChanged
```
## Flowchart
```mermaid
flowchart LR
subgraph subgraph1
direction TB
top1[top] --> bottom1[bottom]
end
subgraph subgraph2
direction TB
top2[top] --> bottom2[bottom]
end
%% ^ These subgraphs are identical, except for the links to them:
%% Link *to* subgraph1: subgraph1 direction is maintained
outside --> subgraph1
%% Link *within* subgraph2:
%% subgraph2 inherits the direction of the top-level graph (LR)
outside ---> top2
```
```mermaid
---
config:
theme: default
look: classic
layout: dagre
---
flowchart LR
subgraph Client
UI[Web app]
Cache[(Local cache)]
end
subgraph Services
API[API gateway]
Auth[Auth service]
Orders[Order service]
end
subgraph Storage
DB[(Orders DB)]
end
UI --> API
UI --> Cache
API --> Auth
API --> Orders
Orders --> DB
Auth -. token .-> UI
```
## Gantt
```mermaid
gantt
title Git Issues - days since last update
dateFormat X
axisFormat %s
section Issue19062
71 : 0, 71
section Issue19401
36 : 0, 36
section Issue193
34 : 0, 34
section Issue7441
9 : 0, 9
section Issue1300
5 : 0, 5
```
```mermaid
gantt
title A Gantt Diagram
%% This is a comment
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1, 20d
section Another
Task in Another :2014-01-12, 12d
another task :24d
```
## Git graph
```mermaid
gitGraph
commit id: "ZERO"
branch develop
branch release
commit id:"A"
checkout main
commit id:"ONE"
checkout develop
commit id:"B"
checkout main
merge develop id:"MERGE"
commit id:"TWO"
checkout release
cherry-pick id:"MERGE" parent:"B"
commit id:"THREE"
checkout develop
commit id:"C"
```
```mermaid
---
config:
logLevel: 'debug'
theme: 'neutral'
---
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
```
## Info
```mermaid
info showInfo
```
```mermaid
info
```
## Ishikawa
```mermaid
ishikawa-beta
Blurry Photo
Process
Out of focus
Shutter speed too slow
Protective film not removed
Beautification filter applied
User
Shaky hands
Equipment
LENS
Inappropriate lens
Damaged lens
Dirty lens
SENSOR
Damaged sensor
Dirty sensor
Environment
Subject moved too quickly
Too dark
```
## Kanban
```mermaid
kanban
todo[Todo]
id3[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
```
```mermaid
---
config:
kanban:
ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
---
kanban
Todo
[Create Documentation]
docs[Create Blog about the new diagram]
[In progress]
id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
id9[Ready for deploy]
id8[Design grammar]@{ assigned: 'knsv' }
id10[Ready for test]
id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
id11[Done]
id5[define getData]
id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
id12[Can't reproduce]
id3[Weird flickering in Firefox]
```
## Mindmap
```mermaid
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness
and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
```
```mermaid
mindmap
id1["`**Root** with
a second line
Unicode works too: 🤓`"]
id2["`The dog in **the** hog... a *very long text* that wraps to a new line`"]
id3[Regular labels still works]
```
## Packet
```mermaid
---
title: "TCP Packet"
---
packet
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"
96-99: "Data Offset"
100-105: "Reserved"
106: "URG"
107: "ACK"
108: "PSH"
109: "RST"
110: "SYN"
111: "FIN"
112-127: "Window"
128-143: "Checksum"
144-159: "Urgent Pointer"
160-191: "(Options and Padding)"
192-255: "Data (variable length)"
```
```mermaid
---
config:
packet:
showBits: true
bitOrder: descending
bitsPerRow: 16
---
packet
0-7: "DATA"
8-11: "TYPE"
12: "EN"
13-15: "RESERVED"
```
## Pie
```mermaid
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
```
## Quadrant chart
```mermaid
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
```
## Radar
```mermaid
radar-beta
title Restaurant Comparison
axis food["Food Quality"], service["Service"], price["Price"]
axis ambiance["Ambiance"]
curve a["Restaurant A"]{4, 3, 2, 4}
curve b["Restaurant B"]{3, 4, 3, 3}
curve c["Restaurant C"]{2, 3, 4, 2}
curve d["Restaurant D"]{2, 2, 4, 3}
graticule polygon
max 5
```
```mermaid
---
title: "Grades"
---
radar-beta
axis m["Math"], s["Science"], e["English"]
axis h["History"], g["Geography"], a["Art"]
curve a["Alice"]{85, 90, 80, 70, 75, 90}
curve b["Bob"]{70, 75, 85, 80, 90, 85}
max 100
min 0
```
## Railroad
```mermaid
railroad-ebnf-beta
title "Arithmetic Expression Grammar"
expression = term ( ( "+" | "-" ) term )* ;
term = factor ( ( "*" | "/" ) factor )* ;
factor = number | "(" expression ")" ;
number = digit+ ;
digit = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" ;
```
```mermaid
railroad-beta
title Expression Grammar
expression = sequence(
nonterminal("term"),
zeroOrMore(sequence(
choice(terminal("+"), terminal("-")),
nonterminal("term")
))
) ;
term = sequence(
nonterminal("factor"),
zeroOrMore(sequence(
choice(terminal("*"), terminal("/")),
nonterminal("factor")
))
) ;
factor = choice(
nonterminal("number"),
sequence(terminal("("), nonterminal("expression"), terminal(")"))
) ;
number = oneOrMore(nonterminal("digit")) ;
digit = choice(terminal("0"), terminal("1"), terminal("2"), terminal("3"), terminal("4"), terminal("5"), terminal("6"), terminal("7"), terminal("8"), terminal("9")) ;
```
## Requirement
```mermaid
---
config:
theme: default
look: classic
layout: dagre
---
requirementDiagram
requirement checkout_req {
id: 1
text: Orders must be payable online.
risk: high
verifymethod: test
}
functionalRequirement payment_req {
id: 1.1
text: Card payments must be authorised.
risk: high
verifymethod: test
}
element checkout_service {
type: service
}
checkout_req - contains -> payment_req
checkout_service - satisfies -> payment_req
```
```mermaid
requirementDiagram
direction LR
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req
```
## Sankey
```mermaid
---
config:
sankey:
showValues: false
nodeWidth: 15
nodePadding: 20
---
sankey
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,Industry,342.165
Electricity grid,Losses,56.691
```
```mermaid
sankey
%% source,target,value
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14
```
## Sequence
```mermaid
---
config:
theme: default
look: classic
---
sequenceDiagram
autonumber
actor Customer
participant Web as Web app
participant API as API gateway
participant Bank
Customer->>Web: Place order
Web->>API: POST /orders
activate API
API->>Bank: Authorise payment
Bank-->>API: Approved
API-->>Web: 201 Created
deactivate API
Web-->>Customer: Order confirmed
Note over Customer,Bank: One order, one transaction
```
```mermaid
sequenceDiagram
participant Alice
participant John
link Alice: Dashboard @ https://dashboard.contoso.com/alice
link Alice: Wiki @ https://wiki.contoso.com/alice
link John: Dashboard @ https://dashboard.contoso.com/john
link John: Wiki @ https://wiki.contoso.com/john
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!
```
## State
```mermaid
---
config:
theme: default
look: classic
layout: dagre
---
stateDiagram-v2
[*] --> Draft
Draft --> Submitted : submit
state Review {
[*] --> Screening
Screening --> Decision
}
Submitted --> Review
Review --> Published : approved
Review --> Draft : rejected
Published --> [*]
```
```mermaid
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
```
## Swimlane
```mermaid
swimlane-beta LR
subgraph Customer
request[Request service]
receive[Receive update]
end
subgraph Support
triage[Triage request]
answer[Send answer]
end
subgraph Engineering
investigate[Investigate issue]
fix[Prepare fix]
end
request --> triage
triage -->|Known issue| answer
triage -->|Needs code change| investigate
investigate --> fix --> answer
answer --> receive
```
```mermaid
swimlane-beta LR
subgraph Applicant
apply[Submit application]
sign[Sign agreement]
end
subgraph Reviewer
screen[Screen application]
decide{Approved?}
end
subgraph System
create[Create account]
notify[Send welcome email]
end
apply -->|Application received| screen
screen --> decide
decide -->|Approved| create --> notify --> sign
decide -->|Needs changes| apply
```
## Timeline
```mermaid
timeline
title Timeline of Industrial Revolution
section 17th-20th century
Industry 1.0 : Machinery, Water power, Steam
power
Industry 2.0 : Electricity, Internal combustion engine, Mass production
Industry 3.0 : Electronics, Computers, Automation
section 21st century
Industry 4.0 : Internet, Robotics, Internet of Things
Industry 5.0 : Artificial intelligence, Big data, 3D printing
```
```mermaid
timeline
title England's History Timeline
section Stone Age
7600 BC : Britain's oldest known house was built in Orkney, Scotland
6000 BC : Sea levels rise and Britain becomes an island.
The people who live here are hunter-gatherers.
section Bronze Age
2300 BC : People arrive from Europe and settle in Britain.
They bring farming and metalworking.
: New styles of pottery and ways of burying the dead appear.
2200 BC : The last major building works are completed at Stonehenge.
People now bury their dead in stone circles.
: The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
```
## Tree view
```mermaid
---
config:
treeView:
showIcons: true
defaultIconPack: material-icon-theme
filenameIcons:
Dockerfile: docker
extensionIcons:
.ts: typescript
.tsx: react-ts
.txt: none
---
treeView-beta
src/
App.tsx
utils.ts
Dockerfile
notes.txt
README.md
```
```mermaid
treeView-beta
my-project/
src/
App.tsx :::highlight icon(logos:react) ## main component
index.js ## entry point
.env ## environment variables
Dockerfile
package.json
```
## Treemap
```mermaid
---
config:
treemap:
valueFormat: '$0,0'
---
treemap-beta
"Budget"
"Operations"
"Salaries": 700000
"Equipment": 200000
"Supplies": 100000
"Marketing"
"Advertising": 400000
"Events": 100000
```
```mermaid
treemap-beta
"Products"
"Electronics"
"Phones": 50
"Computers": 30
"Accessories": 20
"Clothing"
"Men's": 40
"Women's": 40
```
## Use case
```mermaid
---
config:
usecase:
actorFontSize: 16
actorFontFamily: Arial
actorFontWeight: bold
usecaseFontSize: 14
usecaseFontFamily: Georgia
usecaseFontWeight: normal
nodeSpacing: 60
rankSpacing: 70
diagramPadding: 24
colorScheme: role
useMaxWidth: false
---
usecase-beta
direction LR
actor Customer
Browse("Browse catalog")
Customer --> Browse
```
```mermaid
---
config:
theme: default
look: classic
layout: dagre
---
usecase-beta
direction LR
actor Customer
actor Support
systemBoundary Storefront
Browse("Browse catalogue")
Checkout("Checkout")
end
systemBoundary Fulfilment
Track("Track delivery")
end
Customer --> Browse
Customer --> Checkout
Customer --> Track
Support --> Track
Checkout ..> : include Browse
```
## User journey
```mermaid
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
## Venn
```mermaid
---
config:
theme: default
look: classic
---
venn-beta
title What makes a good feature
set Desirable
set Feasible
set Viable
union Desirable,Feasible["Buildable"]
union Feasible,Viable["Sustainable"]
union Desirable,Viable["Marketable"]
union Desirable,Feasible,Viable["Ship it"]
```
```mermaid
venn-beta
set A["Frontend"]
text A1["React"]
text A2["Design Systems"]
set B["Backend"]
text B1["API"]
union A,B["Shared"]
text AB1["OpenAPI"]
```
## Wardley map
```mermaid
wardley-beta
title Tea Shop Value Chain
anchor Business [0.95, 0.63]
component Cup of Tea [0.79, 0.61]
component Tea [0.63, 0.81]
component Hot Water [0.52, 0.80]
component Kettle [0.43, 0.35]
component Power [0.10, 0.70]
Business -> Cup of Tea
Cup of Tea -> Tea
Cup of Tea -> Hot Water
Hot Water -> Kettle
Kettle -> Power
evolve Kettle 0.62
evolve Power 0.89
note "Standardising power allows Kettles to evolve faster" [0.30, 0.49]
```
```mermaid
wardley-beta
title Sourcing Strategy
anchor Customer [0.80, 0.95]
component Custom App [0.45, 0.85] (build)
component Off-the-shelf Tool [0.85, 0.65] (buy)
component Managed Service [0.60, 0.40] (outsource)
component Cloud Platform [0.95, 0.25] (market)
Customer -> Custom App
Custom App -> Off-the-shelf Tool
Custom App -> Managed Service
Off-the-shelf Tool -> Cloud Platform
```
## XY chart
```mermaid
xychart
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```
```mermaid
---
config:
xyChart:
showDataLabel: true
showDataLabelOutsideBar: true
---
xychart
title "Genres in top 100 book survey of 2025"
x-axis [comedy, romance, mystery, crime, "non fiction", other]
y-axis "Number of Books" 0 --> 30
bar [12,2,20,25,17,24]
```