使用AI绘制流程图

使用AI绘制流程图

前言

本教程意在指导读者使用当下流行的大语言模型通过已存在的代码绘制流程图，帮助人们更清晰地了解代码结构。

〇、原理解释

当下的主流免费大语言模型的都无法直接输出图片，但是它们的对各种代码语法掌握较好，所以我们可以让AI分析代码，输出流程图的标记型语言

Mermaid

，再将输出代码转换为流程图。

一、通过AI获取流程图代码

只要给AI输入提示词：

请使用Mermaid帮我绘制下面代码的流程图

即可获得流程图代码。
我们以以下C++代码为例，

#include<iostream>usingnamespace std;intmain(){
    cout <<"使用do while方法\n";int i =1, sum =0;//定义参数，sum为所求，i为自增变量do{
        sum = sum + i;
        i++;}while(i <=10);
    cout << sum << endl;//在屏幕上输出结果
    cout <<"使用 for 方法\n";for(int i =1, sum =0; i <=10; i++){
        sum = sum + i;}
    cout << sum << endl;}

AI将会输出如下结果：

graph TD;
    A[开始] --> B[初始化变量]
    B --> C{开始循环}
    C -->|do while| D[计算sum = sum + i]
    D --> E[i++]
    E --> F[检查i <= 10]
    F -- 是 --> C
    F -- 否 --> G[输出sum]
    G --> H[开始for循环]
    H --> I[初始化变量]
    I --> J{for循环}
    J -->|for| K[计算sum = sum + i]
    K --> L[i++]
    L --> M[检查i <= 10]
    M -- 是 --> J
    M -- 否 --> N[输出sum]
    N --> O[结束]

二、将Mermaid语言转换为流程图

你可以在Mermid的在线网站绘制流程图，或者你也可以在vscode里安装

Markdown All in One

和

Mermaid Preview

获取流程图，就像这样：

#mermaid-svg-WmLRq1Axvom7mUCC {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-WmLRq1Axvom7mUCC .error-icon{fill:#552222;}#mermaid-svg-WmLRq1Axvom7mUCC .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-WmLRq1Axvom7mUCC .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-WmLRq1Axvom7mUCC .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-WmLRq1Axvom7mUCC .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-WmLRq1Axvom7mUCC .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-WmLRq1Axvom7mUCC .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-WmLRq1Axvom7mUCC .marker{fill:#333333;stroke:#333333;}#mermaid-svg-WmLRq1Axvom7mUCC .marker.cross{stroke:#333333;}#mermaid-svg-WmLRq1Axvom7mUCC svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-WmLRq1Axvom7mUCC .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-WmLRq1Axvom7mUCC .cluster-label text{fill:#333;}#mermaid-svg-WmLRq1Axvom7mUCC .cluster-label span{color:#333;}#mermaid-svg-WmLRq1Axvom7mUCC .label text,#mermaid-svg-WmLRq1Axvom7mUCC span{fill:#333;color:#333;}#mermaid-svg-WmLRq1Axvom7mUCC .node rect,#mermaid-svg-WmLRq1Axvom7mUCC .node circle,#mermaid-svg-WmLRq1Axvom7mUCC .node ellipse,#mermaid-svg-WmLRq1Axvom7mUCC .node polygon,#mermaid-svg-WmLRq1Axvom7mUCC .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-WmLRq1Axvom7mUCC .node .label{text-align:center;}#mermaid-svg-WmLRq1Axvom7mUCC .node.clickable{cursor:pointer;}#mermaid-svg-WmLRq1Axvom7mUCC .arrowheadPath{fill:#333333;}#mermaid-svg-WmLRq1Axvom7mUCC .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-WmLRq1Axvom7mUCC .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-WmLRq1Axvom7mUCC .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-WmLRq1Axvom7mUCC .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-WmLRq1Axvom7mUCC .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-WmLRq1Axvom7mUCC .cluster text{fill:#333;}#mermaid-svg-WmLRq1Axvom7mUCC .cluster span{color:#333;}#mermaid-svg-WmLRq1Axvom7mUCC div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-WmLRq1Axvom7mUCC :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}
do while

是

否

for

是

否

       开始 
     

       初始化变量 
     

       开始循环 
     

       计算sum = sum + i 
     

       i++ 
     

       检查i <= 10 
     

       输出sum 
     

       开始for循环 
     

       初始化变量 
     

       for循环 
     

       计算sum = sum + i 
     

       i++ 
     

       检查i <= 10 
     

       输出sum 
     

       结束 
     

不过这里建议你使用另外一个免费软件（也有网页版）drawio,在将流程图导入后你甚至还可以编辑！

三、 Mermaid的基本语法

关于Mermaid的教程你可以看这里：Mermaid中文网,这里介绍你可能用得上的：

graph TD;

表示流程图是竖着的，你可以改为

graph LR;

使其变为横着的。