# Diagrams

> For the complete documentation index, see [llms.txt](https://preview.writedocs.io/llms.txt).

Draw flowcharts, sequence diagrams and more with a mermaid code block.

A ```` ```mermaid ```` code block is drawn as a diagram, from a description in the [Mermaid](https://mermaid.js.org/intro/syntax-reference.html) syntax:

````mdx
```mermaid
graph TD
  A[Write a page] --> B{Ready?}
  B -- Yes --> C[Push]
  B -- No --> A
  C --> D[Published]
```
````

```mermaid
graph TD
  A[Write a page] --> B{Ready?}
  B -- Yes --> C[Push]
  B -- No --> A
  C --> D[Published]
```

Flowcharts, sequence diagrams, class and state diagrams, entity-relationship diagrams, Gantt charts, pie charts, timelines and the rest of the Mermaid syntax all work the same way. A sequence diagram:

````mdx
```mermaid
sequenceDiagram
  participant App
  participant API
  App->>API: POST /payments
  API-->>App: 201 Created
  API->>App: webhook payment.succeeded
```
````

```mermaid
sequenceDiagram
  participant App
  participant API
  App->>API: POST /payments
  API-->>App: 201 Created
  API->>App: webhook payment.succeeded
```

## Light and dark

Diagrams follow the site's theme, and are redrawn when the reader switches it.

Diagrams are drawn in the reader's browser. With JavaScript turned off, the reader sees the diagram's text instead.