shield_lock
JinDaGe
Contact
← Back to skills
extension
Category: OtherNo API key required

代码流程图生成skill

让复杂的代码逻辑在一张树状流程图中进行直观的显示其运行逻辑

personAuthor: user_76770c14hubcommunity
downloadDownload package

Code Flowchart Generator

功能描述

该技能用于生成代码逻辑和架构的流程图，支持多种类型的流程图和自定义选项。

流程图类型

  1. 执行流程图 - 展示代码的执行顺序和条件分支
  2. 组件图 - 展示代码的组件结构和依赖关系
  3. 系统架构图 - 展示整个系统的架构和模块关系
  4. 数据流图 - 展示数据在系统中的流动过程
  5. 决策树 - 展示决策逻辑和分支
  6. 树状结构图 - 展示层级结构和父子关系
  7. 子组流程图 - 展示包含子流程的复杂流程

流程图结构

  • 开始/结束节点 - 表示流程的起点和终点
  • 过程节点 - 表示执行的操作或步骤
  • 决策节点 - 表示条件判断
  • 输入/输出节点 - 表示数据的输入和输出
  • 子流程节点 - 表示包含子流程的节点
  • 连接线 - 表示流程的流向

方向选项

  1. Top-Down (TD) - 自上而下的垂直流程
  2. Bottom-Up (BU) - 自下而上的垂直流程
  3. Left-to-Right (LR) - 自左向右的水平流程
  4. Right-to-Left (RL) - 自右向左的水平流程
  5. Top-Down Left-to-Right (TDLR) - 自上而下、自左向右的混合流程
  6. Bottom-Up Right-to-Left (BUR) - 自下而上、自右向左的混合流程

颜色方案

  1. 默认 - 标准的黑白配色
  2. 绿色主题 - 绿色边框，白色背景，黑灰色文字
  3. 彩色编码 - 不同类型的节点使用不同颜色
  4. 灰度 - 不同深度的灰色
  5. 蓝色主题 - 蓝色边框，白色背景
  6. 红色主题 - 红色边框，白色背景

子组结构

子组结构用于将相关的节点组织在一起，形成更清晰的层次结构。

Mermaid 语法示例：

flowchart TD
    A[开始] --> B[初始化]
    B --> C[处理]
    
    subgraph 子流程
    C --> D[步骤1]
    D --> E[步骤2]
    E --> F[步骤3]
    end
    
    F --> G[结束]

树状结构

树状结构用于展示层级关系，类似于组织结构图。

Mermaid 语法示例：

flowchart TD
    A[根节点] --> B[子节点1]
    A --> C[子节点2]
    A --> D[子节点3]
    B --> E[孙节点1-1]
    B --> F[孙节点1-2]
    C --> G[孙节点2-1]
    D --> H[孙节点3-1]
    D --> I[孙节点3-2]
    D --> J[孙节点3-3]

详细示例

1. 自上而下带子组的绿色主题流程图

Mermaid 代码：

flowchart TD
    A[开始] --> B[初始化]
    B --> C[处理]
    
    subgraph 子流程
    C --> D[步骤1]
    D --> E[步骤2]
    E --> F[步骤3]
    end
    
    F --> G[结束]
    
    classDef stage fill:#F0F4F0,stroke:#2c7d2c,stroke-width:2px;
    classDef process fill:none,stroke:#2c7d2c,stroke-width:1px;
    class A,G stage;
    class B,C,D,E,F process;

特点：

  • 垂直自上而下的流程
  • 子组结构清晰
  • 绿色边框，白色背景
  • 黑灰色文字

2. 树状结构

Mermaid 代码：

flowchart TD
    A[根节点] --> B[子节点1]
    A --> C[子节点2]
    A --> D[子节点3]
    B --> E[孙节点1-1]
    B --> F[孙节点1-2]
    C --> G[孙节点2-1]
    D --> H[孙节点3-1]
    D --> I[孙节点3-2]
    D --> J[孙节点3-3]
    
    classDef node fill:none,stroke:#2c7d2c,stroke-width:1px;
    class A,B,C,D,E,F,G,H,I,J node;

特点：

  • 树状结构清晰
  • 绿色边框，白色背景
  • 黑灰色文字

自定义选项

  1. 方向 - 选择流程图的方向
  2. 颜色 - 选择颜色方案
  3. 节点形状 - 选择节点的形状
  4. 连接线样式 - 选择连接线的样式
  5. 层级间距 - 调整节点之间的垂直间距
  6. 节点间距 - 调整节点之间的水平间距
  7. 字体大小 - 调整文字大小
  8. 边框宽度 - 调整边框宽度
  9. 曲线样式 - 调整连接线的曲线样式
  10. 注释 - 添加注释和说明

最佳实践

  1. 保持简洁 - 避免过于复杂的流程图
  2. 使用一致的符号 - 确保流程图中的符号和颜色使用一致
  3. 添加适当的注释 - 为复杂的流程添加注释和说明
  4. 保持流程方向一致 - 确保流程图的方向一致，避免混乱
  5. 使用子组 - 对于复杂的流程，使用子组来组织相关的节点
  6. 避免交叉线 - 尽量避免连接线交叉，保持流程图清晰
  7. 使用适当的缩放 - 确保流程图的大小适中，便于阅读
  8. 添加标题 - 为流程图添加标题，便于理解

输出格式

  1. Mermaid 代码 - 提供可直接使用的 Mermaid 代码
  2. ASCII 流程图 - 提供基于 ASCII 字符的流程图
  3. HTML 文件 - 提供包含流程图的 HTML 文件
  4. 图片 - 提供流程图的图片格式
  5. PDF - 提供流程图的 PDF 格式

如何使用

  1. 提供代码的上下文和功能描述
  2. 选择需要的流程图类型
  3. 指定流程图的方向和颜色方案
  4. 确定需要的详细程度
  5. 选择输出格式
  6. 生成流程图
  7. 查看和调整流程图
  8. 保存或分享流程图

示例请求

  1. "为这段排序算法代码生成一个执行流程图，使用自上而下的方向，绿色主题。"
  2. "为这个Web应用的架构生成一个系统架构图，使用彩色编码。"
  3. "为这个决策树算法生成一个树状结构图。"
  4. "为这个复杂的业务流程生成一个包含子组的流程图，使用蓝色主题。"

注意事项

  1. 对于非常复杂的代码，可能需要分解为多个流程图
  2. 生成的流程图可能需要根据实际情况进行调整
  3. 某些代码结构可能难以用流程图清晰表示
  4. 对于大型系统，可能需要使用多个层次的流程图
  5. 流程图的可读性比完整性更重要，应优先保证清晰易懂

常见问题

  1. 流程图太复杂 - 尝试分解为多个子流程图
  2. 流程图不够详细 - 增加节点和子流程
  3. 流程图方向不合适 - 尝试不同的方向选项
  4. 颜色方案不美观 - 尝试不同的颜色方案
  5. 输出格式不适合 - 尝试不同的输出格式