Skip to content
flowss
Start freeChecking your session

Diagram as code

Mermaid editor online

Write Mermaid source and see the diagram change in flowss's Studio. Start from a sequence diagram, flowchart or another Mermaid template, then keep the text alongside the picture so the next edit is straightforward. Rendering Mermaid source does not require AI.

Open the editable example Explore the example

From starting point to finished diagram

  1. Open the Mermaid example

    Use the template below to open a new Studio figure, or paste existing Mermaid source through the launchpad's Paste code door.

  2. Edit the source and inspect the preview

    Change participant names and message labels in the code sheet. Keep syntax errors separate from design questions: a diagram that renders still needs a human review.

  3. Save or export your diagram

    Keep the editable source with your project. Use the export menu for the formats available to your account; the export guide explains format and plan limits.

Mermaid · Editable template

Example: a login request across four participants

This editable sequence diagram follows a user, web app, REST API and database. It is an illustration of messages between components, not a complete authentication design.

  • Rename a participant to match your system; its messages keep the same participant identifier.
  • Add an alternative branch for a rejected login, then check that the arrows and labels tell the same story as your implementation.
Rendering…
Sequence Diagram. View the template and related examples.
Read and copy the editable source
sequenceDiagram
    autonumber
    actor User
    participant Web as Web App
    participant API as REST API
    participant DB as Database
    User->>Web: Submit login form
    Web->>API: POST /auth/login
    API->>DB: SELECT user WHERE email=?
    DB-->>API: user row
    API-->>Web: 200 + JWT
    Web-->>User: Redirect to dashboard
    Note over API,DB: Password hashed with Argon2id
Edit in Studio Mermaid syntax reference

Choose the notation for the question

Use a sequence diagram when order and responses matter. Use a flowchart for decisions and branches, or an entity-relationship diagram for tables and relationships. A change of diagram type often needs different source syntax, not just a different layout.

Keep the source useful

Prefer stable identifiers and readable labels. Split a large diagram into a few views with clear boundaries, so a reviewer can trace one interaction without decoding an entire system.

Before you start

Access and limits

  • Opening the Studio requires an account. Free includes the Studio and keeps up to 3 saved figures in it and 3 cloud Library projects.
  • Manual Mermaid editing and rendering work without AI. AI-assisted generation or editing follows the separate AI plan limits.
  • AI needs your own provider key on Starter or above, or hosted AI points on Plus and above. Free includes no AI. Provider charges and usage limits apply.
Compare plans