1. 引言：为什么需要“代码 → 流程图”？

• 开发中读代码难、理解逻辑成本高
• 手动画流程图费时、易过期
• 自动化生成 = 实时同步 + 提升协作效率
• 引出解决方案：AI 理解代码 + Mermaid 可视化

2. 技术栈介绍

工具	作用
通义灵码（或你用的 AI 编码助手）	理解 Java/Python/Go 等代码，生成自然语言逻辑描述或直接输出 Mermaid 伪代码
Mermaid	用文本定义图表（流程图、序列图等），轻量、易集成
mermaid-cli (mmdc)	命令行工具，将 .mmd 文件批量转为 PNG/SVG/PDF
VS Code / IDE 插件	实时预览 Mermaid 图表

3. 实战案例：从一段 Java 方法生成流程图

3.1 原始代码（你的 transcribe 方法）

public void transcribe(String id, String transcribeContent) {
    if (id == null) throw new IllegalArgumentException("主键id不能为空");
    if (StringUtils.isBlank(transcribeContent)) throw new IllegalArgumentException("转录文本不为空");
    // ... 后续逻辑
}

3.2 使用通义灵码生成逻辑描述

• 在 IDE 中右键 → “解释代码” 或 “生成流程图”
• AI 输出结构化逻辑（如 if-else 分支、异常路径）

3.3 人工微调 → 转为 Mermaid 语法

创建mmd文件，把上步骤生成的Mermaid代码贴到mmd文档中。

可以自定义样式，使用如下，可以生成白色背景的流程图：

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    classDef default fill:none,stroke:#333,stroke-width:1px,color:#000;

 

3.4 用 mermaid-cli 渲染成图片

下载插件：

npm install -g @mermaid-js/mermaid-cli

执行命令：

# 把mmd文件转成png，精度设为10

mmdc -i 语音转写文字信息.mmd -o 语音转写文字信息.png --scale 10

然后就可以看到有png文件生成

这样就可以节省时间，去做其他的事情，是不是爽歪歪？