FREE TOOL

Mermaid Live Editor

Draw diagrams here - connect GitHub when you want Moxie to generate them from your repo.

Live preview, instant SVG/PNG export, and shareable links in your browser. When you connect a repository, Moxie generates architecture diagrams from source and refreshes them on every merge.

Prefer SQL? Generate an ER diagram from CREATE TABLE
LIVE EDITOR
Source
Snippets:
Preview
150%
Start typing to render a diagram.
Diagrams render entirely in your browser. Nothing is sent to any server.

Tip: Edit the left side and the preview updates live. Use the snippet buttons or load an example. Share the URL to collaborate.

Tired of manually maintaining diagrams for your codebase? Export free above · connect a repo when you want Moxie to keep it accurate

See how Moxie keeps docs currentStart 14-day trial
Live preview

See every change rendered instantly. No save button, no reloads.

Export anywhere

Download clean SVG or high-resolution PNG with one click. Perfect for docs, slides, and wikis.

Shareable links

Your diagram lives in the URL. Send the link and others see exactly what you built.

Private by design

Everything runs in your browser. Diagrams never leave your device.

Common Mermaid use cases

Architecture & system design

Flowcharts and C4-style diagrams that explain how services connect.

API & data flows

Sequence diagrams for request lifecycles and integration points.

Data models & schemas

ER diagrams and class diagrams for your domain model and database.

Roadmaps & timelines

Gantt charts and mindmaps for planning and onboarding.

How to write Mermaid syntax

Mermaid lets you declare diagrams using plain text. Here are four essential diagram patterns you can copy and edit directly:

1. Flowcharts (`flowchart`)

Best for user journeys, decision trees, and system architectures.

flowchart TD
    A[User Request] --> B{Is Authenticated?}
    B -->|Yes| C[Process Order]
    B -->|No| D[Redirect to Login]
    C --> E[Send Confirmation Email]

2. Sequence Diagrams (`sequenceDiagram`)

Best for request/response cycles between client, API, and database services.

sequenceDiagram
    autonumber
    Client->>API: POST /v1/auth/login
    API->>Database: Validate user credentials
    Database-->>API: User record + hashed secret
    API-->>Client: 200 OK (JWT Token)

3. Entity Relationship Diagrams (`erDiagram`)

Best for database schemas, primary/foreign keys, and data relationships.

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER {
        string id PK
        string email
    }

4. Class Diagrams (`classDiagram`)

Best for object-oriented design, TypeScript interfaces, and domain models.

classDiagram
    class User {
      +String id
      +String email
      +login()
    }
    class Workspace {
      +String name
      +addMember()
    }
    User "1" -- "*" Workspace : owns

Frequently asked questions

For teams that document code

Tired of manually maintaining diagrams for your codebase?

Draw and export diagrams here. Connect GitHub when you want Moxie to generate architecture diagrams and searchable docs from your repository and refresh them on every merge.

See how Moxie keeps docs currentStart 14-day trial

Export free above · connect a repo when you want Moxie to keep it accurate