PPTX.gallery

Diagrams

Write the Diagram, Let the Deck Style It

A diagram is an OPF content kind written as text: Mermaid source in a slide's diagram field. The engines draw it in the deck's own fonts and colors, so a flowchart or a mind map looks like the rest of the slide, not like a pasted screenshot.

Diagram families

A new lead is qualified. Qualified leads get a discovery call, a proposal and close as won; the rest are nurtured and return as leads.

Flowchart

Use a flowchart to show the steps and decisions of a process, such as how a lead moves through a sales pipeline.

flowchart
EditorInspector
The customer places an order with the store, the store asks payments to authorize the card, payments approves and the store confirms the order.

Sequence

Use a sequence diagram to show the messages that pass between people or systems over time, such as the steps of a checkout.

sequenceDiagram
EditorInspector
A draft is submitted for review, returns to draft for changes or is accepted, and approved work is published.

State

Use a state diagram to show the states something passes through and what moves it between them, such as a document's approval lifecycle.

stateDiagram-v2
EditorInspector
A customer places orders, an order contains line items, and each line item refers to a product.

Entity Relationship

Use an entity relationship diagram to show the records a business keeps and how they relate, such as customers, orders and products.

erDiagram
EditorInspector
The 2027 strategy has three themes: growth through new regions and partners, efficiency through automation and shared services, and people through hiring and training.

Mind Map

Use a mind map to break one idea into themes and sub-points, such as the pillars of a strategy.

mindmap
EditorInspector
The product launch plans research and pricing in Q1, runs a beta in Q2, reaches general availability in Q3 and expands in Q4.

Timeline

Use a timeline diagram to show periods and the events in each, grouped into phases, such as the quarters of a product launch.

timeline
EditorInspector
Customer onboarding: creating an account scores 5, verifying the email 3, importing data with support 2, and building a first report 4.

User Journey

Use a user journey to show the tasks a person goes through and how satisfied they are at each one, such as customer onboarding.

journey
EditorInspector
Discovery runs interviews and synthesis in January; delivery runs design and build from late January to early March, ending with the launch milestone.

Gantt

Use a Gantt diagram to show tasks on a calendar with their order and duration, such as the phases of a project plan.

gantt
EditorInspector
Revenue by region: North America 46%, Europe 31%, Asia Pacific 17% and other regions 6%.

Pie

Use a pie diagram for a quick picture of shares of a whole; use a chart instead when the values should stay editable data.

pie
EditorInspector
Features by effort and impact: SSO is a quick win, data export needs careful planning, dark mode is a fill-in and custom themes are best avoided.

Quadrant

Use a quadrant chart to place items on two axes and name the four regions they fall into, such as features by effort and impact.

quadrantChart
EditorInspector
Of 1,000 visitors, 600 bounce and 400 start a trial; of the trials, 120 become paid and 280 churn.

Sankey

Use a Sankey diagram to show how a quantity flows and splits between stages, such as visitors becoming trials and paying customers.

sankey
EditorInspector
Backlog holds the pricing page and usage alerts, SSO login is in progress, billing export is in review and onboarding emails are done.

Kanban

Use a kanban diagram to show work items in the columns of a workflow, such as the status of a team's current projects.

kanban
EditorInspector
Causes of late deliveries: understaffed shifts (people), manual routing (process), outdated tracking (tools) and missed pickups (suppliers).

Ishikawa (Fishbone)

Use an Ishikawa (fishbone) diagram to group the possible causes of one problem, such as a root-cause review of late deliveries.

ishikawa-beta
EditorInspector
In the cloud, the web app calls the API and the API reads and writes the database.

Architecture

Use an architecture diagram to show services, how they connect and where they run, such as the parts of a web application.

architecture-beta
EditorInspector

How the Deck Styles a Diagram

Node fills

Tints of the first accent of the slide's color scheme, in the slide variant's order, mixed over the surface the diagram sits on: its card, else the slide background.

Data series

Pie slices, sections, branches and series take the chart series palette: the color scheme's accents in the variant's order, as the slide's charts do.

Text

Labels use the font scheme's body font, code-like labels its code font, and keep 4.5:1 contrast against their fill.

Dark slides

A dark background, a dark variant or a color map redraws the same source from the dark surface, with no change to the diagram.

Mermaid's own theming is ignored. Authored style and classDef colors are kept, but a shape with an authored color no longer follows the deck: leave them out and let the color scheme decide.

Layouts That Take a Diagram

A layout region lists the content kinds it accepts. In the default catalog these regions accept diagram; a slide with no layout composes a diagram automatically.

Best Practices

Say what it shows in alt

Give every diagram an alt that states what it shows, not that it is a diagram. Without one, engines derive a text alternative from the diagram type and its labels.

Let the deck choose colors

Leave out Mermaid style, classDef and init theming: OPF draws the diagram from the slide's color scheme, font scheme and variant. An authored color no longer follows the deck.

Prefer a payload when it fits

A chart or timeline payload keeps the data editable and gets the chart and timeline design. Use a diagram when only a diagram can show the structure.

Keep it readable

Short labels and one idea per diagram. When a diagram does not fit, give it its own slide or region, turn its direction (LR to TB) or split it in two.