/MermaidHelp

MermaidHelp + FineUI11,输入需求,调用gtp接口生成 Mermaid格式流程图并显示

Primary LanguageC#

1. 介绍

输入需求,调用GPTAPI生成mermaid格式的流程图;

这里只作为工具,生成流程图,主要为了加入到公司的项目管理运维管理,二开可以套数据库、接口等。所以功能有限,可以作为工具或代码示例。

在线体验

https://mermaid.shizhuoran.top/

使用的是 GPT_API_free gpt-3.5-turbo模型,可能不稳定,每天100次

2. 技术栈

环境 说明
.Net8.0 后端
FineUI11 前端 + 后端
marked.min.js 显示markdown
highlightjs-line-numbers.min.js 显示 行号
mermaid.min.js 显示流程图
pako.min.js
base64.min.js
压缩加密
https://mermaid.ink/img 导出图片

gpt返回markdown格式的代码;使用marked.min.js显示;highlightjs控制行号格式;同时触发marked.renderer,最后回调 mermaid.render

3. 配置

GPTAPI配置 helpconfig.json 文件,注意不要有注释

GPT_API_free 提供的免费API,目前支持gpt-4ogpt-3.5-turbogpt-3.5-turbo-16k

{
  "model": "gpt-4o",//模型
  "url": "https://api.chatanywhere.tech/v1/chat/completions",//代理地址
  "key": ""//APIKEY
}

MermaidMask.cs 角色面具,目前写死了flowchart LR

3.1 Docker部署

docker-compose.yml

services:
  mermaidhelp:
    restart: unless-stopped
    image: 935732994/mermaidhelp
    #注意80是内部端口
    ports:
      - 8001:80
    #这里填写API配置
    environment:
      - MODEL=gpt-4o
      - URL=
      - KEY=

3.2 本地编译

需要安装 .net8 环境,我的使用的VS2022开发;

可以在根目录下打包:

docker build -t mermaidhelp .

4. 后续

  • Mermaid格式,目前写死了flowchart LR | 2024年6月3日
  • 历史的视图 | 2024年6月3日
  • 全屏显示 | 2024年5月30日
  • 显示错误信息 | 2024年5月30日
  • 关联到 https://mermaid.live/ | 2024年5月30日
  • 增加代码可读性 | 2024年5月30日
  • Docker 支持 | 2024年5月30日

5. 图片

![](https://blog.shizhuoran.top/static/img/508af01e03614acbe3667ba38cdd4698.å¢�å� å��è�½.gif)

6. 链接

FineUI11

GPT_API_free

7. 结善缘