# Diagrams (Mermaid)

Every diagram below is rendered by Mermaid inside the app. Nothing is uploaded
to a rendering service — the whole pipeline runs locally, which is why it works
with the network switched off.

## Flowchart

```mermaid
flowchart TD
    A[Open a document] --> B{Recognised type?}
    B -- Markdown --> C[Render preview]
    B -- Code --> D[Syntax highlight]
    B -- HTML or SVG --> E[Render as a page]
    B -- Image --> F[Show with fit and zoom]
    B -- No --> G[Offer it as plain text]
    C --> H[Export to PDF, Word, HTML or PNG]
    D --> H
    E --> H
    F --> H
```

## Sequence diagram

```mermaid
sequenceDiagram
    participant U as User
    participant A as MDSyntax
    participant D as Disk
    U->>A: Open report.md
    A->>D: Read the file
    D-->>A: Text
    A->>A: Parse and render
    A-->>U: Preview beside the source
    U->>A: Edit a heading
    A->>A: Hold the change in a draft
    A-->>U: Shade the edited lines
    U->>A: Press Command-S
    A->>D: Write the file
    D-->>A: Saved
    A-->>U: Clear the shading
```

## Gantt chart

```mermaid
gantt
    title Release schedule
    dateFormat YYYY-MM-DD
    axisFormat %b %d

    section Build
    Editor work           :done,    a1, 2026-06-01, 21d
    Export pipeline       :done,    a2, after a1, 14d

    section Ship
    Store packaging       :active,  b1, 2026-07-06, 10d
    Review and release    :         b2, after b1, 14d
```

## State diagram

```mermaid
stateDiagram-v2
    [*] --> Clean
    Clean --> Edited : type
    Edited --> Clean : save
    Edited --> Clean : revert
    Edited --> Recovered : app quits
    Recovered --> Edited : restore the draft
    Clean --> [*]
```

## Pie chart

```mermaid
pie title Files opened, by kind
    "Markdown" : 54
    "Code and config" : 27
    "HTML and SVG" : 11
    "Images" : 8
```