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
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]
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. Animal example
2. class Customer {
3. class Customer {
4. namespace Company.Engineering.Backend {
5. namespace Platform {
6. namespace Company.Engineering.Backend {
cynefin
1. title Incident Response
2. title Strategy Categorization
3. title Cynefin Framework
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
ishikawa
1. Blurry Photo
journey
1. title My working day
kanban
1. column1[Column Title]
2. todo[Todo]
3. Todo
mindmap
1. root((mindmap))
2. id(I am a rounded square)
3. Root
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. "Dogs" : 386
2. 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
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
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…
swimlane
1. subgraph Customer
2. subgraph Customer
3. accTitle: Support escalation
4. subgraph Customer
5. subgraph Applicant
6. subgraph Intake
timeline
1. title Timeline of Industrial Revolution
2. title England's History Timeline
3. title MermaidChart 2023 Timeline
4. title MermaidChart 2023 Timeline
5. title History of Social Media Platform
6. title History of Social Media Platform
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
xychart
1. title "Sales Revenue"
2. title "An Example Chart"
3. title "Different Colors in xyChart"
4. title "Genres in top 100 book survey of 2025"
5. title "Smallest AI models scoring above 60% on …
6. title "Sales Revenue"
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.