shield_lock
金大哥
← 返回 Skill 列表
extension
分类: 开发与工程无需 API Key

diagram-prompter

分析代码库结构并生成各种架构图、流程图、时序图等的 AI 绘图提示词。使用场景：当用户需要为任何代码项目生成可视化图表时，包括系统架构图、模块依赖关系、数据流图、时序图、状态机图、部署架构图等。支持多种图表类型如 Mermaid、PlantUML、C4 模型、UML 类图、ER 图等。适用于技术文档编写、架构设计、代码评审、学习理解新项目等场景。

person作者: jakexiaohubgithub
open_in_new仓库download下载资源包

代码库图表提示词生成器

分析任意代码库的结构，生成适用于 AI 绘图模型的提示词，用于创建各种技术架构图表。

工作流程

第一步：收集代码库信息

首先需要了解代码库的基本结构：

# 查看目录结构
find . -type f -name "*.py" -o -name "*.ts" -o -name "*.tsx" -o -name "*.js" -o -name "*.go" -o -name "*.java" | head -50

# 查看项目配置文件
cat package.json 2>/dev/null || cat pyproject.toml 2>/dev/null || cat go.mod 2>/dev/null || cat pom.xml 2>/dev/null

# 查看目录树
tree -L 3 -I 'node_modules|__pycache__|.next|.git|dist|build' --dirsfirst

第二步：分析代码结构

根据项目类型选择分析策略：

Python 项目：分析 *.py 文件、pyproject.toml、requirements.txt

JavaScript/TypeScript：分析 src/ 目录、package.json、tsconfig.json

Go 项目：分析 go.mod、internal/、pkg/ 目录结构

Java 项目：分析 pom.xml、src/main/java/ 结构

多语言项目：分别分析各语言目录

第三步：选择图表类型

根据用户需求选择合适的图表类型：

| 图表类型 | 适用场景 | 推荐语法 | |---------|---------|----------| | 系统架构图 | 整体系统结构、模块划分 | Mermaid graph | | 组件依赖图 | 模块间依赖关系 | Mermaid graph | | 数据流图 | 数据在系统中的流动 | Mermaid flowchart | | 时序图 | 组件间交互顺序 | Mermaid sequence | | 类图 | 类/接口结构关系 | Mermaid class / PlantUML | | 状态机图 | 状态转换逻辑 | Mermaid state | | 部署图 | 部署架构、容器编排 | Mermaid | | ER 图 | 数据库表关系 | Mermaid erDiagram |

第四步：生成提示词模板

根据分析结果和选择的图表类型，生成结构化的提示词。

提示词生成模板

系统架构图提示词

请为以下代码项目生成一个系统架构图的 Mermaid 提示词：

项目名称：[项目名]
项目类型：[Web应用/后端API/桌面应用/移动应用/微服务]
主要功能：[核心功能描述]

技术栈：
- 前端：[框架、语言]
- 后端：[框架、语言]
- 数据库：[类型]
- 中间件：[消息队列、缓存等]
- 外部服务：[第三方API]

核心模块：
1. [模块A] - 功能描述
2. [模块B] - 功能描述
3. [模块C] - 功能描述

请生成一个清晰的系统架构图 Mermaid 提示词，要求：
- 使用 graph LR（从左到右）或 graph TB（从上到下）布局
- 按层级展示主要组件
- 用不同颜色区分前端/后端/数据库/外部服务
- 标注主要数据流向
- 样式专业、配色协调

数据流图提示词

请为以下数据流生成 Mermaid flowchart 提示词：

数据流起点：[数据来源]
数据流终点：[最终输出/展示]

处理步骤：
1. [步骤1] - [处理说明]
2. [步骤2] - [处理说明]
3. [步骤3] - [处理说明]

关键数据实体：
- [实体1]：[字段说明]
- [实体2]：[字段说明]

请生成一个数据流图 Mermaid 提示词，要求：
- 使用 flowchart TD（从上到下）或 LR（从左到右）
- 清晰标注每个处理步骤
- 用不同形状区分操作/决策/数据
- 标注关键数据转换
- 添加错误处理分支（如有）

时序图提示词

请为以下交互流程生成 Mermaid sequence diagram 提示词：

参与者：
1. [角色A] - [职责描述]
2. [角色B] - [职责描述]
3. [角色C] - [职责描述]

交互流程：
1. [角色A] → [角色B]：[操作1，包含参数]
2. [角色B] → [角色C]：[操作2]
3. [角色C] → [角色A]：[返回结果]

异步操作：
- [异步操作1]：超时时间、重试策略
- [异步操作2]：超时时间、重试策略

请生成一个时序图 Mermaid 提示词，要求：
- 明确定义所有参与者
- 按时间顺序展示交互
- 标注请求/响应参数
- 处理异步调用和超时
- 使用 box 声明循环或可选操作

类图提示词

请为以下代码结构生成 Mermaid class diagram 提示词：

核心类/接口：
1. [类A] - 属性：[属性列表]，方法：[方法列表]
2. [类B] - 属性：[属性列表]，方法：[方法列表]
3. [类C] - 属性：[属性列表]，方法：[方法列表]

关系：
- [类A] → [类B]：[关系类型，如继承、依赖、关联]
- [类B] ← [类C]：[关系类型]

设计模式：
- 使用的设计模式：[如单例、工厂、观察者等]

请生成一个类图 Mermaid 提示词，要求：
- 使用 class diagram 语法
- 明确标注类名、属性、方法
- 标注可见性（public/private/protected）
- 展示继承、实现、依赖、关联关系
- 标注基数和多重度

状态机图提示词

请为以下状态逻辑生成 Mermaid state diagram 提示词：

系统/模块：[名称]
状态列表：
- [状态1]：[状态描述]
- [状态2]：[状态描述]
- [状态3]：[状态描述]

转换条件：
- [状态1] → [状态2]：触发事件、条件
- [状态2] → [状态3]：触发事件、条件
- [状态3] → [状态1]：触发事件、条件

初始状态：[状态名]
终止状态：[状态名，如有]

请生成一个状态机图 Mermaid 提示词，要求：
- 使用 stateDiagram-v2 语法
- 明确标注所有状态
- 标注状态转换条件和事件
- 处理并发状态
- 标注复合状态（如有）

部署架构图提示词

请为以下部署架构生成 Mermaid 提示词：

部署环境：[开发/测试/生产环境]
基础设施：[云服务商、区域]

容器/服务：
1. [服务1] - [资源配置、端口、环境变量]
2. [服务2] - [资源配置、端口、环境变量]
3. [服务3] - [资源配置、端口、环境变量]

数据存储：
- [数据库1]：[类型、版本、存储大小]
- [缓存]：[类型、容量]
- [对象存储]：[桶名、用途]

网络：
- [负载均衡器]：[算法、健康检查]
- [网关/代理]：[类型、配置]

外部依赖：
- [第三方API1]：[用途、认证方式]
- [第三方API2]：[用途、认证方式]

请生成一个部署架构图 Mermaid 提示词，要求：
- 使用 graph 或 subgraph 组织层次
- 标注服务和端口
- 展示网络连接关系
- 标注数据持久化策略
- 用不同图标或颜色区分服务类型

C4 模型图提示词

请为以下系统生成 C4 模型图的 Mermaid 提示词（使用 Structurizr 扩展）：

系统上下文 - System Context：
- 系统：[系统名称]
- 用户：[用户类型1、用户类型2]
- 外部系统：[外部系统1、外部2]

容器 - Container：
- [应用容器]：[技术栈、职责]
- [数据库容器]：[类型、版本]
- [缓存容器]：[类型、容量]
- [消息队列]：[类型、用途]

组件 - Component：
- [组件列表及其职责]

请生成 C4 模型图提示词，要求：
- 从 Context 到 Container 到 Component 逐层展开
- 明确标注容器和组件的职责
- 展示容器间的通信方式
- 使用 Structurizr 语法

通用提示词框架

框架模板

请为一个[图表类型]生成 AI 绘图提示词，使用 [Mermaid/PlantUML/其他] 语法：

# 项目概述
- 项目名称：
- 项目类型：
- 核心功能：

# 图表要求
- 图表类型：[具体类型，如架构图/流程图/时序图等]
- 展示重点：[如模块关系、数据流向、交互顺序等]
- 风格要求：[如配色方案、布局方向、详细程度等]

# 技术信息
- 编程语言：
- 框架/库：
- 主要模块：
- 外部依赖：

# 输出格式
请生成一个可直接复制给 AI 的提示词，该提示词应包含：
1. 图表类型和语法
2. 所有必要的组件和关系
3. 清晰的结构和布局说明
4. 样式和美化要求

提示词应该是中文的，结构清晰，可以直接让 AI 生成高质量的可读图表。

图表类型选择指南

| 用户需求 | 推荐图表类型 | 语法 | |---------|-------------|------| | "系统整体结构" | 系统架构图 | Mermaid graph | | "模块怎么依赖" | 组件依赖图 | Mermaid graph | | "数据怎么流动" | 数据流图 | Mermaid flowchart | | "A 怎么调用 B" | 时序图 | Mermaid sequence | | "类之间的关系" | 类图 | Mermaid class / PlantUML | | "状态怎么变化" | 状态机图 | Mermaid stateDiagram-v2 | | "怎么部署的" | 部署架构图 | Mermaid + subgraph | | "数据库表关系" | ER 图 | Mermaid erDiagram | | "分层架构" | C4 模型 | Mermaid + Structurizr |

样式和美化建议

配色方案

推荐使用专业配色：

  • 前端组件：蓝色系 (#3B82F6, #60A5FA)
  • 后端服务：绿色系 (#10B981, #34D399)
  • 数据库：橙色系 (#F59E0B, #FBBF24)
  • 外部服务：紫色系 (#8B5CF6, #A78BFA)
  • 数据流：灰色系 (#64748B, #94A3B8)

布局建议

  • 架构图：使用 graph TB（从上到下）展示层级
  • 流程图：使用 flowchart TD 或 LR，根据流程方向选择
  • 时序图：按时间从左到右排列参与者
  • 类图：使用 classDiagram，继承关系从上到下

细节层次

  • 高层概览：只展示主要模块和核心关系
  • 中层设计：展示主要接口和数据结构
  • 底层实现：展示详细类和方法

根据用户需求选择合适的细节层次。

最佳实践

  1. 先理解再生成：分析代码库结构，理解核心逻辑
  2. 渐进式展示：从高层架构到低层细节，分步生成
  3. 标注清晰：每个组件、关系都应有明确标注
  4. 保持简洁：避免过度复杂，聚焦核心信息
  5. 使用标准语法：使用广泛支持的 Mermaid/PlantUML 语法
  6. 可编辑性：生成的提示词应易于后续调整

示例输出

示例 1：Web 应用架构图提示词

请为以下 Next.js + FastAPI Web 应用生成系统架构图的 Mermaid 提示词：

项目：个人博客系统
前端：Next.js 14 + TypeScript + Tailwind CSS
后端：FastAPI + Python 3.11 + SQLAlchemy
数据库：PostgreSQL + Redis

主要功能：
- 文章列表和详情页
- 用户认证和授权
- 评论系统
- 文章搜索

请生成一个架构图提示词：
- graph TB 布局
- 三个主层级：用户界面 → 前端 → 后端 → 数据
- 标注所有组件及其关系
- 使用专业配色方案

示例 2：API 时序图提示词

请为用户登录流程生成时序图的 Mermaid 提示词：

参与者：
- 用户（浏览器）
- 前端（React 应用）
- 后端 API（/api/auth/login）
- 数据库（users 表）

流程：
1. 用户输入用户名密码
2. 前端调用 POST /api/auth/login
3. 后端验证数据库
4. 返回 JWT Token
5. 前端存储 Token

请生成 sequence diagram 提示词，包含所有必要的参数标注。

支持的图表语法

  • Mermaid：最通用，支持架构图、流程图、时序图、类图、状态图、ER 图、甘特图、思维导图等
  • PlantUML：更专业的 UML 支持，适合复杂的类图和用例图
  • Structurizr：专门用于 C4 软件架构模型
  • Graphviz (DOT)：最灵活的图形描述语言

默认推荐 Mermaid，因为它语法简洁且广泛支持。