Pele
Playground
Settings
Open file…
Open sample
flowchart
1. subgraph Client
2. subgraph Client
3. subgraph subgraph1
4. subgraph "One"
5. A-->B
6. A-->B
block
1. columns 1
2. blockArrowId<["Label"]>(right)
3. columns 1
4. id1 space id2
5. columns 3
6. columns 3
c4
1. title System Context diagram for Internet Banki…
2. title System Context diagram for Internet Banki…
3. title Container diagram for Internet Banking Sy…
4. title Component diagram for Internet Banking Sy…
5. title Dynamic diagram for Internet Banking Syst…
6. title Deployment Diagram for Internet Banking S…
class
1. namespace Earth.Volcano.Summit {
2. Reef animal example
3. Animal example
4. class Customer {
5. namespace Platform {
6. namespace Company.Engineering.Backend {
er
1. CUSTOMER ||--o{ ORDER : places
2. CAR ||--o{ NAMED-DRIVER : allows
3. direction TB
4. direction LR
5. subgraph title1
6. CAR {
eventmodeling
1. timeframe 01 ui CartUI
2. tf 01 ui CartUI
3. timeframe 01 ui CartUI
4. tf 01 ui CartUI
5. timeframe 01 ui CartUI
6. rf 02 evt CartCreated
gantt
1. title A Gantt Diagram
2. dateFormat YYYY-MM-DD
3. title A Gantt Diagram
4. title A Gantt Diagram
5. title Git Issues - days since last update
6. title Timeline - Gantt Sampler
git
1. commit
2. commit
3. commit
4. commit
5. commit type:HIGHLIGHT
6. commit
info
1. info
2. info showInfo
journey
1. title My working day
kanban
1. column1[Column Title]
2. todo[Todo]
3. Todo
mindmap
1. root((Hawaiʻi))
2. id1["`**Pele** is the
3. root((mindmap))
4. Root
5. Root
6. id1["`**Root** with
packet
1. TCP Packet
2. title UDP Packet
3. 0-7: "DATA"
4. 0-15: "Source Port"
pie
1. "ʻAhi" : 386
2. "Dogs" : 386
3. title Key elements in Product X
quadrant
1. title Reach and engagement of campaigns
2. x-axis Urgent --> Not Urgent
3. title Reach and engagement of campaigns
requirement
1. requirement checkout_req {
2. requirement checkout_req {
3. requirement test_req {
4. requirement test_req {
5. requirement test_req {
6. requirement test_req:::important {
sankey
1. Agricultural 'waste',Bio-conversion,124.729
2. Electricity grid,Over generation / exports,104.…
3. Pumped heat,"Heating and cooling, ""homes""",19…
4. Electricity grid,Heating and cooling - homes,11…
5. Electricity grid,Heating and cooling - homes,11…
6. Electricity grid,Heating and cooling - homes,11…
sequence
1. autonumber
2. autonumber
3. participant API@{ "type": "boundary", "alias": …
4. participant Alice
5. participant Alice
6. participant Alice
state
1. [*] --> Draft
2. [*] --> First
3. [*] --> Active
4. direction TB
5. direction TB
6. classDef yourState font-style:italic,font-weigh…
timeline
1. title Timeline of the Hawaiian Islands
2. title Hawaiʻi's History Timeline
3. title Timeline of Industrial Revolution
4. title England's History Timeline
5. title MermaidChart 2023 Timeline
6. title History of Social Media Platform
xychart
1. title "Ocean Temperature"
2. title "Animals seen in reef survey of 2025"
3. title "Sales Revenue"
4. title "Different Colors in xyChart"
5. title "Genres in top 100 book survey of 2025"
6. title "Sales Revenue"
agentflow
1. brief["Release brief"]@{ shape: input }
2. brief["Release brief"]@{ shape: input }
3. brief["Brief"]@{ shape: input }
4. global
5. flow intake["Intake"]
6. connector llm["LLM API"]
architecture
1. group api(cloud)[API]
2. group api(cloud)[API]
3. service src1(server)[Source 1]
4. group sources(cloud)[Sources]
5. service left_disk(disk)[Disk]
6. group api(logos:aws-lambda)[API]
cynefin
1. title Incident Response
2. title Strategy Categorization
3. title Cynefin Framework
ishikawa
1. Blurry Photo
radar
1. Grades
2. title Restaurant Comparison
3. axis A, B, C, D, E
railroad
1. title "Arithmetic Expression Grammar"
2. title "JSON Grammar"
3. title "Email Address"
4. title "Calculator Grammar"
5. title "Identifiers (keywords excluded)"
6. title Expression Grammar
swimlane
1. subgraph Customer
2. subgraph Customer
3. accTitle: Support escalation
4. subgraph Customer
5. subgraph Applicant
6. subgraph Intake
treemap
1. "Products"
2. "Section 1"
3. "Main"
4. "Category A"
5. "Budget"
6. "Market Share"
treeview
1. ├── src/
2. ├── packages/
3. src/
4. my-project/
5. 🚀 rocket-app/
6. "packages"
usecase
1. direction LR
2. actor Normal("Normal actor")
3. Inspect("Inspect payload")
4. actor Customer:::external
5. direction LR
6. direction LR
venn
1. title What makes a good feature
2. title What makes a good feature
3. title "Team overlap"
4. set Desirable
5. set A["Frontend"]
6. set A["Alpha"]:20
wardley
1. title Tea Shop Value Chain
2. title Coordinate Examples
3. title Sourcing Strategy
4. title Dual Label Stages
5. title Annotations
6. title Software Platform Strategy
Copy share link
Reset
Clear
Line wrap
Search
⌘K
Playground
Introduction
Examples
API
Theming
Compatibility
Security
Source
Output
Source
Mermaid
flowchart TD A([Mermaid text]) --> B{Supported?} B -- Yes --> C[Parse] B -- No --> H[Fall back] subgraph Pele C --> D[Layout] D --> E[Render] end E --> F[(SVG)] F -.-> G[Theme with CSS]
Output
Pele
Mermaid
SVG
Compare
Pele
Mermaid
Enable JavaScript to render diagrams in the playground.