Diagrams
Mermaid diagrams in the colours of the deck, in a column, and on a slide with its own colours.
Each mermaid code block shows as a diagram. The diagram uses the colours
and the font of its slide.
Diagrams
Mermaid diagrams, written in the deck
1 / 5
Slide 1 of 5: Diagrams
The project of this deck has the mermaid package. Without it, a mermaid
code block shows as code.
- Diagrams in the deck syntax tells how to write a diagram.
- Diagrams in the Vite plugin reference tells how to add Mermaid to a project of the CLI.
- Diagrams in the React reference tells how to add Mermaid to a React app, and how to set the size of a diagram.
Source
---
title: Diagrams
layout: cover
---
# Diagrams
Mermaid diagrams, written in the deck
---
# A flowchart
A `mermaid` code block is drawn as a diagram, in the deck's colours and font:
```mermaid
flowchart LR
deck[slides.md] --> parse(Parse) --> compile(Compile)
compile --> page{{Page}}
compile --> pdf{{PDF}}
```
<!-- notes
The source of this diagram is five lines in slides.md. The project has
`mermaid` installed: without it, the block shows as code.
-->
---
# A sequence diagram
```mermaid
sequenceDiagram
participant Speaker
participant Deck
participant Presenter as Presenter window
Speaker->>Deck: Press P
Deck->>Presenter: Open
Speaker->>Presenter: Next slide
Presenter-->>Deck: Same slide and step
Note over Deck,Presenter: The two windows move together
```
---
layout: two-cols
---
# Next to text
:::left
A diagram goes where a code block can go: in a column, in a slot of a
layout, or in a step.
<!-- step -->
It gets smaller when the slide has no more room.
:::
:::right
```mermaid
stateDiagram-v2
[*] --> Draft
Draft --> Review: Open a pull request
Review --> Draft: Changes requested
Review --> Merged: Approved
Merged --> [*]
```
:::
---
class: night
---
# Its colours follow the slide
```mermaid
pie title Time on a talk
"Slides" : 45
"Rehearsal" : 35
"Demo" : 20
```
This slide sets other colours in `style.css`, and the diagram takes them.
The last slide has the class night. The stylesheet gives that slide its
own colours, and the diagram uses them:
/* A slide with `class: night` has its own colours. The diagram on it is
drawn in them. */
[data-slide].night {
--deck-bg: #10182b;
--deck-fg: #e6ebf5;
--deck-muted: #9aa7c0;
--deck-accent: #f2b45a;
--deck-border: #2a3654;
--deck-surface: #1a2440;
background: var(--deck-bg);
color: var(--deck-fg);
}
To present this deck from a clone of the repository, run this command in
the examples folder:
bun run dev diagrams