Browse examples of Pele's 33 built-in diagram families, including its version display, and 48 flowchart shapes. Every example uses Shoalrun's Diagram component with Mermaid syntax. These illustrate notation; they do not describe live services or measured product results.
Open Source beneath a diagram to copy its syntax. See Pele's examples for more variations and compatibility notes for differences from Mermaid.
Flows and behavior
Flowchart
Follow decisions and retry paths.
Source: Flowchart
flowchart TD
Draft[Draft page] --> Check{Checks pass?}
Check -->|Yes| Publish[Publish]
Check -->|No| Revise[Revise page]
Revise --> Draft
Sequence
Trace messages between an agent and documentation tools.
Source: Sequence
sequenceDiagram
participant Agent
participant Docs
Agent->>Docs: search_docs
Docs-->>Agent: Page IDs
Agent->>Docs: get_page
Docs-->>Agent: Markdown and citation
State
Explain a document lifecycle.
Source: State
stateDiagram-v2
[*] --> Draft
Draft --> Review
Review --> Draft : revise
Review --> Published : approve
Published --> [*]
Agentflow
Show agent tasks and decisions.
Source: Agentflow
agentflow-beta TB
draft["Draft guide"]@{ shape: task }
check["Checks pass?"]@{ shape: decision }
publish["Publish guide"]@{ shape: action }
draft --> check
check -- yes --> publish
check -- no --> draft
Swimlane
Separate work by team.
Source: Swimlane
swimlane-beta LR
subgraph Authors
draft[Draft guide]
end
subgraph Reviewers
review[Review guide]
end
draft --> review
User journey
Show the stages and participants in a reader journey.
Source: User journey
journey
title Find an answer
section Discover
Search docs: 4: Reader
Open guide: 5: Reader
section Apply
Try example: 4: Reader
Check result: 5: Reader
Event modeling
Trace interface actions and resulting events.
Source: Event modeling
eventmodeling
tf 01 ui Editor
tf 02 cmd PublishPage
tf 03 evt PagePublished
Use case
Connect an actor to a supported action.
Source: Use case
usecase-beta
actor Reader
Browse[Browse documentation]
Search[Search documentation]
Reader --> Browse
Reader --> Search
Systems and structures
Class
Describe types, fields, and relationships.
Source: Class
classDiagram
class Page {
+String title
+String slug
+render()
}
class Section {
+String heading
}
Page "1" *-- "many" Section
Entity relationship
Show entities and relationship cardinality.
Source: Entity relationship
erDiagram
PROJECT ||--o{ PAGE : contains
PAGE ||--o{ SECTION : contains
PAGE {
string id PK
string title
}
SECTION {
string heading
}
Architecture
Connect services using built-in symbols.
Source: Architecture
architecture-beta
group docs(cloud)[Documentation]
service app(server)[Site] in docs
service store(database)[Content] in docs
app:R -- L:store
C4
Describe a system and its users at a high level.
Source: C4
C4Context
title Documentation context
Person(reader, "Reader", "Finds instructions")
System(docs, "Documentation", "Published guides")
Rel(reader, docs, "Reads")
Block
Arrange connected blocks in explicit columns.
Source: Block
block-beta
columns 3
a["Author"] b["Build"] c["Publish"]
a --> b
b --> c
Mindmap
Organize related documentation topics.
Source: Mindmap
mindmap
root((Documentation))
Authoring
Pages
Components
Publishing
Builds
Hosting
Tree view
Display a directory hierarchy.
Source: Tree view
treeView-beta
"docs"
"content"
"start.mdx"
"configuration.mdx"
"docs.config.yaml"
Requirement
Connect an implementation element to a requirement.
Source: Requirement
requirementDiagram
requirement readable {
id: 1
text: Preserve essential instructions
risk: low
verifymethod: test
}
element markdown {
type: renderer
}
markdown - satisfies -> readable
Charts and planning
Gantt
Schedule work against explicit dates.
Source: Gantt
gantt
title Documentation release
dateFormat YYYY-MM-DD
section Preparation
Draft guides :a, 2026-10-01, 3d
Review guides :b, after a, 2d
section Release
Publish :after b, 1d
Git graph
Illustrate branches, commits, and merges.
Source: Git graph
gitGraph
commit id: "Start"
branch guide
checkout guide
commit id: "Draft"
checkout main
merge guide
commit id: "Publish"
Pie
Compare proportions with explicit values.
Source: Pie
pie title Example traffic channels
"Direct" : 45
"Search" : 35
"Referral" : 20
Kanban
Group tasks by workflow stage.
Source: Kanban
kanban
todo[To do]
setup[Configure project]
review[Review]
draft[Review guide]
done[Done]
install[Install tools]
Timeline
Place milestones in chronological order.
Source: Timeline
timeline
title Documentation rollout
Week 1 : Draft guides
Week 2 : Review examples : Test installation
Week 3 : Publish documentation
Quadrant chart
Compare work along two dimensions.
Source: Quadrant chart
quadrantChart
title Example priorities
x-axis Low effort --> High effort
y-axis Low impact --> High impact
quadrant-1 Plan
quadrant-2 Start
quadrant-3 Defer
quadrant-4 Reconsider
Navigation: [0.25, 0.8]
Rewrite: [0.8, 0.65]
Cleanup: [0.2, 0.2]
XY chart
Compare values on labeled axes.
Source: XY chart
xychart-beta
title "Example weekly builds"
x-axis [W1, W2, W3, W4]
y-axis "Builds" 0 --> 50
bar [12, 24, 32, 41]
line [10, 20, 28, 35]
Sankey
Show how quantities flow between groups.
Source: Sankey
sankey-beta
Sources,Guides,30
Sources,Reference,20
Guides,Readers,25
Guides,Agents,5
Reference,Readers,10
Reference,Agents,10
Radar
Compare several dimensions for two example approaches.
Source: Radar
radar-beta
title Example review scores
axis a["Clarity"], b["Coverage"], c["Speed"]
curve x["Approach A"]{4, 3, 5}
curve y["Approach B"]{3, 5, 3}
max 5
Treemap
Compare the size of nested categories.
Source: Treemap
treemap-beta
"Documentation"
"Guides": 30
"Reference": 45
"Tutorials": 25
Specialized diagrams
Cynefin
Group decisions by their operating context.
Source: Cynefin
cynefin-beta
title Documentation decisions
complex
"Test new navigation"
complicated
"Review API coverage"
clear
"Fix broken link"
chaotic
"Restore unavailable site"
Wardley map
Relate a reader need to supporting capabilities.
Source: Wardley map
wardley-beta
title Documentation capabilities
anchor Reader [0.95, 0.80]
component Guides [0.70, 0.55]
component Hosting [0.30, 0.90]
Reader -> Guides
Guides -> Hosting
Ishikawa
Organize possible causes of a problem.
Source: Ishikawa
ishikawa-beta
Slow documentation build
Content
Large diagrams
Duplicate inputs
Environment
Cold cache
Missing dependencies
Packet
Describe a small binary record layout.
Source: Packet
packet-beta
title Example record header
0-7: "Version"
8-15: "Flags"
16-31: "Length"
Railroad
Describe a small grammar using EBNF.
Source: Railroad
railroad-ebnf-beta
name = "guide" | "reference" ;
command = "read", name ;
Venn
Show overlapping sets of requirements.
Source: Venn
venn-beta
set A["Readable"]
set B["Searchable"]
union A,B["Useful docs"]
Renderer information
Display the renderer version as an informational diagram.
Source: Renderer information
info
Flowchart shapes
These sheets show the shape names accepted by Mermaid’s extended node syntax. Each sheet connects eight shapes in two columns.
Flowchart shapes 1
Compare rect, rounded, stadium, fr-rect, cyl, circle, dbl-circ, diam.
Source: Flowchart shapes 1
flowchart TB
n0@{ shape: rect, label: "rect" }
n1@{ shape: rounded, label: "rounded" }
n2@{ shape: stadium, label: "stadium" }
n3@{ shape: fr-rect, label: "fr-rect" }
n4@{ shape: cyl, label: "cyl" }
n5@{ shape: circle, label: "circle" }
n6@{ shape: dbl-circ, label: "dbl-circ" }
n7@{ shape: diam, label: "diam" }
n0 --> n1 --> n2 --> n3
n4 --> n5 --> n6 --> n7
Flowchart shapes 2
Compare hex, odd, lean-r, lean-l, trap-b, trap-t, text, bow-rect.
Source: Flowchart shapes 2
flowchart TB
n0@{ shape: hex, label: "hex" }
n1@{ shape: odd, label: "odd" }
n2@{ shape: lean-r, label: "lean-r" }
n3@{ shape: lean-l, label: "lean-l" }
n4@{ shape: trap-b, label: "trap-b" }
n5@{ shape: trap-t, label: "trap-t" }
n6@{ shape: text, label: "text" }
n7@{ shape: bow-rect, label: "bow-rect" }
n0 --> n1 --> n2 --> n3
n4 --> n5 --> n6 --> n7
Flowchart shapes 3
Compare sm-circ, f-circ, fr-circ, fork, notch-rect, lin-rect, div-rect, win-pane.
Source: Flowchart shapes 3
flowchart TB
n0@{ shape: sm-circ, label: "sm-circ" }
n1@{ shape: f-circ, label: "f-circ" }
n2@{ shape: fr-circ, label: "fr-circ" }
n3@{ shape: fork, label: "fork" }
n4@{ shape: notch-rect, label: "notch-rect" }
n5@{ shape: lin-rect, label: "lin-rect" }
n6@{ shape: div-rect, label: "div-rect" }
n7@{ shape: win-pane, label: "win-pane" }
n0 --> n1 --> n2 --> n3
n4 --> n5 --> n6 --> n7
Flowchart shapes 4
Compare notch-pent, cross-circ, st-rect, datastore, lin-cyl, tag-rect, doc, tri.
Source: Flowchart shapes 4
flowchart TB
n0@{ shape: notch-pent, label: "notch-pent" }
n1@{ shape: cross-circ, label: "cross-circ" }
n2@{ shape: st-rect, label: "st-rect" }
n3@{ shape: datastore, label: "datastore" }
n4@{ shape: lin-cyl, label: "lin-cyl" }
n5@{ shape: tag-rect, label: "tag-rect" }
n6@{ shape: doc, label: "doc" }
n7@{ shape: tri, label: "tri" }
n0 --> n1 --> n2 --> n3
n4 --> n5 --> n6 --> n7
Flowchart shapes 5
Compare flip-tri, sl-rect, hourglass, delay, h-cyl, curv-trap, docs, flag.
Source: Flowchart shapes 5
flowchart TB
n0@{ shape: flip-tri, label: "flip-tri" }
n1@{ shape: sl-rect, label: "sl-rect" }
n2@{ shape: hourglass, label: "hourglass" }
n3@{ shape: delay, label: "delay" }
n4@{ shape: h-cyl, label: "h-cyl" }
n5@{ shape: curv-trap, label: "curv-trap" }
n6@{ shape: docs, label: "docs" }
n7@{ shape: flag, label: "flag" }
n0 --> n1 --> n2 --> n3
n4 --> n5 --> n6 --> n7
Flowchart shapes 6
Compare bolt, bang, cloud, brace, brace-r, braces, tag-doc, lin-doc.
Source: Flowchart shapes 6
flowchart TB
n0@{ shape: bolt, label: "bolt" }
n1@{ shape: bang, label: "bang" }
n2@{ shape: cloud, label: "cloud" }
n3@{ shape: brace, label: "brace" }
n4@{ shape: brace-r, label: "brace-r" }
n5@{ shape: braces, label: "braces" }
n6@{ shape: tag-doc, label: "tag-doc" }
n7@{ shape: lin-doc, label: "lin-doc" }
n0 --> n1 --> n2 --> n3
n4 --> n5 --> n6 --> n7
HTML, Markdown, and agents
The diagrams are generated during the build and work without JavaScript. Theme changes update their CSS colors. Markdown retains every title, summary, SVG link, and original source, including examples inside closed disclosures.
This gallery checks one example per diagram family and the listed flowchart shapes. It does not establish support for every syntax variation or external Mermaid plugin. Shoalrun disables diagram links, external images, and JavaScript callbacks. See styling and compatibility before migrating existing diagrams.