mermaid（Mermaid 图表绘制）

Mermaid Graph Generation

Basic Syntax

Use triple backticks with 'mermaid' language specifier:

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

Principles

• Prefer clear, concise diagrams that explain the core concept
• Use different node shapes and colors to distinguish different types of elements
• Ensure readability by using meaningful node labels
• Use subgraphs or clusters to show hierarchical or grouped relationships

Node Shapes

Supported Diagram Types

Flowchart

graph LR
  A[Input] --> B[Process] --> C[Output]

Sequence Diagram

sequenceDiagram
  participant A as Client
  participant B as Server
  A->>B: Request
  B-->>A: Response

Class Diagram

classDiagram
  class User {
    +String name
    +login()
  }

State Diagram

stateDiagram-v2
  [*] --> Idle
  Idle --> Processing
  Processing --> Done
  Done --> [*]

Styling

graph TD
  A[Node]:::highlight --> B[Node]
  classDef highlight fill:#f9f,stroke:#333,stroke-width:2px

Subgraphs

graph TD
  subgraph Frontend
    A[React] --> B[Components]
  end
  subgraph Backend
    C[API] --> D[Database]
  end
  B --> C