Onbench · Storytelling Library

Infographic & visual reference — what we can use

A branded, clickable reference of the open-source visual engines we can render into decks — all permissive-licensed, headless-rendered, themed to Onbench. Click any card for a large render + a briefing (what it is · best use · avoid when · customizable). Use ← / → to move between details. The mono label is the id to reference.

AntVEChartsMermaidrough.jsVega-LiteMotionIconsIllustrationimpress.js
63 visuals · 13 families · engines: AntV Infographic · Apache ECharts · Vega-Lite · Mermaid · rough.js · CSS/anime.js motion · Lucide icons

AntV · Sequence 17

3 styles
Discover90Frame the problemDesign70Shape the solutionBuild55Make it realLaunch40Ship and learn

Steps

3 styles · Sequence

sequence-steps-badge-cardSlides + HTML
⤢ details
5 styles
DiscoverFrame the problemDesignShape the solutionBuildMake it realLaunchShip and learn

Timeline

5 styles · Sequence

sequence-timeline-simpleSlides + HTML
⤢ details
3 styles
111222333444DiscoverFrame the problemDesignShape the solutionBuildMake it realLaunchShip and learn

Ascending

3 styles · Sequence

sequence-ascending-stairs-3d-simpleSlides + HTML
⤢ details
4LaunchShip and learn3BuildMake it real2DesignShape the solution1DiscoverFrame the problem

Cylinders

Sequence layout

sequence-cylinders-3d-simpleSlides + HTML
⤢ details
5 styles
Discover90Frame the problemDesign70Shape the solutionBuild55Make it realLaunch40Ship and learn

Snake

5 styles · Sequence

sequence-snake-steps-compact-cardSlides + HTML
⤢ details
2 styles
DiscoverFrame the problemDesignShape the solutionBuildMake it realLaunchShip and learn

Color

2 styles · Sequence

sequence-color-snake-steps-horizontal-icon-lineSlides + HTML
⤢ details
DiscoverFrame the problemDesignShape the solutionBuildMake it realLaunchShip and learn

Pyramid

Sequence layout

sequence-pyramid-simpleSlides + HTML
⤢ details
DiscoverFrame the problemDesignShape the solutionBuildMake it realLaunchShip and learn

Funnel

Sequence layout

sequence-funnel-simpleSlides + HTML
⤢ details
7 styles
01020304Discover90Frame the problemDesign70Shape the solutionBuild55Make it realLaunch40Ship and learn

Roadmap

7 styles · Sequence

sequence-roadmap-vertical-badge-cardSlides + HTML
⤢ details
6 styles
DiscoverFrame the problemDesignShape the solutionBuildMake it realLaunchShip and learn

Horizontal

6 styles · Sequence

sequence-horizontal-zigzag-simpleSlides + HTML
⤢ details
4 styles
1234DiscoverFrame the problemDesignShape the solutionBuildMake it realLaunchShip and learn

Zigzag

4 styles · Sequence

sequence-zigzag-pucks-3d-simpleSlides + HTML
⤢ details
01DiscoverFrame the problem02DesignShape the solution03BuildMake it real04LaunchShip and learn

Circle

Sequence layout

sequence-circle-arrows-indexed-cardSlides + HTML
⤢ details
2 styles
DiscoverFrame the problemDesignShape the solutionBuildMake it realLaunchShip and learn

Circular

2 styles · Sequence

sequence-circular-simpleSlides + HTML
⤢ details
2 styles
01020304DiscoverFrame the problemDesignShape the solutionBuildMake it realLaunchShip and learn

Filter

2 styles · Sequence

sequence-filter-mesh-simpleSlides + HTML
⤢ details
01020304DiscoverFrame the problemDesignShape the solutionBuildMake it realLaunchShip and learn

Mountain

Sequence layout

sequence-mountain-underline-textSlides + HTML
⤢ details
3 styles
01020304Discover90Frame the problemDesign70Shape the solutionBuild55Make it realLaunch40Ship and learn

Stairs

3 styles · Sequence

sequence-stairs-front-compact-cardSlides + HTML
⤢ details
36 styles
DiscoverFrame the problemDesignShape the solutionBuildMake it realLaunchShip and learn

Interaction

36 styles · Sequence

sequence-interaction-default-badge-cardSlides + HTML
⤢ details

AntV · List 7

3 styles
Discover90Frame the problemDesign70Shape the solutionBuild55Make it real

Pyramid

3 styles · List

list-pyramid-badge-cardSlides + HTML
⤢ details
3 styles
DiscoverDesignBuildLaunch

Column

3 styles · List

list-column-done-listSlides + HTML
⤢ details
9 styles
Discover90Frame the problemDesign70Shape the solutionBuild55Make it realLaunch40Ship and learn

Grid

9 styles · List

list-grid-badge-cardSlides + HTML
⤢ details
5 styles
90%Discover70%Design55%Build40%Launch

Row

5 styles · List

list-row-circular-progressSlides + HTML
⤢ details
3 styles
DiscoverFrame the problemDesignShape the solutionBuildMake it realLaunchShip and learn

Sector

3 styles · List

list-sector-simpleSlides + HTML
⤢ details
2 styles
Discover90Frame the problemDesign70Shape the solutionBuild55Make it realLaunch40Ship and learn

Waterfall

2 styles · List

list-waterfall-badge-cardSlides + HTML
⤢ details
4 styles
Discover90Frame the problemDesign70Shape the solutionBuild55Make it realLaunch40Ship and learn

Zigzag

4 styles · List

list-zigzag-up-compact-cardSlides + HTML
⤢ details

AntV · Compare 3

4 styles
DDISCOVERDDESIGNBBUILDLLAUNCH

Hierarchy

4 styles · Compare

compare-hierarchy-row-letter-card-compact-cardSlides + HTML
⤢ details
SSTRENGTHSWWEAKNESSESOOPPORTUNITIESTTHREATS

Swot

Compare layout

compare-swotSlides + HTML
⤢ details
12 styles
PROSCONS

Binary

12 styles · Compare

compare-binary-horizontal-simple-foldSlides + HTML
⤢ details

AntV · Quadrant 3

3 styles
DiscoverFrame the problemDesignShape the solutionBuildMake it realLaunchShip and learn

Quadrant

3 styles · Quadrant

compare-quadrant-quarter-simple-cardSlides + HTML
⤢ details
2 styles
DiscoverFrame the problemDesignShape the solutionBuildMake it realLaunchShip and learn

Quarter

2 styles · Quadrant

quadrant-quarter-simple-cardSlides + HTML
⤢ details
DiscoverFrame the problemDesignShape the solutionBuildMake it realLaunchShip and learn

Simple

Quadrant layout

quadrant-simple-illusSlides + HTML
⤢ details

AntV · Chart 5

90705540DiscoverFrame the problemDesignShape the solutionBuildMake it realLaunchShip and learn

Column

Chart layout

chart-column-simpleSlides + HTML
⤢ details
90705540020406080DiscoverDesignBuildLaunch

Bar

Chart layout

chart-bar-plain-textSlides + HTML
⤢ details
02040608010090705540DiscoverDesignBuildLaunch

Line

Chart layout

chart-line-plain-textSlides + HTML
⤢ details
6 styles
15.7%21.6%35.3%27.5%Launch40Ship and learnBuild55Make it realDiscover90Frame the problemDesign70Shape the solution

Pie

6 styles · Chart

chart-pie-compact-cardSlides + HTML
⤢ details
2 styles
DiscoverDesignBuildLaunch

Wordcloud

2 styles · Chart

chart-wordcloud-rotateSlides + HTML
⤢ details

AntV · Relation 3

2 styles
90%Discover70%Design55%Build40%Launch

Circle

2 styles · Relation

relation-circle-circular-progressSlides + HTML
⤢ details
2 styles
CoreTeam ATeam BPartner

Network

2 styles · Relation

relation-network-icon-badgeSlides + HTML
⤢ details
14 styles
CoreTeam ATeam BPartner

Dagre

14 styles · Relation

relation-dagre-flow-tb-badge-cardSlides + HTML
⤢ details

Data charts (ECharts) 8

Value 0 20 40 60 80 100 Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Window 54.17 90

Annotated trend — line with markPoint(max), markLine(avg), markArea(highlight)

Highlight peaks in a trend

echarts-line-annotatedSlides + HTML
⤢ details
Value 0 20 40 60 80 100 120 Q1 Q2 Q3 Q4 Category A Category B Category C

Stacked bar — categories with 2-3 stacked series

Compare part-to-whole across groups

echarts-bar-stackedSlides + HTML
⤢ details
Source A Source B Source C Stage 1 Stage 2 Outcome X Outcome Y

Sankey flow — Source → Stage → Outcome

Trace flow through stages

echarts-sankeySlides + HTML
⤢ details
Node 1 Node 2 Node 3 Item A Item B Item C Item D Item E Group A Group B

Force graph — small node-link network (nodes + links, layout:"force")

Show relationships in a network

echarts-graphSlides + HTML
⤢ details
Mar Apr May S M T W T F S

Calendar heatmap — daily activity over ~3 months

Spot daily activity patterns

echarts-heatmap-calendarSlides + HTML
⤢ details
Dimension 1 Dimension 2 Dimension 3 Dimension 4 Dimension 5 Series A Series B

Radar — 2 series across 5 axes

Compare profiles across traits

echarts-radarSlides + HTML
⤢ details
0 10 20 30 40 50 60 70 80 90 100 Progress 70%

Gauge / KPI — a single percentage gauge

Show a single KPI vs target

echarts-gaugeSlides + HTML
⤢ details
Category A A-1 A-2 A-3 Category B B-1 B-2 Category C C-1 C-2

Sunburst — 2-level hierarchy

Break a whole into nested parts

echarts-sunburstSlides + HTML
⤢ details

Statistical (Vega-Lite) 4

Group AGroup BGroup CGroup DGroup406080100120140160180200220240260280ValueValue distribution by group

Box plot — distribution across 3-4 groups

Compare value spread and outliers across several sample groups.

vega-boxplotSlides + HTML
⤢ details
P1P2P3P4P5P6P7P8Period020406080100120140160ValueTarget (100)Target (100)Target (100)Target (100)Target (100)Target (100)Target (100)Target (100)Value over time vs. target

Annotated line — line + threshold rule + text

Track a value over time against a target level with a callout.

vega-line-annotatedSlides + HTML
⤢ details
Category 1Category 2Category 3Category 4Category0102030405060708090ValueMean value by category (with 95% CI)

Bar + error bars — mean bars + errorbar

Show a mean measured value per category with confidence variability.

vega-bar-errorSlides + HTML
⤢ details
404550556065707580859095100Variable X303540455055606570758085Variable YVariable X vs. variable Y

Scatter + trend — points + regression line

Reveal how variable X correlates with variable Y.

vega-scatter-regressionSlides + HTML
⤢ details

Diagrams-as-code (Mermaid) 5

No

Yes

Start

Step A

Decision?

Adjust

Step B

End

Flowchart

Diagram

mermaid-flowchartSlides + HTML
⤢ details
DatabaseServiceSystemUserDatabaseServiceSystemUserSend request1Forward request2Query data3Return records4Processed result5Response6

Sequence diagram

Diagram

mermaid-sequenceSlides + HTML
⤢ details
Q1Phase 1KickoffQ2Phase 2BuildQ3Phase 3TestQ4Phase 4LaunchProject timeline

Timeline

Timeline

mermaid-timelineSlides + HTML
⤢ details

Root

Branch A

Item 1

Item 2

Branch B

Item 3

Item 4

Branch C

Item 5

Item 6

Mindmap

Mindmap

mermaid-mindmapSlides + HTML
⤢ details

submitted

accepted

changes requested

finalized

Draft

Review

Approved

Done

State diagram

Diagram

mermaid-stateSlides + HTML
⤢ details

Hand-drawn (rough.js) 3

ABCA simple flow

Hand-drawn diagram

Diagram

rough-diagramSlides + HTML
⤢ details
A key point worth notingHand-drawn emphasis, over clean type.

Sketchy annotation

Highlight

rough-annotationSlides + HTML
⤢ details
Item 160Item 2120Item 390Item 4170Hand-drawn bars

Hand-drawn bars

Chart

rough-barsSlides + HTML
⤢ details

Motion & narrative 2

Draw-on line

Reveal a path as it draws

motion-draw-onHTML only
⤢ details

Staggered reveal

Sequence items in on entry

motion-staggerHTML only
⤢ details

Icons & illustration 2

Inline stroke icons

Label & annotate visuals

icons-lucideSlides + HTML
⤢ details

Open illustration sets

Human, on-brand hero art

illustration-openSlides + HTML
⤢ details

Zooming presentation (ZUI) 1

ZOOM

Prezi-style zooming deck

Big-picture → zoom to detail

zui-playbookHTML only
⤢ details