# Diagrams

Flowcharts and sequence diagrams drawn from a few lines of text.

A diagram block draws a picture from Mermaid, a short text format. Change a line and the picture follows, so diagrams stay as current as the text around them.

## A flowchart

How a page goes from draft to readers:

```mermaid
flowchart LR
    A[Write a draft] --> B{Ready?}
    B -- Not yet --> A
    B -- Yes --> C[Publish]
    C --> D[New release]
    D --> E[Readers see it]
```

## A sequence diagram

What happens when a reader asks Ask AI a question:

```mermaid
sequenceDiagram
    participant R as Reader
    participant D as Docs site
    participant AI as AI provider
    R->>D: Asks a question
    D->>D: Finds the matching pages
    D->>AI: Question and those pages
    AI-->>D: Answer
    D-->>R: Answer with links to its sources
```

<Note>
Diagrams load their drawing code only on pages that have one, so the rest of the site stays light.
</Note>