mcpField
D
diagram-generator

diagram-generator

github.com/camoa开发3339 次安装1 天前更新
代码仓库

关于 diagram-generator

用于创建 Mermaid 图表以呈现软件架构及相关结构的技能。它会收集必要元素、生成图表代码,并在获得确认后再建议写入架构文件。

主要功能

  1. 01创建五类 Mermaid 图表
  2. 02通过提问收集图表元素
  3. 03展示图表代码供审阅
  4. 04将获批图表加入架构文件

适用场景

  1. 01梳理系统中的数据流
  2. 02记录服务依赖关系
  3. 03呈现数据库实体及其关系
  4. 04说明交互顺序或状态变化

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/camoa/claude-skills --skill diagram-generator

安装后在 Claude Code 中输入/diagram-generator确认已加载。

详细介绍

图表生成器

创建用于架构可视化的 Mermaid 图表。

激活条件

检测到以下请求时激活:

  • “为 X 创建图表”
  • “可视化架构”
  • “展示数据流”
  • “绘制实体关系”

工作流

1. 确定图表类型

如不明确,请询问:

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)
2. 收集元素

根据类型询问:

数据流:

  • 起点是什么?
  • 处理步骤有哪些?
  • 最终目的地是什么?

服务关系:

  • 主服务是什么?
  • 它依赖什么?
  • 是否有事件订阅者?

实体关系:

  • 涉及哪些实体?
  • 它们之间是什么关系(一对多等)?
3. 生成图表

创建合适的 Mermaid 代码:

数据流:

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

服务依赖:

graph TD
    A[MainService] --> B[Dependency1]
    A --> C[Dependency2]

实体关系:

erDiagram
    ENTITY1 ||--o{ ENTITY2 : has
    ENTITY1 ||--|| ENTITY3 : references

序列:

sequenceDiagram
    Actor->>Component: Action
    Component-->>Actor: Response

状态:

stateDiagram-v2
    [*] --> State1
    State1 --> State2
    State2 --> [*]
4. 展示图表

向用户展示 Mermaid 代码并询问:

Here's the diagram:

{mermaid code block}

Adjustments needed? (describe changes or "looks good")
5. 添加到架构中

获批后,使用 Edit 工具将其添加到合适的架构文件中:

## {Diagram Title}

{One sentence describing what this shows}

\`\`\`mermaid
{diagram code}
\`\`\`

图表模板

Drupal 请求流
flowchart LR
    A[Request] --> B[Routing]
    B --> C[Controller]
    C --> D[Service]
    D --> E[Entity]
    E --> F[Response]
插件系统
graph TD
    A[PluginManager] --> B[Discovery]
    A --> C[Factory]
    B --> D[Annotations]
    B --> E[YAML]
    C --> F[Plugin Instance]
表单提交流
sequenceDiagram
    User->>Form: Submit
    Form->>Form: validateForm()
    Form->>Form: submitForm()
    Form->>Service: Process data
    Service-->>Form: Result
    Form-->>User: Redirect/Message

停止点

停止并等待用户:

  • 询问图表类型后
  • 展示生成的图表后
  • 添加到架构文件之前

评论

支持 Markdown