Back to Details

diagram-generator

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Diagram Generator

图表生成工具

Create Mermaid diagrams for architecture visualization.
创建用于架构可视化的Mermaid图表。

Activation

触发条件

Activate when you detect:
  • "Create diagram for X"
  • "Visualize the architecture"
  • "Show me the data flow"
  • "Draw the entity relationships"
当检测到以下需求时触发：
  • “为X创建图表”
  • “可视化架构”
  • “展示数据流”
  • “绘制实体关系”

Workflow

工作流程

1. Determine Diagram Type

1. 确定图表类型

Ask if unclear:
What should this diagram show?
1. Data flow (how data moves through system)
2. Service relationships (dependencies between services)
3. Entity relationships (database structure)
4. Sequence (interaction over time)
5. State (entity lifecycle)
若不确定则询问：
这个图表需要展示什么内容？
1. 数据流（数据在系统中的流转方式）
2. 服务关系（服务之间的依赖）
3. 实体关系（数据库结构）
4. 时序图（随时间的交互过程）
5. 状态图（实体的生命周期）

2. Gather Elements

2. 收集元素

Based on type, ask:
Data Flow:
  • What is the starting point?
  • What are the processing steps?
  • What is the final destination?
Service Relationships:
  • What is the main service?
  • What does it depend on?
  • Are there event subscribers?
Entity Relationships:
  • What entities are involved?
  • What are the relationships (one-to-many, etc.)?
根据图表类型，询问以下信息：
数据流：
  • 起点是什么？
  • 有哪些处理步骤？
  • 最终目的地是什么？
服务关系：
  • 主服务是什么？
  • 它依赖哪些服务？
  • 是否有事件订阅者？
实体关系：
  • 涉及哪些实体？
  • 实体间的关系是什么（如一对多等）？

3. Generate Diagram

3. 生成图表

Create appropriate Mermaid code:
Data Flow:
mermaid
flowchart LR
    A[Input] --> B[Process]
    B --> C[Output]
Service Dependencies:
mermaid
graph TD
    A[MainService] --> B[Dependency1]
    A --> C[Dependency2]
Entity Relationships:
mermaid
erDiagram
    ENTITY1 ||--o{ ENTITY2 : has
    ENTITY1 ||--|| ENTITY3 : references
Sequence:
mermaid
sequenceDiagram
    Actor->>Component: Action
    Component-->>Actor: Response
State:
mermaid
stateDiagram-v2
    [*] --> State1
    State1 --> State2
    State2 --> [*]
生成对应的Mermaid代码：
数据流：
mermaid
flowchart LR
    A[Input] --> B[Process]
    B --> C[Output]
服务依赖：
mermaid
graph TD
    A[MainService] --> B[Dependency1]
    A --> C[Dependency2]
实体关系：
mermaid
erDiagram
    ENTITY1 ||--o{ ENTITY2 : has
    ENTITY1 ||--|| ENTITY3 : references
时序图：
mermaid
sequenceDiagram
    Actor->>Component: Action
    Component-->>Actor: Response
状态图：
mermaid
stateDiagram-v2
    [*] --> State1
    State1 --> State2
    State2 --> [*]

4. Present Diagram

4. 展示图表

Show the Mermaid code to user and ask:
Here's the diagram:

{mermaid code block}

Adjustments needed? (describe changes or "looks good")
向用户展示Mermaid代码并询问：
这是生成的图表：

{mermaid code block}

需要调整吗？（描述修改内容或回复“看起来没问题”）

5. Add to Architecture

5. 添加到架构文档

Once approved, use 
Edit
tool to add to appropriate architecture file:
markdown
undefined
经用户确认后，使用
Edit
工具将图表添加到对应的架构文件中：
markdown
undefined

{Diagram Title}

{图表标题}

{One sentence describing what this shows}
```mermaid {diagram code} ```
undefined
{一句话描述图表内容}
mermaid
{diagram code}
undefined

Diagram Templates

图表模板

Drupal Request Flow

Drupal 请求流程

mermaid
flowchart LR
    A[Request] --> B[Routing]
    B --> C[Controller]
    C --> D[Service]
    D --> E[Entity]
    E --> F[Response]
mermaid
flowchart LR
    A[Request] --> B[Routing]
    B --> C[Controller]
    C --> D[Service]
    D --> E[Entity]
    E --> F[Response]

Plugin System

插件系统

mermaid
graph TD
    A[PluginManager] --> B[Discovery]
    A --> C[Factory]
    B --> D[Annotations]
    B --> E[YAML]
    C --> F[Plugin Instance]
mermaid
graph TD
    A[PluginManager] --> B[Discovery]
    A --> C[Factory]
    B --> D[Annotations]
    B --> E[YAML]
    C --> F[Plugin Instance]

Form Submit Flow

表单提交流程

mermaid
sequenceDiagram
    User->>Form: Submit
    Form->>Form: validateForm()
    Form->>Form: submitForm()
    Form->>Service: Process data
    Service-->>Form: Result
    Form-->>User: Redirect/Message
mermaid
sequenceDiagram
    User->>Form: Submit
    Form->>Form: validateForm()
    Form->>Form: submitForm()
    Form->>Service: Process data
    Service-->>Form: Result
    Form-->>User: Redirect/Message

Stop Points

暂停节点

STOP and wait for user:
  • After asking diagram type
  • After showing generated diagram
  • Before adding to architecture file
暂停并等待用户输入：
  • 询问图表类型之后
  • 展示生成的图表之后
  • 添加到架构文件之前