Every diagram type Pele renders, from flowcharts to Wardley maps.
Every diagram below is written as a plain fenced code block in this MDX file. A
Sätteri plugin turns the fence into a component, Pele renders it to SVG during
astro build, and the result is inlined into the HTML. There is no client-side
JavaScript, and the colors come from the same CSS variables that flip when you
switch to dark mode.
A request for one diagram, from editor to browser.
Class
The two pieces of the component boundary.
State
The lifecycle of a post.
Entity relationship (ER)
The content collection, reduced to two tables.
Use case
What a writer and a reader can do.
Gantt
A plausible two-week schedule for one post.
Timeline
How the rendering approach changed.
User journey
The experience of adding one diagram.
Kanban
A small editorial board.
Quadrant chart
Where the heavier diagram types sit.
Pie chart
A rough split of the gallery itself.
XY chart
Invented line counts, for the shape of the chart.
Radar
Pele against the reference implementation, on axes that matter here.
Treemap
Where a build’s time goes, roughly.
Sankey
Content flowing into output formats.
Packet
Not network traffic, but the same idea: fixed-width fields.
Mindmap
The stack, from content to presentation.
Tree view
The files involved in this feature.
Block
The pipeline again, as blocks rather than a graph.
Architecture
The build groups and the two services inside them.
C4
The same system at the context level.
Requirement
One non-functional requirement, satisfied by the renderer.
Venn
Three properties this approach shares.
Git graph
A short feature branch, as one does.
Event modeling
The same build as events rather than calls.
Cynefin
A deliberately loose classification of diagram choices.
Wardley map
The pieces of this site, positioned by visibility and maturity.
Ishikawa
Causes of a slow build, grouped the usual way.
Railroad
The tiniest grammar for a diagram fence.
Agentflow
A beta flow syntax for agent-style pipelines.
Info
The smallest supported diagram: renderer information.
External Mermaid plugins such as ZenUML are not supported by Pele. See its
compatibility notes for the full list and the
differences from the reference implementation.