graph TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Process]
  B -->|No| D[End]
  C --> D

graph LR
  A --> B --> C

graph TD
  A[Rectangle Node]

graph TD
  A(Rounded Rectangle)

graph TD
  A([Stadium Shape])

graph TD
  A{Decision Diamond}

graph TD
  A{{Hexagon Node}}

graph TD
  A[/Parallelogram/]

graph TD
  A[/Trapezoid\]

graph TD
  A[\Inverse Trapezoid/]

graph TD
  A((Circle))

graph TD
  A(((Double Circle)))

graph TD
  A[(Database)]

graph TD
  A[[Subroutine]]

graph TD
  A>Flag Shape]

graph LR
  A --> B     %% Standard arrow
  C --- D     %% Line without arrow
  E -.-> F    %% Dotted arrow
  G ==> H     %% Thick arrow
  I --o J     %% Circle end
  K --x L     %% Cross end
  M <--> N    %% Bidirectional

graph LR
  A -->|label| B
  C -- text --> D
  E -.->|dotted label| F

graph LR
  A -----> B      %% Longer arrow
  C ======> D     %% Longer thick
  E -.....-> F    %% Longer dotted

graph TB
  subgraph Frontend
    A[React App]
    B[Components]
  end

  subgraph Backend
    C[API Server]
    D[Database]
  end

  A --> C
  B --> A
  C --> D

graph TB
  subgraph Cloud
    subgraph Region1
      A[Server A]
    end
    subgraph Region2
      B[Server B]
    end
  end
  A <--> B

graph LR
  subgraph sub1[Left to Right]
    direction LR
    A --> B
  end
  subgraph sub2[Top to Bottom]
    direction TB
    C --> D
  end

stateDiagram-v2
  [*] --> Idle
  Idle --> Processing: start
  Processing --> Complete: done
  Processing --> Error: fail
  Error --> Idle: retry
  Complete --> [*]

stateDiagram-v2
  state "Waiting for input" as Waiting
  state "Processing request" as Processing

  [*] --> Waiting
  Waiting --> Processing: submit
  Processing --> Waiting: complete

stateDiagram-v2
  [*] --> Active

  state Active {
    [*] --> Idle
    Idle --> Running: start
    Running --> Idle: stop
  }

  Active --> [*]: shutdown

stateDiagram-v2
  [*] --> fork_state
  fork_state --> State2
  fork_state --> State3

  state fork_state <<fork>>

  State2 --> join_state
  State3 --> join_state

  state join_state <<join>>

  join_state --> State4
  State4 --> [*]

graph TD
  A[Critical]:::critical --> B[Warning]:::warning --> C[Success]:::success

  classDef critical fill:#ff6b6b,stroke:#c92a2a,color:white
  classDef warning fill:#ffd93d,stroke:#f59f00,color:black
  classDef success fill:#69db7c,stroke:#2f9e44,color:white

graph LR
  A --> B --> C
  linkStyle 0 stroke:red,stroke-width:2px
  linkStyle 1 stroke:blue,stroke-dasharray:5

graph TD
  Start[Start] --> Q1{Is it working?}
  Q1 -->|Yes| Done[Great!]
  Q1 -->|No| Q2{Did you try turning it off and on?}
  Q2 -->|Yes| Q3{Is it plugged in?}
  Q2 -->|No| TryRestart[Try restarting]
  TryRestart --> Q1
  Q3 -->|Yes| CallSupport[Call support]
  Q3 -->|No| PlugIn[Plug it in]
  PlugIn --> Q1

graph LR
  Landing[Landing Page] --> Login{Logged in?}
  Login -->|Yes| Dashboard[Dashboard]
  Login -->|No| Auth[Login/Signup]
  Auth --> Dashboard
  Dashboard --> Profile[Profile]
  Dashboard --> Settings[Settings]
  Dashboard --> Logout[Logout]
  Logout --> Landing

graph TB
  subgraph Client
    Browser[Browser]
    Mobile[Mobile App]
  end

  subgraph LoadBalancer
    LB[Nginx]
  end

  subgraph Services
    API[API Server]
    Auth[Auth Service]
    Cache[(Redis)]
  end

  subgraph Data
    DB[(PostgreSQL)]
    S3[S3 Storage]
  end

  Browser --> LB
  Mobile --> LB
  LB --> API
  API --> Auth
  API --> Cache
  API --> DB
  API --> S3

import { renderMermaid, THEMES } from 'beautiful-mermaid'

const flowchart = `
graph TD
  A[Start] --> B{Check}
  B -->|Pass| C[Continue]
  B -->|Fail| D[Retry]
  D --> B
  C --> E[End]
`

// SVG output
const svg = await renderMermaid(flowchart, THEMES['tokyo-night'])

// ASCII output
import { renderMermaidAscii } from 'beautiful-mermaid'
const ascii = renderMermaidAscii(flowchart)