# FlowViz — full content reference

FlowViz (https://flowviz.app) is a free, local-first Mermaid diagram editor that runs in the browser.
Write Mermaid v11 syntax (21 diagram types), preview the diagram live, export SVG/PNG, and share
diagrams as links that carry the whole diagram in the URL fragment.
Flowcharts can also be edited on the canvas (two-way editing): the Mermaid source updates to match.
To give a user a link that opens a diagram, use https://flowviz.app/app#m=<percent-encoded Mermaid source>%0A;
the full recipe is the first section below (also at https://flowviz.app/docs/share-links.md).
No account or signup required; diagrams stay in the browser unless the user creates a short link.

## Diagram maker pages

- https://flowviz.app/flowchart — Free Mermaid Flowchart Editor — Click a Shape to Edit It: Write Mermaid flowchart syntax and watch it render live — or click any shape on the diagram and the code rewrites itself. Free, no signup, exports SVG and PNG.
- https://flowviz.app/sequence-diagram — Sequence Diagram Maker Online — Free UML Sequence Diagram: Create UML sequence diagrams online with Mermaid syntax. Free sequence diagram maker with real-time preview. Perfect for API flows and system interactions.
- https://flowviz.app/gantt — Gantt Chart Maker Free Online — Project Timeline Creator: Create Gantt charts online with Mermaid syntax. Free project timeline maker with real-time preview. Plan sprints, roadmaps, and project schedules.
- https://flowviz.app/er-diagram — ER Diagram Tool Online — Entity Relationship Diagram Maker: Create entity relationship diagrams online with Mermaid. Free ER diagram tool for database schema design. Real-time preview, no signup required.
- https://flowviz.app/class-diagram — Class Diagram Maker Online — Free UML Class Diagram Tool: Create UML class diagrams online with Mermaid syntax. Free class diagram maker for object-oriented design. Real-time preview, no signup.
- https://flowviz.app/state-diagram — State Diagram Maker Online — Free State Machine Diagram Tool: Create state diagrams and finite state machines online with Mermaid. Free state diagram tool with real-time preview. No signup required.
- https://flowviz.app/pie-chart — Mermaid Pie Chart Syntax — Turn Labels and Numbers into a Chart: Mermaid pie chart syntax explained, with a live editor. Write a label and a number per line and render a pie chart instantly. Free, no spreadsheet, no signup.
- https://flowviz.app/git-graph — Git Graph Diagram Maker Online — Visualize Git Branches: Create git branch diagrams online with Mermaid syntax. Free git graph visualization tool. Show commits, branches, and merges visually.
- https://flowviz.app/mindmap — Mermaid Mindmap Syntax — Turn an Indented Outline into a Mind Map: Mermaid mindmap syntax explained, with a live editor. Indentation sets the hierarchy, so a markdown outline becomes a mind map almost as-is. Free, no signup.
- https://flowviz.app/timeline — Mermaid Timeline Syntax — Write a Timeline as Plain Text: Mermaid timeline syntax explained, with a live editor. Write periods and events as indented text and render a timeline instantly. Free, no signup, exports SVG and PNG.
- https://flowviz.app/quadrant-chart — Quadrant Chart Maker Online — Free Mermaid 2x2 Matrix: Make a quadrant chart online, free. Write the axes, quadrant names and points as Mermaid text and see the 2x2 matrix render live. No signup, exports SVG and PNG.
- https://flowviz.app/sankey-diagram — Sankey Diagram Maker Online — Free, From CSV Rows: Make a sankey diagram online, free. Write one source,target,value row per flow and Mermaid draws the bands to scale. Live preview, no signup, exports SVG and PNG.
- https://flowviz.app/xy-chart — Bar and Line Chart Maker Online — Free Mermaid XY Chart: Make bar and line charts online, free, with Mermaid XY chart syntax. Write the categories and values as text and see the chart render live. No signup, exports SVG and PNG.
- https://flowviz.app/block-diagram — Block Diagram Maker Online — Free Mermaid Block Diagrams: Make a block diagram online, free. Place blocks on a grid with Mermaid block syntax, connect them with arrows, and see it render live. No signup, exports SVG and PNG.
- https://flowviz.app/architecture-diagram — Architecture Diagram Maker Online — Free Cloud Diagrams: Make cloud and service architecture diagrams online, free, with Mermaid. Groups, services, icons and connections as text, with a live preview. No signup, exports SVG and PNG.
- https://flowviz.app/user-journey — User Journey Map Maker Online — Free Mermaid Journeys: Make a user journey map online, free. Write sections, steps, scores and actors as Mermaid text and see the journey render live. No signup, exports SVG and PNG.
- https://flowviz.app/requirement-diagram — Requirement Diagram Maker Online — Free SysML-Style Diagrams: Make a requirement diagram online, free. Write requirements, elements and satisfies/verifies links as Mermaid text and see them render live. No signup, exports SVG and PNG.
- https://flowviz.app/c4-diagram — C4 Diagram Maker Online — Free C4 Model Diagrams: Make C4 model diagrams online, free: system context, container and component views as Mermaid text, with a live preview. No signup, exports SVG and PNG.
- https://flowviz.app/kanban — Kanban Board Maker Online — Free Text-Based Kanban: Make a kanban board online, free. Write columns and cards as indented Mermaid text, add assignees and priorities, and see the board render live. No signup, exports SVG and PNG.
- https://flowviz.app/radar-chart — Radar Chart Maker Online — Free Spider Chart Maker: Make a radar (spider) chart online, free. Write axes and curves as Mermaid text and compare options across several criteria. Live preview, no signup, exports SVG and PNG.
- https://flowviz.app/packet-diagram — Packet Diagram Maker Online — Free Protocol Header Diagrams: Make a packet diagram online, free. Write each header field as a bit range in Mermaid and get an RFC-style layout, live. No signup, exports SVG and PNG.

---
# How to write a FlowViz diagram link

FlowViz (https://flowviz.app) is a free browser-based Mermaid editor. You can give a user a link that opens the FlowViz editor with a diagram already loaded. The whole diagram lives in the link. Nothing is uploaded and no account is needed.

Source: https://flowviz.app/docs/share-links · Markdown: https://flowviz.app/docs/share-links.md · Last updated: 2026-09-24

For AI assistants: follow the Recipe, check the Mermaid rules, and copy the pattern of the Examples (flowchart, sequence and ER diagrams included). The Mermaid code must be URI-encoded.

For developers: "For developers" at the end covers both link formats, Mermaid Live import, the `?ref=` parameter and a JavaScript helper.

## Recipe

`URL = https://flowviz.app/app#m= + percent-encode(Mermaid source) + %0A`

1. Write the Mermaid source as plain text (first line is the diagram type, e.g. `flowchart TD`). In flowcharts, always put node labels in double quotes, `A["Start"] --> B{"Logged in?"}`, and write a `"` inside a label as `#quot;`. In sequence diagrams, keep every message on one line.
2. Percent-encode the source: every ASCII character except `A-Z a-z 0-9 - _ . ~` becomes `%XX`. A newline is `%0A`, a space is `%20`. Never use `+` for a space. Leave Chinese, Japanese, Korean, emoji and other non-ASCII characters exactly as they are: do not encode them.
3. Also encode `(` `)` `'` `*` `!` as `%28` `%29` `%27` `%2A` `%21`.
4. Link = `https://flowviz.app/app#m=` + the encoded source + `%0A` (end every link with `%0A`).
5. Chinese and other non-ASCII text appears in the link as the characters themselves, never as `%E…` escapes: `mindmap%0A%20%20产品计划%0A%20%20%20%20设计%0A`.
6. Give it to the user as a markdown link: `[Open in FlowViz](https://flowviz.app/app#m=...)`. No spaces or line breaks inside the URL.

- Percent-encode means JavaScript `encodeURIComponent(src)` or Python `urllib.parse.quote(src, safe='')`, plus step 3.
- The trailing `%0A` protects the diagram's last character from chat apps that glue `.` `)` or `"` onto the end of a link.
- Encoded `( )` keep a markdown link from ending early; some chat apps also cut links at a bare `(`.

## Mermaid rules that break diagrams

A link can be encoded perfectly and still open an error if the Mermaid inside is invalid. Check these before you encode:

- A node label containing `( )` `[ ]` `{ }` `:` `;` or quotes must be wrapped in double quotes. Inside a quoted label, write a double quote as `#quot;`.

  Wrong:

  ```mermaid
  flowchart TD
      A[Click the link (if received)] --> B[Show "Check your inbox"]
  ```

  Right:

  ```mermaid
  flowchart TD
      A["Click the link (if received)"] --> B["Show #quot;Check your inbox#quot;"]
  ```

- Sequence diagrams: every message is one line, `A->>B: text`. Never continue a message on the next line; use `<br/>` for a line break, or send two messages.

  Wrong:

  ```mermaid
  sequenceDiagram
      A->>B: POST /token
      grant_type=authorization_code
  ```

  Right:

  ```mermaid
  sequenceDiagram
      A->>B: POST /token<br/>grant_type=authorization_code
  ```

- ER diagrams: every relationship needs a label after `:`, and a label with spaces must be in double quotes.

  Wrong:

  ```mermaid
  erDiagram
      POST ||--|{ POST_TAG : links to
      POST_TAG }o--|| TAG :
  ```

  Right:

  ```mermaid
  erDiagram
      POST ||--|{ POST_TAG : "links to"
      POST_TAG }o--|| TAG : tags
  ```

- ER diagrams: each end of a relationship is exactly two characters, one of `||` `o|` `|o` `}|` `|{` `}o` `o{` (exactly one, zero or one, one or more, zero or more). `||--{` is invalid. Model many-to-many with a join entity.

  Wrong:

  ```mermaid
  erDiagram
      POST ||--{ POST_TAG : has
  ```

  Right:

  ```mermaid
  erDiagram
      POST ||--o{ POST_TAG : has
      TAG ||--o{ POST_TAG : "is tagged in"
  ```

- ER attributes are always `type name`, optionally followed by `PK`, `FK` or `UK` (several go comma-separated: `PK, FK`). A line with only a constraint, such as `unique`, is invalid.

  Wrong:

  ```mermaid
  erDiagram
      TAG {
          int id PK
          string name
          unique
      }
  ```

  Right:

  ```mermaid
  erDiagram
      TAG {
          int id PK
          string name UK
      }
  ```

- Class diagrams are not Java: write `class Shape` and mark it with `<<abstract>>` inside the braces. An abstract method ends in `*`, `+area() double*`. `abstract class Shape` and `public class` are invalid.

  Wrong:

  ```mermaid
  classDiagram
      abstract class Shape {
          +area() double
      }
  ```

  Right:

  ```mermaid
  classDiagram
      class Shape {
          <<abstract>>
          +String name
          +area() double*
      }
      Shape <|-- Circle
  ```

- Node and participant ids are single words (letters, digits, `_`), and every later use must spell the id exactly the same, case included.

  Wrong:

  ```mermaid
  sequenceDiagram
      participant Auth as Auth Server
      B->>AUTH: GET /authorize
  ```

  Right:

  ```mermaid
  sequenceDiagram
      participant Auth as Auth Server
      B->>Auth: GET /authorize
  ```

## Characters that break links

| Character | Encoded |
|---|---|
| space | `%20` |
| line break | `%0A` |
| `#` (hash) | `%23` |
| `%` (percent) | `%25` |
| `&` (ampersand) | `%26` |
| `+` (plus) | `%2B` |
| `?` (question mark) | `%3F` |
| `/` (slash) | `%2F` |
| `=` (equals) | `%3D` |
| `(` (open paren) | `%28` |
| `)` (close paren) | `%29` |
| `[` (open bracket) | `%5B` |
| `]` (close bracket) | `%5D` |
| `{` (open brace) | `%7B` |
| `}` (close brace) | `%7D` |
| `"` (double quote) | `%22` |
| `'` (single quote) | `%27` |
| `<` (less than) | `%3C` |
| `>` (greater than) | `%3E` |
| `\|` (pipe) | `%7C` |
| `:` (colon) | `%3A` |
| `;` (semicolon) | `%3B` |
| `,` (comma) | `%2C` |
| `开始` (Chinese and other non-ASCII: leave as is) | `开始` |

- Common sequences: `-->` is `--%3E`, `[Start]` is `%5BStart%5D`, 4-space indent is `%20%20%20%20`.
- Letters, digits and `-` `_` `.` `~` stay as they are.
- Chinese, Japanese, Korean and emoji go into the link unencoded (`A%5B开始%5D`). Do not try to work out their UTF-8 bytes: one wrong byte turns a label into a different word. Already-encoded bytes (from code) also work.

## How to give the link to the user

- Write the link as a markdown link: `[Open in FlowViz](URL)`. Chat apps render it as clickable text.
- Tell the user the whole diagram lives in the link and nothing is uploaded.
- Put no spaces or line breaks inside the URL, however long it is.
- You may also show the Mermaid source in a mermaid code block so the user can copy it. The link itself must never be inside a code block.

Before sending, check the link:

- Starts with `https://flowviz.app/app#m=`.
- No spaces, line breaks, raw `#`, or raw `( )` after `#m=`.
- The Mermaid inside follows the rules in "Mermaid rules that break diagrams".
- Any Chinese, Japanese, Korean or emoji text is written as the characters themselves, with no `%E…` escapes you worked out by hand.
- Ends with `%0A`.
- Is inside `[Open in FlowViz](...)`, not in backticks or a code block.

## Examples

Each link below is the Mermaid source above it, encoded with the recipe. Every one is tested to open the exact diagram.

### Flowchart

```mermaid
flowchart TD
    A["Start"] --> B{"Logged in?"}
    B -->|Yes| C["Dashboard"]
    B -->|No| D["Login page"]
    D --> B
```

[Open in FlowViz](https://flowviz.app/app#m=flowchart%20TD%0A%20%20%20%20A%5B%22Start%22%5D%20--%3E%20B%7B%22Logged%20in%3F%22%7D%0A%20%20%20%20B%20--%3E%7CYes%7C%20C%5B%22Dashboard%22%5D%0A%20%20%20%20B%20--%3E%7CNo%7C%20D%5B%22Login%20page%22%5D%0A%20%20%20%20D%20--%3E%20B%0A)

### Sequence diagram

```mermaid
sequenceDiagram
    participant U as User
    participant API
    U->>API: POST /login
    API-->>U: 200 OK + token
```

[Open in FlowViz](https://flowviz.app/app#m=sequenceDiagram%0A%20%20%20%20participant%20U%20as%20User%0A%20%20%20%20participant%20API%0A%20%20%20%20U-%3E%3EAPI%3A%20POST%20%2Flogin%0A%20%20%20%20API--%3E%3EU%3A%20200%20OK%20%2B%20token%0A)

### Class diagram

Here `+` is a real character (public visibility), so it is encoded as `%2B`.

```mermaid
classDiagram
    class Animal {
        +String name
        +speak() void
    }
    Animal <|-- Dog
```

[Open in FlowViz](https://flowviz.app/app#m=classDiagram%0A%20%20%20%20class%20Animal%20%7B%0A%20%20%20%20%20%20%20%20%2BString%20name%0A%20%20%20%20%20%20%20%20%2Bspeak%28%29%20void%0A%20%20%20%20%7D%0A%20%20%20%20Animal%20%3C%7C--%20Dog%0A)

### State diagram

```mermaid
stateDiagram-v2
    [*] --> Draft
    Draft --> Review : submit
    Review --> Published : approve
    Published --> [*]
```

[Open in FlowViz](https://flowviz.app/app#m=stateDiagram-v2%0A%20%20%20%20%5B%2A%5D%20--%3E%20Draft%0A%20%20%20%20Draft%20--%3E%20Review%20%3A%20submit%0A%20%20%20%20Review%20--%3E%20Published%20%3A%20approve%0A%20%20%20%20Published%20--%3E%20%5B%2A%5D%0A)

### Entity-relationship diagram

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
        int id PK
        string email
    }
```

[Open in FlowViz](https://flowviz.app/app#m=erDiagram%0A%20%20%20%20CUSTOMER%20%7C%7C--o%7B%20ORDER%20%3A%20places%0A%20%20%20%20CUSTOMER%20%7B%0A%20%20%20%20%20%20%20%20int%20id%20PK%0A%20%20%20%20%20%20%20%20string%20email%0A%20%20%20%20%7D%0A)

### Gantt chart

```mermaid
gantt
    title Launch plan
    dateFormat YYYY-MM-DD
    section Build
    Design :a1, 2026-10-01, 7d
    Code   :a2, after a1, 10d
    Launch :milestone, after a2, 0d
```

[Open in FlowViz](https://flowviz.app/app#m=gantt%0A%20%20%20%20title%20Launch%20plan%0A%20%20%20%20dateFormat%20YYYY-MM-DD%0A%20%20%20%20section%20Build%0A%20%20%20%20Design%20%3Aa1%2C%202026-10-01%2C%207d%0A%20%20%20%20Code%20%20%20%3Aa2%2C%20after%20a1%2C%2010d%0A%20%20%20%20Launch%20%3Amilestone%2C%20after%20a2%2C%200d%0A)

### Pie chart

```mermaid
pie title Browser share
    "Chrome" : 65
    "Safari" : 20
    "Other" : 15
```

[Open in FlowViz](https://flowviz.app/app#m=pie%20title%20Browser%20share%0A%20%20%20%20%22Chrome%22%20%3A%2065%0A%20%20%20%20%22Safari%22%20%3A%2020%0A%20%20%20%20%22Other%22%20%3A%2015%0A)

### Mindmap

Indentation is meaningful in a mindmap, so every leading space is kept as `%20`.

```mermaid
mindmap
  root((Trip))
    Travel
      Flights
    Stay
      Hotel
```

[Open in FlowViz](https://flowviz.app/app#m=mindmap%0A%20%20root%28%28Trip%29%29%0A%20%20%20%20Travel%0A%20%20%20%20%20%20Flights%0A%20%20%20%20Stay%0A%20%20%20%20%20%20Hotel%0A)

### Git graph

```mermaid
gitGraph
    commit
    branch feature/login
    commit id: "add form"
    checkout main
    merge feature/login
```

[Open in FlowViz](https://flowviz.app/app#m=gitGraph%0A%20%20%20%20commit%0A%20%20%20%20branch%20feature%2Flogin%0A%20%20%20%20commit%20id%3A%20%22add%20form%22%0A%20%20%20%20checkout%20main%0A%20%20%20%20merge%20feature%2Flogin%0A)

### Timeline

```mermaid
timeline
    title Company history
    2019 : Founded
    2021 : First product
    2024 : 1M users
```

[Open in FlowViz](https://flowviz.app/app#m=timeline%0A%20%20%20%20title%20Company%20history%0A%20%20%20%202019%20%3A%20Founded%0A%20%20%20%202021%20%3A%20First%20product%0A%20%20%20%202024%20%3A%201M%20users%0A)

### Flowchart with Chinese labels

The Chinese text stays as written; only the ASCII around it is encoded.

```mermaid
flowchart LR
    A["开始"] --> B{"是否登录?"}
    B -->|是| C["首页"]
    B -->|否| D["登录"]
```

[Open in FlowViz](https://flowviz.app/app#m=flowchart%20LR%0A%20%20%20%20A%5B%22开始%22%5D%20--%3E%20B%7B%22是否登录%3F%22%7D%0A%20%20%20%20B%20--%3E%7C是%7C%20C%5B%22首页%22%5D%0A%20%20%20%20B%20--%3E%7C否%7C%20D%5B%22登录%22%5D%0A)

### Mindmap with Chinese labels

Indentation sets the level; the Chinese text is written as-is.

```mermaid
mindmap
  年度计划
    招聘
      工程师
      设计师
    市场
    财务
```

[Open in FlowViz](https://flowviz.app/app#m=mindmap%0A%20%20年度计划%0A%20%20%20%20招聘%0A%20%20%20%20%20%20工程师%0A%20%20%20%20%20%20设计师%0A%20%20%20%20市场%0A%20%20%20%20财务%0A)

### Labels with & % " ( ) characters

Quoted labels may contain `&` `%` `(` `)`; all of them, and the quotes, are encoded.

```mermaid
flowchart LR
    A["R&D (40%)"] --> B["Q&A: 'why?'"]
    B --> C["Done!"]
```

[Open in FlowViz](https://flowviz.app/app#m=flowchart%20LR%0A%20%20%20%20A%5B%22R%26D%20%2840%25%29%22%5D%20--%3E%20B%5B%22Q%26A%3A%20%27why%3F%27%22%5D%0A%20%20%20%20B%20--%3E%20C%5B%22Done%21%22%5D%0A)

## Common mistakes

- **Using `+` for spaces.** FlowViz reads `+` as a space only when the link has no `%20` and no raw space anywhere. Mix the two and every `+` stays a literal `+`. Always use `%20`, and encode a real `+` as `%2B`.
- **Not encoding `#` or `%`.** A raw `#` or `%` in the source corrupts the link. Write `%23` and `%25`. Also encode `&` `?` `=` `/` so the URL stays unambiguous.
- **Line breaks or spaces inside the URL.** Chat apps end the link at the first space or line break, so the diagram is cut off. Every newline in the source must be `%0A` and every space `%20`, so the link is one unbroken line.
- **Putting the link in backticks or a code block.** Then it is shown as text and the user cannot click it. Use a markdown link `[Open in FlowViz](URL)` in normal text.
- **Very long diagrams.** Keep links under about 8,000 characters; some chat apps and browsers cut longer ones. For a bigger diagram, give the user the Mermaid code in a code block and tell them to paste it into the editor at https://flowviz.app/app.
- **Encoding the prefix.** Only the diagram is encoded. `https://flowviz.app/app#m=` is written exactly as shown, then the encoded source, then `%0A`.

## If you can run code

If you can run code, generate the link instead of encoding by hand. Both snippets print the same link as the recipe above.

```python
from urllib.parse import quote
source = """flowchart TD
    A[Start] --> B[End]"""
link = "https://flowviz.app/app#m=" + quote(source + "\n", safe="")
print(f"[Open in FlowViz]({link})")
```

```javascript
const source = `flowchart TD
    A[Start] --> B[End]`;
const encoded = encodeURIComponent(source + "\n")
  .replace(/[!'()*]/g, (c) => "%" + c.charCodeAt(0).toString(16).toUpperCase());
const link = "https://flowviz.app/app#m=" + encoded;
console.log(`[Open in FlowViz](${link})`);
```

The Share button in the FlowViz editor makes a shorter, compressed link. Don't try to write compressed links (`#z=` or `?d=`) by hand. Use `#m=`.

## Other formats FlowViz opens

- `https://flowviz.app/app#z=…`: Compressed (DEFLATE with a checksum), generated by FlowViz. Opens as-is; do not write one by hand.
- `https://flowviz.app/app#pako:…`: A Mermaid Live Editor link. Replace `https://mermaid.live/edit` with `https://flowviz.app/app` and keep everything from `#pako:` on.
- `https://flowviz.app/app?d=…`: Older FlowViz links (lz-string compressed). They still open, but new links should use `#m=`.
- `https://flowviz.app/s/<id>`: Short links the user creates in the editor. These are the one case where a diagram is stored on the server; stored copies are deleted after 3 months.

## For developers

FlowViz reads a diagram from the URL fragment (after `#`), which browsers never send to a server, so opening a link your code, extension or bot built makes no request that carries the diagram. Links open at `https://flowviz.app/app`.

### Link formats

- `#m=<percent-encoded source>`: Plain. Build it with `encodeURIComponent` in any language, following the Recipe. The decoder is lenient about the mistakes people and models make: raw spaces and newlines, `+` for space, a Markdown code fence around the whole diagram, and punctuation a chat app glues onto the end.
- `#z=<data>`: Compressed, written by the editor's Share button: base64url (no padding) of the raw DEFLATE (level 9) of the UTF-8 source, followed by the 4-byte big-endian CRC32 of the compressed bytes. Usually much shorter than the same diagram as `#m=`. A link that fails the checksum is refused rather than opened as a slightly different diagram.

### Mermaid Live import

- A Mermaid Live Editor link opens in FlowViz: replace `https://mermaid.live/edit` with `https://flowviz.app/app` and keep everything from `#pako:` on. The older `#base64:` form works the same way.
- Pasting a Mermaid Live URL into the FlowViz code editor offers to import it.
- FlowViz takes the diagram code, and the Mermaid Live theme when FlowViz has the same one. Other Mermaid Live settings are ignored.

### Query parameters

- `ref`: Where the link came from, for example `ref=chatgpt` or `ref=my-extension`. A short slug: lowercase letters, digits and `- _ .`, up to 40 characters. Anything else is ignored. It is counted in FlowViz's analytics together with whether the link opened.
- `theme`: The FlowViz theme to open in, by slug: `default`, `neutral`, `forest`, `base`, `ocean`, `sunset`, `high-contrast`, `monochrome`, `dark`, `purple`. Case doesn't matter, and old theme names still work (for example `dark-protocol`, `ocean-breeze`). An unknown value is ignored and the visitor keeps their own theme. Slugs never change. See every theme at https://flowviz.app/themes.
- `view`: `edit` or `preview`: which pane a phone shows first. Desktop always shows both.

Query parameters go before the `#`, for example `https://flowviz.app/app?ref=my-extension#m=...`. They take effect only when the link carries a diagram. Unlike the fragment, the query is sent to the server, so never put diagram text in it.

### JavaScript helper

```javascript
function flowvizLink(source, ref) {
  const encoded = encodeURIComponent(source + "\n")
    .replace(/[!'()*]/g, (c) => "%" + c.charCodeAt(0).toString(16).toUpperCase());
  const query = ref ? "?ref=" + encodeURIComponent(ref) : "";
  return "https://flowviz.app/app" + query + "#m=" + encoded;
}

console.log(flowvizLink("sequenceDiagram\n    Alice->>Bob: Hi", "my-extension"));
```

## Privacy

The diagram travels in the URL fragment (the part after `#`), which browsers never send to a server. FlowViz opens it entirely in the browser.

---

# Mermaid diagram themes

10 free Mermaid themes, each shown on real diagrams, with copy-ready config (frontmatter or %%{init}%%) that works in any Mermaid renderer. Light and dark, high contrast and print-safe monochrome.

Source: https://flowviz.app/themes · Last updated: 2026-09-24

## Open a diagram in a theme

Add `?theme=<slug>` to a FlowViz link, before the `#`: `https://flowviz.app/app?theme=<slug>#m=<percent-encoded Mermaid source>`.
Slugs never change. Unknown slugs are ignored, and the visitor keeps their own theme.

| Slug | Name | For | Description |
|---|---|---|---|
| `default` | Default | light pages | Classic blue |
| `neutral` | Neutral | light pages | Clean grayscale |
| `forest` | Forest | light pages | Natural greens |
| `base` | Base | light pages | Minimal |
| `ocean` | Ocean | light pages | Cool blues |
| `sunset` | Sunset | light pages | Warm oranges |
| `high-contrast` | High Contrast | light pages | Black on white, AAA text |
| `monochrome` | Monochrome | light pages | Greys only, print-safe |
| `dark` | Dark | dark pages | Slate & cyan |
| `purple` | Purple | dark pages | Deep violet |

Example: https://flowviz.app/app?theme=ocean#z=TY69DoIwFIV3n-KOMPAKGvl3cRA1MQ1DpVdo0rTJbRMG8N2FlkQ6neZ8uef7KDN2AycH9_wAyztHrHHLv40hSY6QTg-LBMr0PQqQ-vT1VLqW8wvtDBlrBjOC4HZ4G06i3QFXM0PObigkYefAmfWQ1AHJ_UDB_ABqh2ShIxRLlFzZABUeKqcnV1Ls602k_ItULCPkDsGitdJsKwFYReogikSGQlcHA58rnzOfM58vESu0aOMfWBsKaQ

## Copy a theme into Mermaid code

Paste a theme's frontmatter above any Mermaid diagram. Mermaid's built-in themes need one line:

```
---
config:
  theme: forest
---
flowchart TD
    A --> B
```

FlowViz's own themes (`ocean`, `sunset`, `high-contrast`, `monochrome`, `dark`, `purple`) are `theme: base` plus a full set of `themeVariables`; copy them from https://flowviz.app/themes.

## How Mermaid theming works

### Built-in themes and the base theme

Mermaid ships five themes: `default`, `neutral`, `dark`, `forest` and `base`. Only `base` can be customised: you set `theme: base` and override any of its `themeVariables`, such as `primaryColor`, `lineColor` or `textColor`. Colours must be hex values like `#0077b6`; Mermaid ignores colour names.

Mermaid derives most colours from a few inputs (fills from `primaryColor`, pie and git colours by rotating its hue), and those derivations don't suit every diagram type. That is why each FlowViz theme sets every variable a diagram type reads, including the per-type ones for sequence diagrams (`actorBkg`, `signalColor`), Gantt (`taskBkgColor`, `critBkgColor`), pie (`pie1`–`pie12`), mindmap and timeline sections (`cScale0`–`cScale11`), git graphs (`git0`–`git7`) and the nested `xyChart`, `radar` and `packet` groups.

### Frontmatter or init directive

The current way to theme one diagram is a YAML frontmatter block at the very top, before the diagram type: `---`, then `config:` with `theme` and `themeVariables`, then `---`. It needs Mermaid 10.5 or later.

Older renderers only understand the init directive, a single line such as `%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#0077b6"}}}%%`. Mermaid still reads it but has deprecated it in favour of frontmatter since 10.5. If a diagram has both, the directive wins.

Either way the theme lives in the diagram's code, so it travels wherever the code goes, as long as the renderer honours it (see below).

### Light and dark pages

Mermaid never paints a background behind a diagram: the page shows through. A dark theme has light text, so on a white page its labels, titles and edge text all but vanish. Pick a light theme for light pages (most docs, READMEs in light mode, slides) and a dark theme for dark ones. FlowViz's editor and PNG export paint the theme's own page colour; SVG export stays transparent.

C4 diagrams ignore theme variables: Mermaid draws them from their own `c4` config, so no theme changes them, and their grey "external" boxes and dark relationship labels don't suit dark themes.

## Where custom themes work

Whether a pasted theme shows up depends on the site rendering the diagram, not on Mermaid. We checked each platform's docs, source code and staff replies on 24 September 2026 but didn't test every one live, so each note says how sure it is.

- **GitHub**: Renders a theme set in the diagram, including `themeVariables` in frontmatter or `%%{init}%%` (Mermaid 11.x, going by community reports from August 2026). A diagram with no theme follows the viewer's light or dark mode; once you set one, it no longer adapts, so check the diagram in both modes. A light theme is the safer choice for READMEs. (https://github.com/orgs/community/discussions/70672, https://github.com/orgs/community/discussions/35733, https://github.com/orgs/community/discussions/189152)
- **GitLab**: Renders with Mermaid 11 in a sandbox that starts from `neutral` (or `dark` in dark mode) but doesn't lock the theme settings, so a theme in the diagram should override that default. This is read from GitLab's source code; we haven't tested it on a live instance. (https://docs.gitlab.com/user/markdown/, https://github.com/gitlabhq/gitlabhq/blob/master/app/assets/javascripts/lib/mermaid_sandbox.js)
- **Notion**: Appears to ignore themes set in the diagram, including `%%{init}%%`, and draws every diagram in Mermaid's default look. We found no official Notion documentation either way. If the colours matter, export an SVG or PNG from FlowViz and paste the image. (https://dev.to/levi_liu/embed-mermaid-in-notion-the-4-working-approaches-in-2026-257f)
- **Obsidian**: Doesn't support Mermaid themes: it colours diagrams from your Obsidian theme, and Obsidian staff have said theme directives are unsupported (2022 and 2024). Obsidian 1.14 ships Mermaid 11.13, and Mermaid rendering now needs a one-time opt-in. If the colours matter, paste an exported image. (https://obsidian.md/changelog/, https://forum.obsidian.md/t/mermaid-custom-theme-not-working/45583, https://forum.obsidian.md/t/mermaid-theme-needs-to-mirror-obsidian-theme-redux/72819)
- **Confluence**: Depends on the Marketplace app. Atlassian Labs' Mermaid Diagrams Viewer (Mermaid 11) picks light or dark to match Confluence without locking the theme settings, so a theme in the diagram should apply; that is read from its source code, not tested. Weweave's Mermaid Charts & Diagrams app has its own Theme setting. For other apps we couldn't confirm either way, so check yours. (https://github.com/atlassian-labs/mermaid-diagrams-viewer/blob/main/custom-ui/src/main.tsx, https://weweave.atlassian.net/wiki/spaces/CONFMERMAID/pages/904462355/Documentation)

## Known limits

- `default`: Mermaid built-in. Mindmap, timeline and Gantt section labels are white on mid-tone fills, about 2.6–3:1.
- `neutral`: Mermaid built-in. Some mindmap and kanban labels fall to about 2.8–4.2:1.
- `forest`: Mermaid built-in. Git graph branch labels and mindmap sections are white on light green, about 2:1.
- `base`: Mermaid built-in. Git graph, mindmap and timeline labels are about 4:1; Gantt critical tasks about 3.2:1.
- `monochrome`: Status in Gantt charts (done, active, critical) and pie slices are told apart by shade of grey only, so keep labels and legends on.

---

# Mermaid Syntax Cheatsheet
**flowviz.app** — Free online Mermaid diagram editor

---

## Flowchart

Directional graphs for process flows, decision trees, and system architecture.

To write a flowchart in Mermaid, start the block with flowchart TD for a top-down layout (or LR for left-to-right), then declare each node with an id and a bracketed label — square brackets for a rectangle, curly braces for a decision diamond — and connect nodes with --> arrows. Add a label to any arrow by writing it between pipes, as in B -->|Yes| C.

```mermaid
flowchart TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Ship it]
    B -->|No| D[Debug]
    D --> B
    C --> E(Done)
```

- TD top-down · LR left-right · RL · BT
- [] rect · () rounded · {} diamond · (()) circle · >] asymmetric
- --> solid · -.-> dashed · ==> thick

---

## Sequence Diagram

Show interactions between participants over time, ideal for API and protocol documentation.

To write a sequence diagram in Mermaid, open with sequenceDiagram, declare each participant on its own line (participant S as Server gives it a display alias), then write one message per line: a solid arrow ->> for a request and a dashed -->> for the reply. Participants render left to right in declaration order, and messages stack top to bottom in the order written.

```mermaid
sequenceDiagram
    participant C as Client
    participant S as Server
    participant DB as Database
    C->>S: POST /login
    S->>DB: SELECT user WHERE email=?
    DB-->>S: User record
    S-->>C: 200 OK + JWT token
```

- ->> sync · -->> dashed reply · -) async · --) async reply
- activate/deactivate · loop · alt/else · opt · par

---

## Gantt Chart

Project timelines with tasks, dependencies, milestones, and status tracking.

To make a Gantt chart in Mermaid, start with gantt, set dateFormat YYYY-MM-DD, and group tasks under section headings. Each task is one line: a name, an optional status tag such as done, active, or crit, an id, then either explicit dates or a duration like 5d. Chain dependent work by writing after taskId in place of a start date.

```mermaid
gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Design
        Wireframes     :done, des1, 2024-01-01, 2024-01-07
        Mockups        :active, des2, 2024-01-08, 5d
    section Development
        Frontend       :dev1, after des2, 10d
        Backend        :dev2, after des2, 14d
    section Launch
        Deploy         :milestone, 2024-02-15, 0d
```

- dateFormat YYYY-MM-DD
- done · active · crit · milestone
- after <id> · <n>d duration

---

## Entity Relationship

Database schemas with entities, attributes, and relationship cardinalities.

To write an ER diagram in Mermaid, start with erDiagram, define each entity as a block listing its attributes with a type and a name (marking keys PK or FK), then declare relationships between entities with cardinality symbols — ||--o{ reads as one-to-many. The quoted label after the colon describes how the two entities relate.

```mermaid
erDiagram
    USER {
        int id PK
        string email
        string name
        date created_at
    }
    POST {
        int id PK
        string title
        text body
        int user_id FK
    }
    USER ||--o{ POST : "writes"
```

- PK · FK · UK
- ||--|| one-to-one · ||--o{ one-to-many · }o--o{ many-to-many
- "relationship label" after entity name

---

## Class Diagram

Object-oriented class hierarchies with inheritance, composition, and method signatures.

To write a class diagram in Mermaid, start with classDiagram and define each class as a block containing its attributes and methods, prefixed + for public or - for private. Then draw relationships between class names: <|-- for inheritance, *-- for composition, and o-- for aggregation.

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +makeSound() void
    }
    class Dog {
        +String breed
        +fetch() void
    }
    class Cat {
        +bool indoor
        +purr() void
    }
    Animal <|-- Dog
    Animal <|-- Cat
```

- + public · - private · # protected · ~ package
- <|-- inheritance · *-- composition · o-- aggregation · --> association

---

## State Diagram

Finite state machines showing states, transitions, and conditions.

To write a state diagram in Mermaid, start with stateDiagram-v2, use [*] for the start and end states, and describe each transition as CurrentState --> NextState : trigger. Attach context to any state with note right of, and nest sub-states inside state Name { } blocks when a state has internal structure.

```mermaid
stateDiagram-v2
    [*] --> Idle
    Idle --> Processing : submit
    Processing --> Success : valid
    Processing --> Error : invalid
    Error --> Idle : retry
    Success --> [*]
    note right of Processing
        Validating input
        and calling API
    end note
```

- [*] start/end state
- state --> state : event label
- note right/left of state

---

## Pie Chart

Proportional data as a circular chart with labeled slices.

To make a pie chart in Mermaid, start with pie and an optional title on the same line, then list one slice per line as a quoted label, a colon, and its numeric value. Mermaid computes the percentages automatically, so values can be raw counts rather than percentages.

```mermaid
pie title Browser Market Share
    "Chrome" : 65.3
    "Safari" : 18.7
    "Firefox" : 4.1
    "Edge" : 4.2
    "Other" : 7.7
```

- title <text> optional
- "label" : value (numeric)

---

## Git Graph

Visualize git branch history, merges, and commits with tags.

To draw a git graph in Mermaid, start with gitGraph and write git operations in order: commit adds a commit to the current branch, branch creates and switches to a new branch, checkout switches between existing branches, and merge brings another branch back in. Give commits readable labels with commit id: "message".

```mermaid
gitGraph
   commit id: "initial"
   branch feature/auth
   checkout feature/auth
   commit id: "add login"
   commit id: "add JWT"
   checkout main
   merge feature/auth
   commit id: "bump version"
```

- commit · branch · checkout · merge · cherry-pick
- id: "label" · tag: "v1.0" · type: HIGHLIGHT/REVERSE/NORMAL

---

## Mindmap

Hierarchical radial diagrams for brainstorming and topic breakdowns.

To make a mindmap in Mermaid, start with mindmap and put the central idea on the next line — wrapping it in double parentheses draws it as a circle. Every following line becomes a node, and its depth of indentation decides which branch it hangs from, so the whole map is written as a plain indented outline.

```mermaid
mindmap
  root((FlowViz))
    Features
      Real-time preview
      SVG export
      Theme switching
    Diagram Types
      Flowchart
      Sequence
      Gantt
    Tech Stack
      Vue 3
      Mermaid v11
      Nuxt 3
```

- root((text)) circle · root[text] rect · root(text) rounded
- indentation defines hierarchy

---

## Timeline

Chronological event sequences grouped into sections by period.

To make a timeline in Mermaid, start with timeline, add a title, and group periods under section headings. Each entry is a period, a colon, and its event — add more colon-separated events on following lines to attach several events to the same period.

```mermaid
timeline
    title Product Roadmap
    section 2024 Q1
        Jan : Beta launch
        Feb : User feedback
        Mar : v1.0 release
    section 2024 Q2
        Apr : Mobile support
        Jun : API access
```

- section <name> optional grouping
- date : event (date is any string)

---

## Quadrant Chart

Plot items on a 2x2 grid to compare effort vs impact, urgency vs importance, and similar trade-offs.

To make a quadrant chart in Mermaid, start with quadrantChart, label the x-axis and y-axis with Low --> High ranges, and name the four quadrants with quadrant-1 through quadrant-4. Then plot each item as Name: [x, y] using coordinates between 0 and 1, where [1, 1] is the top-right corner.

```mermaid
quadrantChart
    title Feature prioritization
    x-axis Low Effort --> High Effort
    y-axis Low Impact --> High Impact
    quadrant-1 Strategic bets
    quadrant-2 Quick wins
    quadrant-3 Deprioritize
    quadrant-4 Money pits
    Dark mode: [0.25, 0.75]
    SSO login: [0.8, 0.85]
    New icons: [0.2, 0.3]
    Full rewrite: [0.9, 0.35]
```

- x-axis Left --> Right · y-axis Bottom --> Top
- quadrant-1 top-right · quadrant-2 top-left · quadrant-3 bottom-left · quadrant-4 bottom-right
- Points: Name: [x, y] with 0-1 coordinates

---

## Sankey Diagram

Visualize flows and how quantities split between stages — funnels, energy, budgets, traffic.

To make a sankey diagram in Mermaid, start with sankey-beta and list one flow per line as unindented CSV: source, target, value. Reuse a node name as the source of later rows to chain flows through multiple stages — Mermaid sizes every ribbon in proportion to its value.

```mermaid
sankey-beta
Visitors,Signed up,300
Visitors,Bounced,700
Signed up,Activated,180
Signed up,Dropped off,120
Activated,Paying,60
Activated,Free tier,120
```

- Declared with sankey-beta
- CSV rows: Source,Target,Value — no indentation
- Repeat a node name to chain flows across stages

---

## XY Chart

Bar and line charts from plain text — plot revenue, usage, or any numeric series.

To make a bar or line chart in Mermaid, start with xychart-beta, define the x-axis with a bracketed list of categories and the y-axis with a label and range, then plot the series with bar [...] or line [...] — or both, to overlay a line on the bars. Values match categories by position.

```mermaid
xychart-beta
    title "Monthly revenue"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Revenue ($k)" 0 --> 120
    bar [42, 55, 61, 74, 88, 105]
    line [42, 55, 61, 74, 88, 105]
```

- Declared with xychart-beta
- x-axis [a, b, c] categories · y-axis "Label" min --> max
- bar [...] and line [...] can be combined in one chart

---

## Block Diagram

Grid-based layout for system overviews when you need explicit control over block placement.

To make a block diagram in Mermaid, start with block-beta and set the grid with columns N. Each entry then fills the next cell — use space to leave a cell empty and shape brackets such as DB[("Postgres")] to style a block — and connections are drawn afterwards with --> arrows between block ids.

```mermaid
block-beta
columns 3
  Client space:1 API["API Gateway"]
  space:3
  Cache[("Redis")] space:1 DB[("Postgres")]
  Client --> API
  API --> DB
  API --> Cache
```

- columns N sets the grid width
- space / space:2 leaves empty cells
- [("...")] cylinder · A --> B connects blocks

---

## Architecture Diagram

Cloud and service topologies: groups, services, and the connections between them.

To draw an architecture diagram in Mermaid, start with architecture-beta, declare group blocks for boundaries such as clouds or VPCs, then add service entries with a built-in icon (database, server, disk) and place them inside a group with the in keyword. Connect services edge to edge with db:L -- R:server, where the letters pick which side each line attaches to.

```mermaid
architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:db
```

- group id(icon)[Label] · service id(icon)[Label] in group
- Edges join sides: db:L -- R:server (T, B, L, R)
- Built-in icons: cloud, database, disk, server, internet

---

## User Journey

Score each step of a user experience to spot the low points.

To make a user journey diagram in Mermaid, start with journey, group steps under section headings, and write each step as Task name: score: Actor, scoring the experience from 1 (worst) to 5 (best). Mermaid colors every step by its score, which makes the painful parts of the journey stand out at a glance.

```mermaid
journey
    title Checkout experience
    section Browse
      Find product: 5: Shopper
      Compare prices: 3: Shopper
    section Purchase
      Add to cart: 4: Shopper
      Enter payment: 2: Shopper
      Confirm order: 5: Shopper, Support
```

- section groups steps
- Step format: Task name: <score 1-5>: Actor1, Actor2

---

## Requirement Diagram

Model requirements and how system elements satisfy or verify them (SysML-style).

To write a requirement diagram in Mermaid, start with requirementDiagram and declare each requirement as a block with an id, text, risk level, and verifymethod. Declare the system parts as element blocks, then connect them with typed relations such as auth_service - satisfies -> login_req to show which element covers which requirement.

```mermaid
requirementDiagram

    requirement login_req {
    id: 1
    text: Users must authenticate before accessing data.
    risk: high
    verifymethod: test
    }

    element auth_service {
    type: service
    }

    auth_service - satisfies -> login_req
```

- requirement name { id, text, risk, verifymethod }
- element name { type }
- Relations: - satisfies -> · - verifies -> · - traces ->

---

## C4 Diagram

C4 system-context and container views for software architecture documentation.

To draw a C4 context diagram in Mermaid, start with C4Context (or C4Container and C4Component for deeper zoom levels), declare people and systems with Person(id, "Label", "Description") and System(...), using System_Ext for systems outside your boundary, then relate them with Rel(from, to, label, technology).

```mermaid
C4Context
    title Internet banking - system context
    Person(customer, "Customer", "A customer of the bank")
    System(banking, "Internet Banking", "Lets customers view accounts")
    System_Ext(mail, "E-mail System", "Sends notifications")
    Rel(customer, banking, "Uses")
    Rel(banking, mail, "Sends e-mails", "SMTP")
```

- C4Context · C4Container · C4Component set the level
- Person(...) · System(...) · System_Ext(...) declare shapes
- Rel(from, to, label, tech) draws relations

---

## Kanban Board

Text-defined kanban columns and cards for lightweight status snapshots.

To make a kanban board in Mermaid, start with kanban, write each column as a top-level id[Title] entry, and indent card entries beneath the column they belong to. Columns render left to right in declaration order, so moving a card between columns is just cutting one line and pasting it under another heading.

```mermaid
kanban
  todo[Todo]
    t1[Write API spec]
    t2[Design schema]
  doing[In progress]
    t3[Build endpoints]
  done[Done]
    t4[Project setup]
```

- Top-level entries are columns: id[Title]
- Indented entries are cards

---

## Radar Chart

Compare multiple entities across shared axes — skills, scores, feature coverage.

To make a radar chart in Mermaid, start with radar-beta, define the spokes with axis entries, then plot each entity as a curve listing one value per axis in declaration order. Set min and max to fix the scale so curves from different entities are directly comparable.

```mermaid
radar-beta
  title Team skills
  axis c["Coding"], d["Design"], o["Ops"]
  axis p["Product"], m["Marketing"]
  curve alice["Alice"]{80, 60, 70, 55, 40}
  curve bob["Bob"]{55, 85, 45, 75, 70}
  max 100
  min 0
```

- Declared with radar-beta
- axis id["Label"], ... defines spokes
- curve id["Label"]{v1, v2, ...} plots one entity · min / max set the scale

---

## Packet Diagram

Bit-level layout of network packets and binary formats.

To draw a packet diagram in Mermaid, start with packet-beta and describe each field as a bit range with a quoted name, such as 0-15: "Source Port". Rows wrap automatically at 32 bits, producing the classic RFC-style layout for network headers and binary formats.

```mermaid
packet-beta
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"
```

- Declared with packet-beta
- Each row: start-end: "Field name" in bits · rows wrap at 32 bits

---

# Mermaid Diagram Examples

## Decision Flowchart

How to draw a yes/no decision flow with Mermaid — the classic starting point. Two branches leave a diamond decision node, the failure path loops back through a debug step, and the happy path runs straight to done. Swap the labels and you have a working decision tree for any process. (Flowchart · https://flowviz.app/examples#simple-flowchart)

```mermaid
flowchart TD
    A(Start) --> B{Is it working?}
    B -->|Yes| C[Ship it]
    B -->|No| D[Debug]
    D --> B
    C --> E(Done)
```

## User Database Schema

How to model a user authentication schema as a Mermaid ER diagram. User, profile, and session entities carry typed attributes with PK and FK key markers, and the relationship lines read directly as “a user has many sessions”. A solid template for documenting login and account tables. (Data · https://flowviz.app/examples#user-schema)

```mermaid
erDiagram
    USER {
        int id PK
        string email UK
        string password_hash
        datetime created_at
        bool is_active
    }
    PROFILE {
        int id PK
        int user_id FK
        string display_name
        string avatar_url
        text bio
    }
    SESSION {
        string token PK
        int user_id FK
        datetime expires_at
        string ip_address
    }
    USER ||--|| PROFILE : "has"
    USER ||--o{ SESSION : "owns"
```

## API Authentication

How to diagram an OAuth2 token exchange as a Mermaid sequence diagram. The client obtains a token from the auth server, then presents it to the API — solid arrows for requests, dashed arrows for replies. Copy it as the skeleton for documenting any token-based auth flow. (Sequence · https://flowviz.app/examples#api-auth)

```mermaid
sequenceDiagram
    participant U as User
    participant C as Client App
    participant A as Auth Server
    participant API
    U->>C: Click "Login"
    C->>A: POST /authorize
    A-->>C: Redirect + code
    C->>A: POST /token (code)
    A-->>C: access_token + refresh_token
    C->>API: GET /data (Bearer token)
    API-->>C: 200 OK + data
    C-->>U: Show dashboard
```

## HTTP Request Lifecycle

How to trace a full web request through the stack in one sequence diagram: browser to server to database and back. Each hop is a single message line, so adding a cache or CDN is just one more participant. Useful for onboarding docs and performance discussions. (Sequence · https://flowviz.app/examples#http-lifecycle)

```mermaid
sequenceDiagram
    participant B as Browser
    participant CDN
    participant S as Server
    participant DB
    B->>CDN: GET /page
    CDN-->>B: Cache HIT (static assets)
    B->>S: GET /api/data
    activate S
    S->>DB: SELECT * FROM items
    DB-->>S: ResultSet
    deactivate S
    S-->>B: 200 JSON response
```

## Browser Market Share

How to turn a handful of numbers into a Mermaid pie chart. Each line is a quoted label, a colon, and a value — Mermaid computes the percentages itself. Replace the browser-share figures with any distribution you need to present. (Data · https://flowviz.app/examples#market-pie)

```mermaid
pie title Global Browser Market Share
    "Chrome" : 65.3
    "Safari" : 18.7
    "Edge" : 4.2
    "Firefox" : 4.1
    "Samsung" : 2.5
    "Other" : 5.2
```

## Sprint Timeline

How to plan a two-week sprint as a Mermaid Gantt chart, with design, development, and QA grouped into sections. Tasks carry done and active status tags and chain off each other with after, so slipping one task visibly shifts its dependents. (Process · https://flowviz.app/examples#sprint-gantt)

```mermaid
gantt
    title Sprint 12
    dateFormat YYYY-MM-DD
    section Design
        Wireframes    :done, d1, 2024-03-01, 3d
        Review        :done, d2, after d1, 1d
    section Development
        Frontend      :active, dev1, after d2, 6d
        Backend       :dev2, after d2, 5d
        Integration   :dev3, after dev2, 2d
    section QA
        Testing       :qa1, after dev1, 3d
        Bug fixes     :qa2, after qa1, 2d
    section Release
        Deploy        :milestone, after qa2, 0d
```

## Product Roadmap

How to sketch a quarterly product roadmap in Gantt form. Quarters become sections, workstreams become tasks with durations, and milestone entries mark the launches. Deliberately coarse-grained — it reads at a glance in a slide or README. (Process · https://flowviz.app/examples#project-roadmap)

```mermaid
gantt
    title Product Roadmap 2024
    dateFormat YYYY-MM-DD
    section Q1
        Beta launch       :done, 2024-01-15, 30d
        User research     :done, 2024-02-01, 20d
        v1.0 release      :milestone, 2024-03-01, 0d
    section Q2
        Mobile app        :2024-04-01, 45d
        API v2            :2024-04-15, 30d
    section Q3
        Enterprise tier   :2024-07-01, 60d
        Integrations      :2024-08-01, 45d
```

## E-commerce Schema

How to model an online store’s core tables as an ER diagram: customers place orders, orders contain products. Cardinality symbols encode the one-to-many relationships, and typed attributes with PK/FK markers make the schema copy-ready for a design doc. (Data · https://flowviz.app/examples#ecommerce-schema)

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : "places"
    ORDER ||--|{ LINE_ITEM : "contains"
    PRODUCT ||--o{ LINE_ITEM : "in"
    CUSTOMER {
        int id PK
        string name
        string email
    }
    ORDER {
        int id PK
        int customer_id FK
        date order_date
        decimal total
    }
    LINE_ITEM {
        int id PK
        int order_id FK
        int product_id FK
        int quantity
        decimal price
    }
    PRODUCT {
        int id PK
        string name
        decimal price
        int stock
    }
```

## Order State Machine

How to chart an e-commerce order’s lifecycle as a Mermaid state diagram, from placement through payment, shipping, and delivery. Each transition is labeled with the event that causes it, and terminal states show where the flow can end. (Process · https://flowviz.app/examples#order-state)

```mermaid
stateDiagram-v2
    [*] --> Pending
    Pending --> Confirmed : payment_ok
    Pending --> Cancelled : payment_failed
    Confirmed --> Processing : warehouse_ack
    Processing --> Shipped : dispatched
    Shipped --> Delivered : delivery_confirmed
    Shipped --> ReturnRequested : customer_return
    ReturnRequested --> Refunded : return_received
    Delivered --> [*]
    Refunded --> [*]
    Cancelled --> [*]
```

## Traffic Light FSM

How to write the textbook finite state machine — a traffic light — in Mermaid. Three states cycle on timed transitions, with [*] marking entry. The smallest useful template for modeling any cyclic process. (Process · https://flowviz.app/examples#traffic-light)

```mermaid
stateDiagram-v2
    [*] --> Red
    Red --> Green : timer
    Green --> Yellow : timer
    Yellow --> Red : timer
    note right of Red
        Stop — 30s
    end note
    note right of Green
        Go — 25s
    end note
    note right of Yellow
        Caution — 5s
    end note
```

## Class Hierarchy

How to express OOP inheritance in a Mermaid class diagram: an abstract base class with concrete subclasses. Attributes and methods sit inside each class block with +/- visibility markers, and <|-- arrows point from child to parent. (Data · https://flowviz.app/examples#class-hierarchy)

```mermaid
classDiagram
    class Shape {
        <<abstract>>
        +String color
        +float opacity
        +area() float
        +perimeter() float
    }
    class Circle {
        +float radius
        +area() float
        +perimeter() float
    }
    class Rectangle {
        +float width
        +float height
        +area() float
        +perimeter() float
    }
    class Triangle {
        +float a
        +float b
        +float c
        +area() float
    }
    Shape <|-- Circle
    Shape <|-- Rectangle
    Shape <|-- Triangle
```

## Data Pipeline

How to lay out an ETL pipeline as a Mermaid flowchart: sources feed ingestion, transformation, and loading stages. Each stage is a node, so inserting a validation or enrichment step is a one-line change. (Flowchart · https://flowviz.app/examples#data-pipeline)

```mermaid
flowchart LR
    A[(Raw Data)] --> B[Extract]
    B --> C{Valid?}
    C -->|Yes| D[Transform]
    C -->|No| E[Error Log]
    D --> F[Load]
    F --> G[(Data Warehouse)]
    E --> H[Alert]
```

## Git Feature Branch

How to draw a feature-branch workflow with Mermaid’s gitGraph: branch off main, commit work, merge back, then patch with a hotfix. The commit ids read as a story, which makes this ideal for documenting team branching conventions. (Process · https://flowviz.app/examples#git-feature)

```mermaid
gitGraph
   commit id: "initial commit"
   commit id: "project setup"
   branch feature/auth
   checkout feature/auth
   commit id: "add login form"
   commit id: "add JWT handler"
   commit id: "tests passing"
   checkout main
   branch hotfix/typo
   commit id: "fix README typo"
   checkout main
   merge hotfix/typo
   merge feature/auth id: "PR #42"
   commit id: "bump v1.1.0" tag: "v1.1.0"
```

## Project Planning Mindmap

How to break down a web app project as a Mermaid mindmap. The project sits at the center and indentation alone creates the branches — features, tech stack, and launch tasks. The fastest way to turn a brainstorm into a shareable picture. (Data · https://flowviz.app/examples#project-mindmap)

```mermaid
mindmap
  root((Web App))
    Frontend
      React
      TypeScript
      Tailwind CSS
    Backend
      Node.js
      PostgreSQL
      Redis cache
    DevOps
      Docker
      CI/CD
      Monitoring
    Product
      Design system
      User research
      Analytics
```

## Company Timeline

How to tell a startup’s growth story on a Mermaid timeline: years as sections, milestones as colon-separated events. It stays readable in a README and updates with a single new line per milestone. (Process · https://flowviz.app/examples#timeline)

```mermaid
timeline
    title Company Milestones
    section 2021
        Jan : Founded
        Jun : Seed round \$1.2M
        Dec : First 100 customers
    section 2022
        Mar : Series A \$8M
        Sep : 10k users
    section 2023
        Feb : Product v2 launch
        Nov : Profitable
```

## Priority Matrix

How to plot a feature backlog on an impact-versus-effort quadrant chart. Each feature is one coordinate pair between 0 and 1, and the four named quadrants — quick wins to money pits — do the prioritization talking for you. (Data · https://flowviz.app/examples#quadrant)

```mermaid
quadrantChart
    title Feature Priority Matrix
    x-axis Low Effort --> High Effort
    y-axis Low Impact --> High Impact
    quadrant-1 Quick Wins
    quadrant-2 Major Projects
    quadrant-3 Fill-ins
    quadrant-4 Thankless Tasks
    Dark mode: [0.2, 0.9]
    Mobile app: [0.8, 0.85]
    CSV export: [0.25, 0.6]
    API docs: [0.4, 0.55]
    Refactor DB: [0.9, 0.4]
    Fix typos: [0.15, 0.2]
```

## Cloud Spend Breakdown

How to present a monthly infrastructure budget as a pie chart, split by service category. Values are raw dollars; Mermaid derives the percentages. A drop-in template for cost reviews and FinOps updates. (Data · https://flowviz.app/examples#cloud-spend)

```mermaid
pie title Cloud spend by service
    "Compute" : 42.5
    "Storage" : 18.2
    "Databases" : 16.8
    "Networking" : 12.5
    "Monitoring" : 10.0
```

## Notification System Classes

How to document interface-driven design in a class diagram: a notifier interface with email and SMS channel implementations. Realization arrows show who implements what — a compact pattern for plugin-style architectures. (Data · https://flowviz.app/examples#notification-classes)

```mermaid
classDiagram
    class Notifier {
        <<interface>>
        +send(message: string)
    }
    class EmailNotifier {
        +smtpHost: string
        +send(message: string)
    }
    class SmsNotifier {
        +provider: string
        +send(message: string)
    }
    class NotificationService {
        -notifiers: Notifier[]
        +broadcast(message: string)
    }
    Notifier <|.. EmailNotifier
    Notifier <|.. SmsNotifier
    NotificationService o-- Notifier
```

## Release Branch Flow

How to visualize a release process with gitGraph: a release branch cut from develop, stabilized, merged to main, then patched with a production hotfix. Close enough to git-flow to serve as living documentation for release engineering. (Process · https://flowviz.app/examples#release-flow)

```mermaid
gitGraph
    commit id: "init"
    branch develop
    commit id: "feature-a"
    commit id: "feature-b"
    branch release/1.0
    commit id: "rc1"
    checkout main
    merge release/1.0 tag: "v1.0"
    commit id: "hotfix"
    checkout develop
    merge main
```

## Product Launch Brainstorm

How to organize a product launch as a mindmap, with marketing, engineering, and support workstreams branching from the center and owners hanging off each branch. Indentation is the only syntax you need. (Data · https://flowviz.app/examples#launch-mindmap)

```mermaid
mindmap
  root((Product Launch))
    Marketing
      Landing page
      Email campaign
      Social posts
    Engineering
      Feature freeze
      Load testing
      Rollback plan
    Support
      Docs update
      FAQ
      Training
```

## Platform Release History

How to record version and infrastructure milestones on a Mermaid timeline. Years become sections, each entry pairs a period with its event, and repeated colon-events stack under the same period. Good for changelogs and retrospectives. (Process · https://flowviz.app/examples#platform-history)

```mermaid
timeline
    title Platform releases
    section v1
        2023 Q1 : MVP launch
        2023 Q3 : Mobile app
    section v2
        2024 Q1 : API platform
        2024 Q3 : SSO and audit logs
    section v3
        2025 Q2 : AI assistant
        2025 Q4 : Multi-region
```

## Risk Assessment Matrix

How to build a risk assessment matrix from a quadrant chart: likelihood on one axis, severity on the other, each risk plotted as a coordinate. The named quadrants sort risks into monitor, mitigate, and act-now buckets at a glance. (Data · https://flowviz.app/examples#risk-matrix)

```mermaid
quadrantChart
    title Risk assessment
    x-axis Low Likelihood --> High Likelihood
    y-axis Low Severity --> High Severity
    quadrant-1 Mitigate now
    quadrant-2 Contingency plan
    quadrant-3 Accept
    quadrant-4 Monitor
    Vendor lock-in: [0.3, 0.7]
    Key person risk: [0.6, 0.8]
    Scope creep: [0.8, 0.5]
    Data breach: [0.25, 0.95]
    Budget overrun: [0.55, 0.45]
```

## Signup Funnel Flow

How to render a conversion funnel as a sankey diagram: visitors split into signed-up and bounced, sign-ups into activated and dropped off, activation into paying and free. Each row is source, target, value — the ribbon widths tell the retention story. (Data · https://flowviz.app/examples#signup-funnel)

```mermaid
sankey-beta
Visitors,Signed up,300
Visitors,Bounced,700
Signed up,Activated,180
Signed up,Dropped off,120
Activated,Paying,60
Activated,Free tier,120
```

## Department Budget Flow

How to show how an annual budget divides across departments and programs using a sankey diagram. Reusing a node as the source of later rows chains the flow through stages, so money is visibly conserved from top to bottom. (Data · https://flowviz.app/examples#budget-flow)

```mermaid
sankey-beta
Budget,Engineering,500
Budget,Marketing,250
Budget,Operations,150
Engineering,Headcount,350
Engineering,Infrastructure,150
Marketing,Paid ads,150
Marketing,Events,100
```

## Monthly Revenue Chart

How to chart six months of revenue with Mermaid’s xychart: bar and line series over the same categories, a labeled y-axis with a fixed range, all from a few lines of text. Ideal for embedding lightweight metrics in docs. (Data · https://flowviz.app/examples#monthly-revenue)

```mermaid
xychart-beta
    title "Monthly revenue"
    x-axis [Jan, Feb, Mar, Apr, May, Jun]
    y-axis "Revenue ($k)" 0 --> 120
    bar [42, 55, 61, 74, 88, 105]
    line [42, 55, 61, 74, 88, 105]
```

## API Latency Trend

How to track p95 API latency across releases with a Mermaid line chart. Releases form the x-axis, response times the series — a plain-text alternative to a screenshot from your observability tool. (Data · https://flowviz.app/examples#latency-trend)

```mermaid
xychart-beta
    title "p95 latency by release"
    x-axis [v1.0, v1.1, v1.2, v1.3, v1.4, v1.5]
    y-axis "Latency (ms)" 0 --> 500
    line [420, 380, 310, 340, 260, 190]
```

## Web Service Blocks

How to draw a service topology as a Mermaid block diagram: client, API gateway, cache, and database on an explicit grid. columns and space entries control placement precisely, which regular flowcharts cannot. (Flowchart · https://flowviz.app/examples#service-blocks)

```mermaid
block-beta
columns 3
  Client space:1 API["API Gateway"]
  space:3
  Cache[("Redis")] space:1 DB[("Postgres")]
  Client --> API
  API --> DB
  API --> Cache
```

## CI Pipeline Stages

How to lay out a CI pipeline as a block diagram, from commit through build, test, and deploy stages. Grid placement keeps stages aligned, and arrows between block ids mark the promotion path. (Flowchart · https://flowviz.app/examples#ci-blocks)

```mermaid
block-beta
columns 4
  Commit Build Test Deploy
  Commit --> Build
  Build --> Test
  Test --> Deploy
```

## Web App Architecture

How to describe a deployed web app with Mermaid’s architecture diagram: an API group containing a server, database, and storage, each with a built-in icon, connected edge to edge. A lightweight cloud diagram without a drawing tool. (Flowchart · https://flowviz.app/examples#web-infra)

```mermaid
architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:db
```

## Edge Delivery Architecture

How to model edge delivery in an architecture diagram: an internet-facing gateway in front of an application group. Side-anchored connections (L, R, T, B) keep the topology tidy as it grows. (Flowchart · https://flowviz.app/examples#edge-infra)

```mermaid
architecture-beta
    group app(cloud)[App]

    service gateway(internet)[Gateway]
    service web(server)[Web Server] in app
    service store(database)[Session Store] in app

    gateway:R -- L:web
    web:R -- L:store
```

## Checkout Journey

How to score an online checkout as a Mermaid user journey. Each step carries a 1–5 experience score and an actor, and Mermaid colors the low points — instantly showing where shoppers feel friction. (Process · https://flowviz.app/examples#checkout-journey)

```mermaid
journey
    title Checkout experience
    section Browse
      Find product: 5: Shopper
      Compare prices: 3: Shopper
    section Purchase
      Add to cart: 4: Shopper
      Enter payment: 2: Shopper
      Confirm order: 5: Shopper, Support
```

## Onboarding Journey

How to map new-user onboarding from invite email to first success moment as a user journey diagram. Scores expose the rough steps, sections group the phases, and the diagram doubles as a UX review agenda. (Process · https://flowviz.app/examples#onboarding-journey)

```mermaid
journey
    title First-week onboarding
    section Day 1
      Open invite: 4: User
      Create account: 3: User
      Setup wizard: 2: User, Support
    section Week 1
      Invite teammates: 4: User
      First report: 5: User
```

## Auth Requirements Model

How to link security requirements to the system that satisfies them using a requirement diagram. Each requirement block records risk and verification method, and satisfies relations connect the auth service to its obligations — SysML in plain text. (Process · https://flowviz.app/examples#auth-requirements)

```mermaid
requirementDiagram

    requirement login_req {
    id: 1
    text: Users must authenticate before accessing data.
    risk: high
    verifymethod: test
    }

    requirement session_req {
    id: 2
    text: Sessions expire after 30 minutes idle.
    risk: medium
    verifymethod: analysis
    }

    element auth_service {
    type: service
    }

    auth_service - satisfies -> login_req
    auth_service - satisfies -> session_req
```

## Banking System Context

How to draw a C4 system-context diagram for a banking system: the customer, the internet banking system, and an external e-mail system, connected with labeled Rel relations. The standard first diagram for architecture documentation. (Flowchart · https://flowviz.app/examples#banking-c4)

```mermaid
C4Context
    title Internet banking - system context
    Person(customer, "Customer", "A customer of the bank")
    System(banking, "Internet Banking", "Lets customers view accounts")
    System_Ext(mail, "E-mail System", "Sends notifications")
    Rel(customer, banking, "Uses")
    Rel(banking, mail, "Sends e-mails", "SMTP")
```

## Sprint Kanban Board

How to snapshot sprint status as a Mermaid kanban board. Columns are top-level entries, cards are indented beneath them, and moving a card is a one-line edit — the whole board lives in a text block. (Process · https://flowviz.app/examples#sprint-kanban)

```mermaid
kanban
  todo[Todo]
    t1[Write API spec]
    t2[Design schema]
  doing[In progress]
    t3[Build endpoints]
    t4[Auth middleware]
  review[In review]
    t5[Rate limiting]
  done[Done]
    t6[Project setup]
```

## Team Skills Radar

How to compare team members across five skill axes with a radar chart. Each person is a curve, values follow the axis declaration order, and min/max pin the scale so the shapes are honestly comparable. (Data · https://flowviz.app/examples#skills-radar)

```mermaid
radar-beta
  title Team skills
  axis c["Coding"], d["Design"], o["Ops"]
  axis p["Product"], m["Marketing"]
  curve alice["Alice"]{80, 60, 70, 55, 40}
  curve bob["Bob"]{55, 85, 45, 75, 70}
  max 100
  min 0
```

## TCP Header Layout

How to document the first 96 bits of a TCP header with a packet diagram. Each field is a bit range plus a name, rows wrap at 32 bits automatically, and the output looks like it came straight from an RFC. (Data · https://flowviz.app/examples#tcp-packet)

```mermaid
packet-beta
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"
```