Start with a proven structure

flowchart LR
  Idea[Idea] --> Validate{Customer problem?}
  Validate -- No --> Archive[Backlog]
  Validate -- Yes --> Prototype[Prototype]
  Prototype --> Test{Validation passed?}
  Test -- Revise --> Prototype
  Test -- Success --> Launch[Launch]

flowchart TD
  Alert[Alert Occurs] --> Triage{Severity Triage}
  Triage --> Owner[Owner Assign]
  Owner --> Mitigate[Impact Mitigation]
  Mitigate --> Resolve[Root Cause Resolve]
  Resolve --> Review[Post-incident Retrospective]

sequenceDiagram
  actor User
  participant Web
  participant Clerk
  participant API
  User->>Web: Save project
  Web->>Clerk: getToken()
  Clerk-->>Web: Session JWT
  Web->>API: PATCH /projects/:id
  Note over Web,API: Authorization: Bearer JWT
  API-->>Web: Save result

sequenceDiagram
  actor User
  participant App
  participant Billing
  User->>App: Plan Select
  App->>Billing: Checkout Start
  Billing-->>User: Payment Screen
  User->>Billing: Payment complete
  Billing-->>App: Subscription Renewal
  App-->>User: Paid Features Enable

classDiagram
  class Project {
    +String id
    +String ownerId
    +String code
    +save()
    +publish()
  }
  class Revision {
    +String id
    +String code
    +restore()
  }
  class FeatureUsage {
    +String feature
    +Int count
    +consume()
  }
  Project "1" --> "*" Revision
  Project "*" --> "1" FeatureUsage

erDiagram
  USER ||--o{ PROJECT : owns
  PROJECT ||--o{ REVISION : keeps
  USER ||--o{ FEATURE_USAGE : consumes
  PROJECT {
    string id PK
    string ownerId
    string title
    boolean isPublic
  }
  REVISION {
    string id PK
    string projectId FK
    string code
  }

stateDiagram-v2
  [*] --> Draft
  Draft --> Saved
  Saved --> Public: Sharing On
  Public --> Saved: Sharing Off
  Saved --> Archived
  Archived --> Saved: Restore
  Archived --> [*]: Delete

mindmap
  root((New Service))
    User
      Individual
      Team
    Core value
      Fast authoring
      Easy sharing
    Features
      Editor
      Templates
      Projects
    Success metrics
      Active User
      Saved Projects

gantt
  title Product launch Roadmap
  dateFormat YYYY-MM-DD
  section Design
  User flow :done, ux, 2026-07-28, 2d
  Data model :done, db, after ux, 1d
  section Development
  Live editor :active, editor, after db, 4d
  Save project :project, after editor, 3d
  section Launch
  QA :qa, after project, 2d
  Public :milestone, launch, after qa, 0d

C4Context
  title Mermaid Platform Context
  Person(user, "User", "Diagram author")
  System(web, "Web App", "Public Editor and Dashboard")
  System(api, "API", "Project storage and sharing")
  System_Ext(auth, "Clerk", "Authentication")
  Rel(user, web, "Use")
  Rel(web, api, "HTTPS/JSON")
  Rel(web, auth, "Sign in")

stateDiagram-v2
  [*] --> Created
  Created --> Paid: Payment Success
  Created --> Cancelled: Cancel
  Paid --> Shipping: Fulfillment
  Shipping --> Delivered: Fulfillment Done
  Paid --> Refunded: Refund
  Delivered --> [*]
  Cancelled --> [*]
  Refunded --> [*]

flowchart LR
  Visit[Visit service] --> Try[Guest Edit]
  Try --> Value{Value moment}
  Value -- Yes --> SignUp[Sign up]
  Value -- No --> Template[Other Templates]
  Template --> Try
  SignUp --> Save[Save first project]
  Save --> Share[Share with team]

journey
  title Mermaid Studio Onboarding
  section Start
    Visit service: 4: User
    Example Check: 5: User
    Write first code: 4: User
  section Success
    Save project: 5: User
    Share with team: 5: User

pie title Feature usage share
  "Editor" : 42
  "Templates" : 28
  "AI generation" : 20
  "Sharing" : 10

quadrantChart
  title Feature priority
  x-axis Low impact --> High impact
  y-axis Low effort --> High effort
  quadrant-1 Quick wins
  quadrant-2 Strategic work
  quadrant-3 Backlog
  quadrant-4 Needs review
  Templates: [0.75, 0.65]
  AI generation: [0.85, 0.8]
  Comments: [0.45, 0.35]

requirementDiagram
  requirement secure_session {
    id: AUTH-01
    text: Session tokens must be used for protected API requests
    risk: high
    verifymethod: test
  }
  element api_guard {
    type: software
  }
  api_guard - satisfies -> secure_session

gitGraph
  commit id: "initial"
  branch develop
  checkout develop
  commit id: "feature"
  checkout main
  merge develop
  commit id: "release"

timeline
  title Mermaid Studio Milestones
  2026 Q1 : Editor Launch
  2026 Q2 : Save project
           : Public link
  2026 Q3 : AI Diagram

zenuml
  title Payment Approve Flow
  User->App: Start payment
  App->Payment.authorize() {
    Payment->Bank: Approve Request
    Bank->Payment: Approve Result
  }
  Payment->App: Payment complete

sankey
  Product Budget,Development,120
  Product Budget,Design,40
  Development,Editor,70
  Development,AI Features,50
  Design,Research,15
  Design,UI Improvements,25

xychart-beta
  title "Monthly projects"
  x-axis [1Month, 2Month, 3Month, 4Month]
  y-axis "Projects" 0 --> 100
  bar [20, 35, 58, 82]
  line [20, 35, 58, 82]

block
  columns 3
  Web["Web"] API["API"] DB[("Database")]
  Web --> API
  API --> DB

packet
  +4: "Version"
  +4: "IHL"
  +8: "Service"
  +16: "Total Length"
  +32: "Payload"

kanban
  todo[Todo]
    research[Requirements research]
  doing[In Progress]
    build[Build feature]
  done[Done]
    release[Prepare release]

architecture-beta
  service internet(internet)[Internet]
  group cloud(cloud)[Cloud]
  service api(server)[API] in cloud
  service db(database)[Database] in cloud
  internet:R -- L:api
  api:R -- L:db

radar-beta
  title Diagram tool comparison
  axis speed["Speed"], clarity["Clarity"], cost["Cost"]
  curve mermaid["Mermaid"]{5, 4, 4}
  curve other["Other"]{4, 5, 3}
  max 5

treemap-beta
  "Product investment"
    "Editor": 40
    "Sharing": 25
    "AI": 35

xychart-beta
  title "Monthly Revenue"
  x-axis [1Month, 2Month, 3Month, 4Month]
  y-axis "Revenue" 0 --> 100
  bar [20, 35, 58, 82]

xychart-beta
  title "Monthly active users"
  x-axis [1Month, 2Month, 3Month, 4Month]
  y-axis "User" 0 --> 100
  line [20, 38, 52, 78]